remplacer - modifier image javascript



Redimensionner l'image avec la toile de javascript(doucement) (4)

J'essaye de redimensionner certaines images avec de la toile mais je n'ai aucune idée sur la façon de les lisser. Sur Photoshop, les navigateurs etc .. il y a quelques algorithmes qu'ils utilisent (par exemple bicubique, bilinéaire) mais je ne sais pas si ceux-ci sont construits dans la toile ou non.

Voici mon violon: http://jsfiddle.net/EWupT/

  var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width=300
    canvas.height=234
    ctx.drawImage(img, 0, 0, 300, 234);
    document.body.appendChild(canvas);

Le premier est un tag d'image redimensionné normal, et le second est un canevas. Remarquez que la toile n'est pas aussi lisse. Comment puis-je atteindre la «douceur»?

https://src-bin.com


Answer #1

Basé sur la réponse K3N, je réécris le code généralement pour tout le monde veut

var oc = document.createElement('canvas'), octx = oc.getContext('2d');
    oc.width = img.width;
    oc.height = img.height;
    octx.drawImage(img, 0, 0);
    while (oc.width * 0.5 > width) {
       oc.width *= 0.5;
       oc.height *= 0.5;
       octx.drawImage(oc, 0, 0, oc.width, oc.height);
    }
    oc.width = width;
    oc.height = oc.width * img.height / img.width;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

MISE À JOUR JSFIDDLE DEMO

Voici ma démo en ligne


Answer #2

J'ai écrit petit utilitaire js pour recadrer et redimensionner l'image sur le front-end. Voici le link sur le projet GitHub. Vous pouvez également obtenir blob de l'image finale pour l'envoyer.

import imageSqResizer from './image-square-resizer.js'

let resizer = new imageSqResizer(
    'image-input',
    300,
    (dataUrl) => 
        document.getElementById('image-output').src = dataUrl;
);
//Get blob
let formData = new FormData();
formData.append('files[0]', resizer.blob);

//get dataUrl
document.getElementById('image-output').src = resizer.dataUrl;

Answer #3

J'ai créé une bibliothèque qui vous permet de réduire n'importe quel pourcentage tout en conservant toutes les données de couleur.

https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js

Ce fichier que vous pouvez inclure dans le navigateur. Les résultats ressembleront à la photoshop ou à la magie d'images, en préservant toutes les données de couleur, en faisant la moyenne des pixels, plutôt que de prendre des images proches et d'en laisser tomber d'autres. Il n'utilise pas de formule pour deviner les moyennes, il prend la moyenne exacte.


Answer #4

Puisque le violon de Trung Le Nguyen Nhat n'est pas correct du tout (il utilise juste l'image originale dans la dernière étape)
J'ai écrit mon propre violon général avec la comparaison des performances:

FIDDLE

Fondamentalement, c'est:

img.onload = function() {
   var canvas = document.createElement('canvas'),
       ctx = canvas.getContext("2d"),
       oc = document.createElement('canvas'),
       octx = oc.getContext('2d');

   canvas.width = width; // destination canvas size
   canvas.height = canvas.width * img.height / img.width;

   var cur = {
     width: Math.floor(img.width * 0.5),
     height: Math.floor(img.height * 0.5)
   }

   oc.width = cur.width;
   oc.height = cur.height;

   octx.drawImage(img, 0, 0, cur.width, cur.height);

   while (cur.width * 0.5 > width) {
     cur = {
       width: Math.floor(cur.width * 0.5),
       height: Math.floor(cur.height * 0.5)
     };
     octx.drawImage(oc, 0, 0, cur.width * 2, cur.height * 2, 0, 0, cur.width, cur.height);
   }

   ctx.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);
}




html5-canvas