Redimensionner l'image avec javascript canvas (en douceur)

Question

Je suis en train d'essayer de redimensionner certaines images avec canvas mais je ne sais pas comment les adoucir. Sur photoshop, les navigateurs, etc., il y a quelques algorithmes qu'ils utilisent (par exemple, bicubic, bilinéaire) mais je ne sais pas si ceux-ci sont intégrés à canvas ou non.

Voici mon fiddle: 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 une balise d'image redimensionnée normale, et le deuxième est canvas. Remarquez comment celui de canvas n'est pas aussi lisse. Comment puis-je obtenir une 'fluidité'?

Answer 1

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

Vous pouvez inclure ce fichier dans le navigateur. Les résultats ressembleront à ceux de Photoshop ou Image Magick, en conservant toutes les données de couleur, en moyennant les pixels plutôt qu'en prenant certains et en laissant tomber d'autres. Il n'utilise pas de formule pour deviner les moyennes, il prend la moyenne exacte.

Answer 2

Basé sur la réponse de K3N, j'ai réécrit le code généralement pour quiconque le souhaite

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);

METTRE À JOUR LA DÉMO JSFIDDLE

Voici mon DEMO EN LIGNE

Answer 3

J'ai résolu cela en utilisant l'échelle pour le canvas et la qualité de l'image dans mon cas devient vraiment bonne.

Donc d'abord je mets à l'échelle le contenu à l'intérieur du canvas :

ctx.scale(2, 2)

Puis je mets à l'échelle la balise canvas avec du css :

#myCanvas { transform: scale(0.5); }

Answer 4

export const resizeImage = (imageFile, size = 80) => {

    let resolver = ()=>{};

    let reader = new FileReader();

    reader.onload = function (e) {
        let img = document.createElement("img");
        img.onload = function (event) {
            // Créer dynamiquement un élément canvas
            let canvas = document.createElement("canvas");

            canvas.width=size;
            canvas.height=size;

            // let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");

            // Redimensionnement effectif
            ctx.drawImage(img, 0, 0, size, size);

            // Afficher l'image redimensionnée dans l'élément de prévisualisation
            let dataurl = canvas.toDataURL(imageFile.type);

            resolver(dataurl);
        }
        img.src = e.target.result;
    }

    reader.readAsDataURL(imageFile);

    return new Promise((resolve, reject) => {
        resolver = resolve;
    })
};

Answer 5

J'ai écrit une petite js-utility pour recadrer et redimensionner une image côté client. Voici le lien vers le projet GitHub. Vous pouvez également obtenir un blob à partir 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;
);
//Obtenir le blob
let formData = new FormData();
formData.append('files[0]', resizer.blob);

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