以下のコードを実行するとUncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. というエラーが出ます。 どうすれば解消できるでしょうか? このコードは指定した画像をcanvasで描画し、そのcanvasからgetImageData()でデータを読み取り 別のcanvasで描画するというものです。 <html> <body> <canvas id = "reiwa" width = "329" height = "245" ></canvas> <canvas id = "change" width = "329" height = "245"></canvas> <script> var canvas = document.getElementById("reiwa"); var cx = canvas.getContext("2d"); var canvas2 = document.getElementById("change"); var cx2 = canvas2.getContext("2d"); var image = new Image(); image.onload = function(){ canvas.width = image.width; canvas.height = image.height; cx.drawImage(image,0,0); var imageData = cx.getImageData(0,0,canvas.width,canvas.height); var changedData = cx.createImageData(imageData); cx2.putImageData(imageData,0,0); }; image.src = "reiwa.jpg"; </script> </body> </html>
質問に記載のHTMLをWebサーバーに置いて、http (または https) プロトコルでブラウザでアクセスしていますか?
それともhtmlファイルをローカル(file://)で参照していますか?
ローカルで参照しています
過去の質問も含め全て解決済みになってないですが、もし解決した物があれば解決済みにしておいてください。
ヘルプ「4. 解決できたら」 ( https://teratail.com/help/question-tips#questionTips4 )
回答1件
あなたの回答
tips
プレビュー