JavaScript Canvas ImageDataを用いた2値化

Question

前提

OS：Windows10(64bit)
ブラウザ：Firefox,Chrome
実行環境：ローカル

実現したいこと

やりたいことはシンプルで、タイトルのとおりです。
読み込んだ画像を2値変換したいです。

発生している問題・エラーメッセージ

変換されず、カラーのままの画像がそのまま出力される。

該当のソースコード

<div id="container"></div>

<script type="text/javascript">

  var cvs = document.createElement("canvas");
  cvs.width = 500;
  cvs.height = 500;

  document.getElementById('container').appendChild(cvs);
  var ctx = cvs.getContext("2d");
  var img = document.createElement("img");

  function onLoad() {
    ctx.drawImage(img, 0, 0);
    var imagedata = ctx.getImageData(0, 0, 500, 500);

    for (var y = 0, i = 0; y < 500; y++) {
      for (var x = 0; x < 500; x++, i += 4) {
        var value = (imagedata.data[i] + imagedata.data[i + 1] + imagedata.data[i + 2]) / 3;
        imagedata.data[i] = imagedata.data[i + 1] = imagedata.data[i + 2] = value;
      }
    }

    ctx.putImageData(imagedata, 0, 0);
  }

  img.addEventListener("load", onLoad, false);
  img.src = "man.png";
</script>

試したこと

ブラウザが問題かもしれないと思い、念のため別のブラウザでも試したが同じ結果となった。

Comments

[pussy_pussy]

最新版のChromeで実行したときのConsoleです。
ここらへんが問題のような感じがするので、調べてみます。

"The canvas has been tainted by cross-origin data.
at HTMLImageElement.onLoad"

Answer 1

HTML と man.png をローカルファイルとしてアクセスしているのでしょう。その場合、HTML と man.png は別オリジンと見なされて getImageData() は利用不能になります。

両方のファイルをウェブサーバから提供するようにして、同一オリジンにしてください。

Comments

[pussy_pussy]

ありがとうございます。試してみます。