JavaScript を使用して Base64 でエンコードされた画像データ URL を抽出する方法

JavaScript を使用した画像データ URL の抽出

さまざまな Web 開発シナリオでは、Web ページ上に存在する画像のコンテンツを取得することが不可欠になります。追加のダウンロードは必要ありません。この記事では、JavaScript で Base64 でエンコードされた画像データを取得する手法について説明します。特に、Firefox の Greasemonkey スクリプトでの実装に焦点を当てています。

Canvas を使用して画像データを取得する

画像データを効率的に抽出するために、JavaScript の Canvas 要素を利用します。このアプローチには、適切なサイズのキャンバスを作成し、drawImage() 関数を使用して画像データをコピーすることが含まれます。キャンバスは、画像の視覚的表現の一時的なストレージとして機能し、そのデータを取得できるようにします。

Base64 形式への変換

画像データがキャンバスにコピーされたら、 Canvas では、toDataURL() 関数を使用してデータ URL 形式でデータを取得します。この形式は、画像データを Base64 でエンコードされた文字列としてカプセル化し、簡単に保存および処理できるようにします。

Greasemonkey の実装

Greasemonkey のコンテキストでは、 Web から画像データを抽出するコードを提供page:

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,/, "");
}

このスクリプトを使用すると、現在の Web ページに存在する画像のデータ URL 表現を抽出でき、Greasemonkey ベースのアプリケーションでさらに利用できます。

以上がJavaScript を使用して Base64 でエンコードされた画像データ URL を抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。