再ダウンロードせずに JavaScript で画像のデータ URL を取得するにはどうすればよいですか?

JavaScript での画像データ URL の取得

この質問では、既にロードされている画像のデータ URL を取得する方法を求めています。 JavaScript を使用した Web ページ。特に Firefox の Greasemonkey スクリプトで使用します。目的は、イメージの Base64 でエンコードされたコンテンツを、再度ダウンロードするオーバーヘッドを発生させずに取得することです。

解決策:

1. キャンバスを作成する要素: 作成する画像に一致する寸法で空のキャンバス要素を作成します。
2. 画像データのコピー: 「drawImage」関数を使用して、画像データをキャンバス要素にコピーします。このステップでは、画像がすでに完全にロードされていることを前提としています。
3. データ URL の取得: 「toDataURL」関数を使用して、目的の形式でデータ URL を取得します。 PNG または JPEG。提供されるソリューションは RegExp を使用して、データ URL から Base64 でエンコードされたコンテンツのみを抽出します。

注:

a。この方法は、画像が Web ページと同じドメインでホストされている場合にのみ機能します。
b.結果の画像は再エンコードされたバージョンであり、元のファイルの正確なレプリカではありません。
c.提供される JavaScript コードは、Greasemonkey 環境を前提としています。

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