描画データURL変換をお試し by 雪乃☆雫

▶ 実行
画像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スタイル一括設定。
#----------------------------------------