Comment extraire des URL de données d'image codées en base64 à l'aide de JavaScript ?

Extraction d'URL de données d'image à l'aide de JavaScript

Dans divers scénarios de développement Web, il devient essentiel de récupérer le contenu des images présentes sur une page Web sans avoir besoin de téléchargements supplémentaires. Cet article explore une technique permettant de récupérer les données d'image codées en base64 en JavaScript, en se concentrant particulièrement sur son implémentation dans un script Greasemonkey pour Firefox.

Acquérir des données d'image avec Canvas

Pour extraire efficacement les données d'image, nous utilisons un élément canevas en JavaScript. Cette approche consiste à créer un canevas avec des dimensions appropriées et à copier les données de l'image à l'aide de la fonction drawImage(). Le canevas sert de stockage temporaire pour la représentation visuelle de l'image, nous permettant de récupérer ses données.

Conversion au format Base64

Une fois les données de l'image copiées sur le Canvas, nous utilisons la fonction toDataURL() pour obtenir les données au format URL de données. Ce format encapsule les données d'image sous forme de chaîne codée en base64, permettant un stockage et une manipulation faciles.

Implémentation de Greasemonkey

Dans le contexte de Greasemonkey, vous pouvez tirer parti de code fourni pour extraire les données d'image d'une page Web :

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
    var dataURL = canvas.toDataURL("image/png");

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

Ce script vous permet d'extraire la représentation URL des données de images présentes sur la page Web actuelle, qui peuvent ensuite être utilisées davantage dans vos applications basées sur Greasemonkey.

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!