[解決済み] JavaScriptで画像データのURLを取得する?
2022-03-15 03:31:14
質問
通常のHTMLページで、いくつかの画像(単に通常の
<img />
HTMLタグ)。できれば、画像を再ダウンロードすることなく、その内容をbase64でエンコードして取得したいのです(つまり、すでにブラウザで読み込まれているので、今度は内容が欲しいのです)。
GreasemonkeyとFirefoxで実現したいですね。
どのように解決するのですか?
注意事項
これは、画像がページと同じドメインのものである場合、または画像に
crossOrigin="anonymous"
属性があり、サーバーがCORSをサポートしている場合。また、元のファイルは得られませんが、再エンコードされたバージョンは得られます。元のファイルと同じ結果を得る必要がある場合は、以下を参照してください。
海堂の回答
.
正しい寸法の canvas 要素を作成し、画像データを
drawImage
関数を使用します。次に
toDataURL
関数を使用して、Base-64 エンコードされた画像を持つ data: url を取得します。画像は完全に読み込まれている必要があり、そうでない場合は空の(黒くて透明な)画像が返されるだけであることに注意してください。
こんな感じでしょうか。Greasemonkeyのスクリプトは書いたことがないので、その環境で動作するようにコードを調整する必要があるかもしれません。
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
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
JPEG形式の画像を取得するのは、古いバージョン(3.5あたり)のFirefoxではうまくいかないので、対応したい場合は互換性を確認する必要があります。エンコーディングに対応していない場合は、デフォルトで "image/png" になります。
関連
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
JavaScriptのStringに関する共通メソッド
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。