Q&A
canvasに描画した画像をcanvas.getContext("2d").getImageDataで取得したいです。
同じサーバに置いてある画像は問題なく下記のソースで取得出来たのですが、
GoogleChartAPIをを使用した場合はエラーが発生します。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body style="background-color: bisque"> 8 <img id="qr" src="" /> 9 <canvas id="canvas"></canvas> 10 </body> 11 <script> 12 let canvas = document.getElementById('canvas'); 13 let qrImage = document.getElementById('qr'); 14 draw(canvas,qrImage); 15 // qrImage.src='qr.png';//正常 16 qrImage.src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=test';//異常 17 18 function draw(canvas,image){ 19 image.addEventListener("load",function (){ 20 canvas.width = image.naturalWidth; 21 canvas.height = image.naturalHeight; 22 let ctx = canvas.getContext("2d"); 23 ctx.drawImage(image, 0, 0);//canvasにdraw 24 25 //Uncaught DOMException: 26 //Failed to execute 'getImageData' on 'CanvasRenderingContext2D': 27 //The canvas has been tainted by cross-origin data. 28 let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 29 console.dir(imageData); 30 }); 31 } 32 </script> 33</html>
エラーは
Uncaught DOMException:
Failed to execute 'getImageData' on 'CanvasRenderingContext2D':
The canvas has been tainted by cross-origin data.
が派生します。
コメントで正常と書かれているqrImage.src='qr.png'をすると問題なく取得出来ます。
このエラーはどのような理由で発生しているのでしょうか？
また、どのようにすれば解決することができるでしょうか？
よろしくお願いします。
回答1件
0
ベストアンサー
別ドメインのリソースへのアクセスには制限があります。自前のサーバを経由させる等の対策が必要だと思われます。
（下記の記事では難しく対処していますが「 Access-Control-Allow-Origin ヘッダー」を付与する中継サーバでも用意してしまえばそっちのほうが簡単なはず）
【canvasのCORS制限を突破する | WEB EGG】
https://blog.leko.jp/post/how-to-disable-limitation-of-cors-in-html5-canvas/
【画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image
最初に必要なものは、画像をホスティングし、画像ファイルに対するオリジン間のアクセスを許可するために、 Access-Control-Allow-Origin ヘッダーが構成されたサーバーが必要です。
投稿2019/02/19 16:39
編集2019/02/19 16:41
総合スコア69583
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。