Javascript Girl
  1. Javascript Girl
  3. Canvas toDataUrl augmente la taille du fichier de l'image
Intereting Posts
Ne peut pas lancer un événement mousedown avec jquery TypeError: indéfini n'est pas un objet Comment puis-je lire les données binaires dans un tableau d'octets en version Javascript? Relier des éléments ajoutés dynamiquement dans jQuery mobile Case à cocher type d'entrée ne fonctionne pas à l'intérieur de bootstrap modal Comment puis-je passer une URL avec plusieurs paramètres dans une URL? Comment appeler une fonction asynchrone dans un flux lisible de node.js Comment détecter le support JSON dans javascript? Un moyen approprié de supprimer toutes les données de série d'un diagramme de diagrammes élevés Rails / javascript: "trop ​​de clés de paramètres" – quel est le bon moyen de normaliser les données de formulaire? Comment passer le paramètre à une fonction anonyme définie dans l'appel setTimeout? Comment puis-je analyser le premier objet JSON sur un flux dans JS Kendo UI / jQuery cliquez sur l'événement à plusieurs reprises Sélectionnez DIV avec le z-index le plus élevé Récupération des clés de la paire de valeurs clés de JSON Dynamic dynamiquement – Javascript

Canvas toDataUrl augmente la taille du fichier de l'image

Lorsque vous utilisez toDataUrl () pour définir la source d'une balise d'image, je trouve que l'image enregistrée est beaucoup plus grande que l'image originale.

Dans l'exemple ci-dessous, je ne spécifie pas un second paramètre pour la fonction toDataUrl, de sorte que la qualité par défaut est utilisée. Il en résulte une image beaucoup plus grande que la taille d'image originale. Lorsque vous spécifiez 1 pour une qualité totale, l'image générée est encore plus grande.

Est-ce que quelqu'un sait pourquoi cela se passe ou comment je peux l'arrêter? 

// create image var image = document.createElement('img'); // set src using remote image location image.src = 'test.jpg'; // wait til it has loaded image.onload = function (){ // set up variables var fWidth = image.width; var fHeight = image.height; // create canvas var canvas = document.createElement('canvas'); canvas.id = 'canvas'; canvas.width = fWidth; canvas.height = fHeight; var context = canvas.getContext('2d'); // draw image to canvas context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight); // get data url dataUrl = canvas.toDataURL('image/jpeg'); // this image when saved is much larger than the image loaded in document.write('<img src="' + dataUrl + '" />'); }

Merci: D

Voici un exemple, malheureusement, l'image ne peut pas être cross-domaine et je dois simplement tirer une des images jsfiddle.

Http://jsfiddle.net/ptSUd/

L'image est 7.4kb, si vous enregistrez l'image en sortie, vous verrez qu'il est de 10kb. La différence est plus visible avec des images plus détaillées. Si vous définissez la qualité toDataUrl sur 1, l'image est alors de 17kb.

J'utilise également FireFox 10 pour cela, lorsque j'utilise Chrome, les tailles d'image sont encore plus grandes, mais pas autant.

La chaîne renvoyée par la méthode toDataURL() ne représente pas les données d'origine.

Je viens d'effectuer des tests approfondis, qui ont montré que l'URL de données créée dépend du navigateur (et non du système d'exploitation). 

  Environment - md5 sum - file size Original file - c9eaf8f2aeb1b383ff2f1c68c0ae1085 - 4776 bytes WinXP Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes Linux Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes Linux Firefox 10.0.2 - 4f184006e00a44f6f2dae7ba3982895e - 3909 bytes

La méthode d'obtention de l'URI des données n'a pas d'importance, l'extrait suivant a été utilisé pour vérifier que l'URI des données à partir d'un téléchargement de fichier est également différent:

Cas d'essai: http://jsfiddle.net/Fkykx/ 

 <input type="file" id="file"><script> document.getElementById('file').onchange=function() { var filereader = new FileReader(); filereader.onload = function(event) { var img = new Image(); img.onload = function() { var c = document.createElement('canvas'); // Create canvas c.width = img.width; c.height = img.height; c.getContext('2d').drawImage(img,0,0,img.width,img.height); var toAppend = new Image; toAppend.title = 'Imported via upload, drawn in a canvas'; toAppend.src = c.toDataURL('image/png'); document.body.appendChild(toAppend); } img.src = event.target.result; // Set src from upload, original byte sequence img.title = 'Imported via file upload'; document.body.appendChild(img); }; filereader.readAsDataURL(this.files[0]); } </script>

La taille de l'image est principalement déterminée par la qualité de l'encodeur intégré dans le navigateur. Il a très peu à voir avec la taille de l'image originale. Une fois que vous dessinez quelque chose sur un canvas vous avez tous les pixels, vous n'avez plus l'image originale. toDataURL ne reconstitue pas magiquement une image peinte sur le canvas . Si vous voulez un fichier de la même taille que l'image originale: utilisez l'image originale.

On dirait le kirilloïde et Rob l'a cloué. J'ai aussi eu cette question et cela semble être un combo:

  • Le dataURL utilise l'encodage base 64 qui en fait environ 1,37 X plus grand
  • Chaque navigateur traite la fonction toDataURL différemment

Taille d'image codée base64

J'ai testé mon générateur de vignettes dans win8.1 firefox et chrome et j'ai des tailles de chaîne donnéesURL:

  • Firefox = 3.72kB
  • Chrome = 3.24kB

Mon image originale est convertie en dataURL passant de 32kB à 45kB.

Je pense que la partie base64 est le facteur plus important, alors je suppose que mon plan est maintenant de convertir le dataURL à nouveau sur un tableau d'octets binaires avant de le stocker sur le serveur (probablement côté client car le serveur est paresseux).