質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3859閲覧

getImageDataメソッドを実行しようとするとエラーが出る

chuchutakotako

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/01 08:11

編集2019/04/01 08:22
以下のコードを実行すると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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y.H.

2019/04/01 12:37

質問に記載のHTMLをWebサーバーに置いて、http (または https) プロトコルでブラウザでアクセスしていますか? それともhtmlファイルをローカル(file://)で参照していますか?
guest

回答1

0

ベストアンサー

Ja.Stackoverflow に同様の物がありました。

getimageDataを使ってもローカル環境だと画像が上手く読み込めません

結論からいうと、ローカルで参照する場合はセキュリティ機構の仕様により質問記載のThe canvas has been tainted by cross-origin data.が発生します。

webサーバーに配置してhttp(or https)でアクセスしてください。

投稿2019/04/01 12:47

Y.H.

総合スコア7914

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chuchutakotako

2019/04/01 12:59

できました! そんな仕様があるとは知りませんでした///
Y.H.

2019/04/01 13:02

ローカルファイルアクセスでのHTMLファイル参照はセキュリティ的にかなり制限された状態での動作になります。今回の物以外にも色々と制限されるので頭の隅っこに入れておくと良いでしょう
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問