Obtenir des données d'image en JavaScript?

Question

J'ai une page HTML régulière avec quelques images (juste des balises HTML <img /> régulières). Je voudrais obtenir leur contenu, codé base64 de préférence, sans avoir besoin de télécharger à nouveau l'image (c'est-à-dire qu'elle est déjà chargée par le navigateur, alors maintenant je veux le contenu).

J'adorerais y parvenir avec Greasemonkey et Firefox.

Answer 1

Vous aurez besoin de créer un élément canvas avec des dimensions correctes et de copier les données d'image avec l' drawImage fonction. Ensuite, vous pouvez utiliser l' toDataURL fonction permettant d'obtenir des données: l'url qui a codé en base 64 image. Notez que l'image doit être entièrement chargé, ou vous aurez juste revenir un vide (noir, transparent) de l'image.

Il serait quelque chose comme cela. Je n'ai jamais écrit un script Greasemonkey, de sorte que vous pourriez avoir besoin d'ajuster le code à exécuter dans cet environnement.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

L'obtention d'un JPEG format de l'image ne fonctionne pas sur les anciennes versions (autour de 3,5), de Firefox, de sorte que si vous voulez soutenir que, vous aurez besoin pour vérifier la compatibilité. Si le codage n'est pas pris en charge, il sera par défaut "image/png".

Answer 2

Ici tout ensemble: Cette fonction prend l'URL puis retourne l'Image BASE64

 function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function () {


    var canvas = document.createElement("canvas");
    canvas.width =this.width;
    canvas.height =this.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);


    var dataURL = canvas.toDataURL("image/png");

    alert(  dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    }
}
 

Appelez-le comme ceci: getBase64FromImageUrl ("images / slbltxt.png")

Merci Mathew

Answer 3

En plus de la réponse de matthew, je voudrais dire que image.width et image.height retournent la taille affichée de l'image (et recadrent l'image en la dessinant sur la toile)

Utilisez plutôt naturalWidth et naturalHeight, qui utilise l'image en taille réelle.

Voir http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#dom-img-naturalwidth