JavaScript で既にロードされている画像から Base64 でエンコードされた画像データを取得するにはどうすればよいですか?

JavaScript での画像データ URL の抽出

問題:

base64 はどのように取得できますか? HTML タグを使用してブラウザに既にロードされている画像からエンコードされたコンテンツ。再ダウンロードしていますか?

Greasemonkey と Firefox の解決策:

Greasemonkey と Firefox を使用して完全にロードされたイメージのコンテンツを抽出するには、次の手順を実行します:

1. キャンバスの作成: を使用してキャンバス要素を生成します。画像のサイズに一致する寸法を設定します。
2. 画像データのコピー:drawImage 関数を使用して、画像のデータをキャンバスに転送します。
3. データ URL を取得: toDataURL 関数を使用して、base64 でエンコードされた画像データをCanvas.

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

注: このソリューションは、画像データがページと同じドメインから利用可能であるか、サーバーのサポートにより CrossOrigin="anonymous" 属性が有効になっていることを前提としています。コルス。さらに、返された画像は再エンコードされる場合があります。

以上がJavaScript で既にロードされている画像から Base64 でエンコードされた画像データを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。