Javascriptでcanvasに描画した画像をURLに変換・表示ができない、

前提

Javascriptを使ってcanvasタグで画像を描画しました。

発生している問題・エラーメッセージ

canvasで描画した画像をtoDataURL()でURLに変換し、そのままそれをHTMLに表示させるようにしたかったのですが、うまくいきません。
画像を描画するところまではできるのですが、なぜか「保存」を押しても表示されないままになってしまいます。

該当のソースコード

html
1<style>
2    canvas {
3        position: relative;
4        border:1px solid #000;
5    }
6    
7    div#img-box{
8        border:1px solid #000;
9        width:500px;
10    }
11</style>
12<body>
13    <canvas id="canvassample" width="300px" height="300px"><img  style="display: none;" id="media" alt="画像"></canvas>  
14    <h2>画像出力<h2>  
15    <div id="img-box"><img id="newImg"></div>
16    <div id="btn-box">
17        <button type="button" onclick="chgImg()" value="1">保存</button>
18    </div>
19</body>
20    <script>
21        var canvas = document.getElementById('canvassample'),
22            ctx = canvas.getContext('2d')
23
24        var image = document.getElementById("media");
25
26        image.src = "https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png";
27
28        image.onload = ()=>{
29            ctx.drawImage(image, 0, 0, 300, 300);
30        };
31
32        
33        function chgImg(){
34        var png = canvas.toDataURL();
35        
36        document.getElementById("newImg").src = png;
37        }
38    </script>

int32_t

2022/10/04 22:44

ブラウザの開発者ツールのコンソールにエラーが出ていませんか。

TETETE

2022/10/04 23:48

はい！確かにエラーが出ていました！ Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 調べてもあまり決定打になるような改善策は見つからなかったです、。

行動規範の内容に同意します

回答2件

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

「画像とキャンバスをオリジン間で利用できるようにする」に詳細が書かれています。

HTMLページと画像を同一のサーバで提供するか、サーバで画像のCORS設定を変更する必要があります。

投稿2022/10/05 00:10

int32_t

総合スコア20856

ご指定の画像自体がcorsにかかるわけじゃなさそうなので一旦fetchでblobに読んでおけばいけそうですね
ただし保存ボタンが「保存」として機能しているかどうかは別の話。

javascript
1<style>
2canvas {
3position: relative;
4border:1px solid #000;
5}
6div#img-box{
7border:1px solid #000;
8width:500px;
9}
10#media{
11display:none;
12}
13</style>
14<script>
15window.addEventListener('DOMContentLoaded', ()=>{
16  const url="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png";
17  const canvas = document.querySelector('#canvassample');
18  const ctx = canvas.getContext('2d');
19  let png;
20  fetch(url).then(res=>res.blob()).then(x=>{
21    const src=URL.createObjectURL(x);
22    media.onload = ()=>{
23      ctx.drawImage(media, 0, 0, 300, 300);
24      png = canvas.toDataURL("image/png");
25    };
26    media.src = src;
27  });
28  btn.addEventListener('click',()=>{
29    newImg.src = png;
30  });
31});
32</script>
33
34
35<canvas id="canvassample" width="300px" height="300px"></canvas>  
36<img  id="media" alt="画像">
37<h2>画像出力<h2>  
38<div id="img-box"><img id="newImg"></div>
39<div id="btn-box">
40<button type="button" id="btn" value="1">保存</button>
41</div>