詳しい人求む！

JavaScriptが期待どおりに動いてくれない件

解決済

質問者：tmiyoshi
質問日時：2020/12/08 10:56
回答数：4件

以下のJavaScriptですが、ファイルをtest.htmlの名前で保存して、同じデイレクトりにpic.jpg
を置いて、test.htmlをクリックして立ち上げると、window.onload のctx.drawImage(picImg, 0, 0);
までは上手くいって、元のpic.jpgはcanvasに表示されるのですが、何故か、var pixels = ctx.getImageData(0, 0, picImg.width, picImg.height);以降のJavaScript文が実行されません。（この部分で取り込んだpic.jpgの書き換えを行っています。）原因として何が考えられるでしょうか？

<html>
<head>
<title>List 5</title>
<script type = "text/javascript">
var picImg = document.createElement("img");
picImg.src = "pic.jpg";

window.onload = function() {
var ctx = document.getElementById("mycanvas").getContext("2d");
ctx.drawImage(picImg, 0, 0);
var pixels = ctx.getImageData(0, 0, picImg.width, picImg.height);
for(var y=0; y<pixels.height; y++) {
for(var x=0; x<pixels.width; x++) {
var r = pixels.data[(y * pixels.width + x) * 4]; // R
var g = pixels.data[(y * pixels.width + x) * 4 + 1]; // G
var b = pixels.data[(y * pixels.width + x) * 4 + 2]; // B
var gray = 0.298912 * r + 0.586611 * g + 0.114478 * b;
pixels.data[(y * pixels.width + x) * 4] = gray;
pixels.data[(y * pixels.width + x) * 4 + 1] = gray * 0.7;
pixels.data[(y * pixels.width + x) * 4 + 2] = gray * 0.4;
}
}
ctx.putImageData(pixels, 0, 0);
};
</script>
</head>
<body>
<canvas id="mycanvas" width="800" height="800"></canvas>
</body>
</html>

http://localhost下で動きました。
ありがとうございました。
ちなみに、ご指摘のエラーはどのコマンドで見るこができるのでしょうか？

No.3の回答に寄せられた補足コメントです。補足日時：2020/12/08 12:35
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者：ほーほけきょッ
回答日時：2020/12/08 11:49

cross-origin dataのエラーっぽいです。

たぶんですが、ローカルで表示しているからではないかと思います。
ウェブサーバー上に置いた場合はどのようになりますでしょうか。

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at window.onload (test.html:11:18)

- 0
- 件

通報する

No.4

回答者：ほーほけきょッ
回答日時：2020/12/08 12:40

No.3：追記

Chromeでしたら、［F12］キーを押すか、表示エリアで右クリックして［検証］をクリックすると、デバッグ的なツールが表示できます。その［Console］にエラーが表示されます。変数の中身を見たり、ブレークポイントも付けられますので、HTML／CSS／JavaScriptのデバッグができます。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。

通報する

お礼日時：2020/12/08 13:08

No.2

回答者： fujillin
回答日時：2020/12/08 11:41

こんにちは

色の計算内容まで追いかけてはいませんが、セピア調に変換されればＯＫってことでしょうか？
試してみたところ、一応、動作するみたいです。

もしかすると、質問者様はローカル環境でテストしていませんか？
その場合は、画像のURLが file://～となるため、cross-origin Data として扱われてエラーになるようです。

サーバ環境でテストすれば、動作するのではないかと想像します。
（計算結果が予定通りかどうかは、こちらではわかりません）