Comment réduire la taille d'une image avant de l'envoyer au serveur ?

Question

J'utilise Fabric.js. Lorsque j'essaie d'envoyer une image canvas au serveur en utilisant canvas.toDataURL('image/png'), cela prend environ 40 secondes. Je la convertis en blob mais cela prend également 25-30 secondes. Lorsque je réduis la taille du canvas, cela réduit la taille de l'image de fond mais l'objet (texte et images) apparaît en dehors de l'image de fond (réduction non proportionnelle). Comment puis-je réduire le temps de téléchargement ?

Answer 1

Vous devez prendre un instantané de la toile actuelle vers une nouvelle toile avec la nouvelle taille :

Vous pouvez par exemple procéder comme suit.

var fabricCanvas = document.getElementById('fcanvas');  //real ID here
var scaledCanvas = document.createElement('canvas');    //off-screen canvas

scaledCanvas.width = 400;  //size of new canvas, make sure they are proportional
scaledCanvas.height = 300; //compared to original canvas

// scale original image to new canvas
var ctx = scaledCanvas.getContext('2d');
ctx.drawImage(fabricCanvas, 0, 0, scaledCanvas.width, scaledCanvas.height);

//extract image
var data = scaledCanvas.toDataURL(); //no need to specify PNG as that's the def.

Vous pouvez maintenant télécharger une version réduite de la toile.

Answer 2

toDataURL

Vous pouvez définir format à l'attribut jpeg Cela réduira instantanément la taille de l'image de 50%

canvas.toDataURL({
   'format':'jpeg'
});

Si vous souhaitez une compression plus importante, vous pouvez définir quality à cet attribut.

canvas.toDataURL({
   'format':'jpeg'
   // default value of `quality` is 1 and varies from 0..1
   'quality': 0.5
});

Remarque : quality ne fonctionne que pour les jpeg format