J'essaie de créer une image miniature du côté client en utilisant javascript et un élément canvas, mais quand je rétrécis l'image, ça a l'air terrible. Il semble qu'il ait été réduit dans Photoshop avec le rééchantillonnage défini sur `` Voisin le plus proche '' au lieu de Bicubic. Je sais qu'il est possible de faire en sorte que cela soit correct, car ce site peut très bien le faire en utilisant également une toile. J'ai essayé d'utiliser le même code que celui indiqué dans le lien "[Source]", mais il a toujours l'air terrible. Y a-t-il quelque chose qui me manque, un paramètre qui doit être défini ou quelque chose?
ÉDITER:
J'essaie de redimensionner un jpg. J'ai essayé de redimensionner le même jpg sur le site lié et dans photoshop, et il a l'air bien lorsqu'il est réduit.
Voici le code pertinent:
reader.onloadend = function(e)
{
var img = new Image();
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
};
img.src = reader.result;
}
EDIT2:
On dirait que je me suis trompé, le site Web lié ne faisait pas mieux de réduire la taille de l'image. J'ai essayé les autres méthodes suggérées et aucune d'entre elles n'est meilleure. C'est ce que les différentes méthodes ont abouti:
Photoshop:
Toile:
Image avec rendu d'image: optimisationQualité définie et mise à l'échelle avec largeur / hauteur:
Image avec rendu d'image: optimisationQualité définie et mise à l'échelle avec -moz-transform:
Redimensionnement de la toile sur pixastic:
Je suppose que cela signifie que Firefox n'utilise pas l'échantillonnage bicubique comme il est censé le faire. Je vais devoir attendre jusqu'à ce qu'ils l'ajoutent réellement.
EDIT3: