Comment convertir une image en chaîne base64 à l'aide de javascript ?

Question

J'ai besoin de convertir mon image en une chaîne base64 afin de pouvoir l'envoyer à un serveur. Existe-t-il un fichier js pour cela... ? Sinon, comment le convertir ?

Answer 1

Essayez ça :

Code

/**
 * Convert an image 
 * to a base64 string
 * @param  {String}   url         
 * @param  {Function} callback    
 * @param  {String}   [outputFormat=image/png]           
 */
function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback.call(this, dataURL);
        canvas = null; 
    };
    img.src = url;
}

Utilisation

convertImgToBase64('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Formats d'entrée pris en charge

• image/png
• image/jpeg
• image/jpg
• image/gif
• image/bmp
• image/tiff
• image/x-icône
• image/svg+xml
• image/webp
• image/xxx

Formats de sortie pris en charge

• image/png
• image/jpeg
• image/webp (chrome)

Démonstration :

http://jsfiddle.net/handtrix/YvQ5y/

Advanced-Code :

https://gist.github.com/HaNdTriX/7704632

Test : type de mime toDataUrl

http://kangax.github.io/jstests/toDataUrl_mime_type_test/

Support des navigateurs (à ce jour)

• http://caniuse.com/#feat=canvas
• > IE10 (IE10 fonctionne uniquement avec des images de même origine)

Answer 2

Vous pouvez utiliser le HTML5 <canvas> pour cela :

Créez un canevas, chargez-y votre image et utilisez ensuite toDataURL() pour obtenir la représentation en base64 (en fait, c'est une data: URL mais elle contient l'image codée en base64).

Answer 3

Vous pourriez utiliser FileAPI mais il n'est pas soutenu.

Answer 4

Pour autant que je sache, l'image peut être convertie en chaîne de caractères base64 soit par FileReader(), soit en la stockant dans l'élément canvas et en utilisant ensuite toDataURL() pour obtenir l'image.

Convertir une image en canevas qui est déjà chargé

Answer 5

Cela devrait aider...

Comment encoder en Base64 en utilisant Javascript ?

Obtenir des données d'image en Javascript ?