Q&A
ローカル環境で試したところ、画像が３秒後にグレー表示されることを確認しました。
現在の問題が何なのか教えていただけますでしょうか？
画像にグレースケールを施す処理が上手く行きません。
Canvasを利用した処理です。
画像の表示は正常に動いています。
よろしくお願い致します。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id='board' width='200' height='300'> <script src="js/app.js"></script> </body> </html>
var canvas = document.getElementById('board'); if(canvas.getContext){ var ctx = canvas.getContext('2d'); } var img = new Image(); img.src = 'img/img01.jpg'; img.onload = function(){ ctx.drawImage(img, 0, 0); setTimeout(function(){ // 改めて画像として取得 let newImg = ctx.getImageData(0, 0, canvas.width, canvas.height); let data = newImg.data; // グレースケール化 for(let i=0,len=data.length; i<len; i+=4){ let color = (data[i] + data[i+1] + data[i+2]) / 3; data[i] = color; data[i+1] = color; data[i+2] = color; } // Canvas上に描画 ctx.putImageData(newImg, 0, 0); }, 3000); };
グレー表示されない、ということでしたら、ブラウザのコンソールにエラーが表示されていないか確認をお願いします（F12キーを押すとコンソールが表示されるかと思います。）
cx20様、返信ありがとうございます。
「let newImg = ctx.getImageData(0, 0, canvas.width, canvas.height);」
Uncaught DOMException: The operation is insecure.
ブラウザはFireFoxです。
グーグル・クロームでは以下のようなエラーメッセージが表示されました。
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D':
The canvas has been tainted by cross-origin data.
グレイスケール化の処理が正しくないように思われます。
R=data[1], G=data[2], B=data[3] だとすると、グレイスケールは下記の式で計算してください。
grayscale = 0.2989 * R + 0.5870 * G + 0.1140 * B;
回答1件
0
ベストアンサー
「let newImg = ctx.getImageData(0, 0, canvas.width, canvas.height);」
Uncaught DOMException: The operation is insecure.
ブラウザはFireFoxです。
そのようなエラーが出る場合は、ローカルにWebサーバーを立てる必要があります。
例えば、Python が入っていればターミナルより index.html のあるフォルダに移動し、
$ python -m http.server 8000
とすることで Web サーバーが起動します。
その後、ブラウザで http://localhost:8000 にアクセスしてみて下さい。
■ pythonでローカルwebサーバを立ち上げる
https://qiita.com/okhrn/items/4d3c74563154f191ba16
エラーの原因については、下記を参照下さい。
■ <canvas> 利用時の getImageData() がエラー（The canvas has been tainted by cross-origin data.）
http://dotnsf.blog.jp/archives/1077515458.html
投稿2021/10/09 10:56
総合スコア4648
> 例えば、Python が入っていればターミナルより index.html のあるフォルダに移動し、
> $ python -m http.server 8000
例示したやり方は Mac での例になります。
Windows の場合は、PowerShell やコマンドプロンプトから実行下さい。
また、VSCode をご利用であれば、Live Server といった拡張を使うのが簡単かもしれません。
■ お手軽なWebサーバーの立て方
https://qiita.com/massie_g/items/2913066e596dae197539
cx20様、アドバイス、ありがとうございます。
getImageData()にクロスオリジン制約が掛かるとは知りませんでした。
アップローダーにファイルを上げたところ、無事作動しました。
本当に助かりました。
Webサーバを立てずにローカルのファイルを参照するとそうなるようです。年々セキュリティが厳しくなってきてますからね。仕方ない所かもしれません。。
あなたの回答
tips
プレビュー
