描画データURL変換をお試し 📖

まにゅあるのサンプルにしようと思ったら、オリジン制限？かなんかで貯蔵庫の画像が表示は出来るけど描画データURL変換はできなかったので折角だからこっちに上げておく。キャンバスに描画した画像のデータURL文字列を、IMG要素のsrcに設定して表示しています。 また、表示された描画データURLは、ブラウザのアドレスバーにコピペすると、画像を表示することができます。／サンドボックス化したらここでもクロスオリジン的なエラーになってしまったが、JS実行でcrossorigin属性をつけることでとりあえず動くようになることを確認☆

プログラム: (→大)
画像URL＝「https://n3s.nadesi.com/image.php?f=8.jpg」 描画データURL＝空。 画像URLの画像読んだ時には 　　画像＝対象。 　　画像の[0,0,640,480]を[0,0,320,240]に画像部分描画。 　　描画データURL＝描画データURL変換。 「#IMG」の「src」に描画データURLをDOM属性設定。 　　描画データURLを表示。 ここまで。 DOM親要素へ「☆描画データURL文字列をIMG要素のsrcに設定して表示しているよ☆<BR> また、コピーボタンをクリックしてブラウザのアドレスバーに貼付けると、画像が表示されます！<BR> <img id="IMG">」をHTML設定。 /* #---------------------------------------- 「function gazo(url) {波カッコ} const img = new window.Image() img.src = url img.crossOrigin="Anonymous" return img {波カッコ閉じ}; gazo("{画像URL}")」をJS実行。 1秒待つ。 画像はそれ。 [0,0,320,240]へ画像を画像描画。 描画データURL変換して表示。 #---------------------------------------- */ 改行作成。 「コピー」のボタン作成して、コピーボタンに代入。 コピーボタンをクリックした時には、 描画データURLをクリップボード設定。 ここまで。 「ダウンロード」のボタン作成して、ダウンロードボタンに代入。 ダウンロードボタンをクリックした時には、 描画ダウンロード。 ここまで。 #---------------------------------------- ＃表示エリアを縮小して、編集時の表示に寄せる 「#nako3_info」に、{ "ボーダー":"1px solid {銀色}", "背景色":"#f9f5f0", "マージン":"4px", "余白":"8px", "max-width":"60em", "max-height":"10em", "overflow-y":"auto", "resize":"vertical", "box-sizing":"content-box" }をDOMスタイル一括設定。 「#nako3_div button」に{ "マージン":"4px", "余白":"4px", "font-size":"0.9em" }をDOMスタイル一括設定。 #----------------------------------------