Redimensionner une image Base-64 en JavaScript sans utiliser de canevas

J'ai besoin d'un moyen de redimensionner des images en JavaScript sans utiliser un élément HTML.

Mon application HTML mobile prend des photos puis les convertit en cordes base64. Par la suite, je dois les redimensionner avant d'être envoyé à l'API afin d'économiser de l'espace de stockage.

Je recherche une manière différente et plus appropriée de les redimensionner puis d'utiliser un élément de toile. Y at-il un moyen?

Un moyen d'éviter que le HTML principal soit affecté est de créer un canevas hors écran qui est conservé hors du DOM-tree.

Cela fournira un tampon bitmap et un code compilé natif pour coder les données d'image. Il est simple de faire:

function imageToDataUri(img, width, height) { // create an off-screen canvas var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); // set its dimension to target size canvas.width = width; canvas.height = height; // draw source image into the off-screen canvas: ctx.drawImage(img, 0, 0, width, height); // encode image to data-uri with base64 version of compressed image return canvas.toDataURL(); } 

Si vous souhaitez produire un format différent de PNG (par défaut), il suffit de spécifier le type de ce type:

 return canvas.toDataURL('image/jpeg', quality); // quality = [0.0, 1.0] 

Il vaut la peine de noter que les restrictions toDataURL() s'appliquent à toDataURL() .

Si votre application ne donne que des images encodées base64 (je suppose qu'elles sont données-uri avec des données base64?), Alors vous devez "charger" l'image en premier:

 var img = new Image; img.onload = resizeImage; img.src = originalDataUriHere; function resizeImage() { var newDataUri = imageToDataUri(this, targetWidth, targetHeight); // continue from here... } 

Si la source est pure base-64 string, ajoutez simplement un en-tête pour que cela soit un data-uri:

 function base64ToDataUri(base64) { return 'data:image/png;base64,' + base64; } 

Remplacez simplement la partie image/png par le type que représente la chaîne base 64 (c.-à-d. Un argument facultatif).

La réponse de Ken est la bonne réponse, mais son code ne fonctionne pas. J'ai fait quelques ajustements et ça fonctionne parfaitement. Pour redimensionner un URI de données:

 // Takes a data URI and returns the Data URI corresponding to the resized image at the wanted size. function resizedataURL(datas, wantedWidth, wantedHeight) { // We create an image to receive the Data URI var img = document.createElement('img'); // When the event "onload" is triggered we can resize the image. img.onload = function() { // We create a canvas and get its context. var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // We set the dimensions at the wanted size. canvas.width = wantedWidth; canvas.height = wantedHeight; // We resize the image with the canvas method drawImage(); ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight); var dataURI = canvas.toDataURL(); ///////////////////////////////////////// // Use and treat your Data URI here !! // ///////////////////////////////////////// }; // We put the Data URI in the image's src attribute img.src = datas; } // Use it like that : resizedataURL('yourDataURIHere', 50, 50); 

Oui, vous pouvez. Ces solutions sont bonnes pour redimensionner non seulement la conversion d'image en base64.

  1. Vous pouvez convertir le fichier js en bitmap d'image par jpg-js . Et vous pouvez redimensionner uniquement par cette lib, mais dans un cas de redimensionnement d'une image très grande à très petite, la qualité sera très mauvaise. La meilleure façon pour les images haute résolution est Pour convertir le fichier en bitmap par jpg-js, puis redimensionner ce bitmap par Pica lib.
  2. Vous pouvez obtenir des données d'image à partir d'un fichier par jpg-js (ou dessiner une image sur toile), puis redimensionner canvasImageData en redimensionnant lib pica . (Bon pour images haute résolution, sans restriction de taille de toile)
  3. Vous pouvez utiliser une toile hors écran, sans attacher la toile à un corps, et redimensionner une image. Cette solution sera plus rapide, mais sera la pire solution pour les images haute résolution, par exemple 6000×6000 pixels. Dans ce cas, la toile de résultat peut être de mauvaise qualité ou simplement vide, ou le navigateur peut tomber avec une exception de limite de mémoire. (Bon pour les images normales et petites)

Jpg-js et Pica n'utiliseront aucun élément dom. Ces libs ne fonctionnent qu'avec des données d'image, sans éléments dom (toile et image).

À propos de la toile, restriction de taille voir cette publication

Vous pouvez utiliser une manipulation d'image Base64 brute comme illustré ici.

Il semble difficile (et pour png seulement) et pourquoi beaucoup choisissent d'utiliser un canevas

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/