Comment puis-je obtenir des données d'image codées en base64 à partir d'images déjà chargées en JavaScript ?

Extraction des URL de données d'image en JavaScript

Problème :

Comment pouvez-vous obtenir base64- contenu encodé à partir d'images déjà chargées dans un navigateur à l'aide de balises HTML, sans avoir besoin de retélécharger ?

Solution pour Greasemonkey et Firefox :

Pour extraire le contenu des images entièrement chargées à l'aide de Greasemonkey et Firefox, mettez en œuvre les étapes suivantes :

1. Créer un canevas : Générez un élément de canevas dont les dimensions correspondent à celles de l'image size.
2. Copier les données de l'image : Utilisez la fonction drawImage pour transférer les données de l'image sur le canevas.
3. Obtenir l'URL des données : Utilisez l'URL toData fonction pour récupérer les données d'image codées en base64 à partir du toile.

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

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

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

Remarque : Cette solution suppose que les données d'image sont disponibles à partir du même domaine que la page ou que l'attribut crossOrigin="anonymous" est activé avec la prise en charge du serveur pour CORS. De plus, l'image renvoyée peut être réencodée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!