HTML5キャンバス：ピクセル

Question

のネガポジ反転、私はWC3のチュートリアルを次のですが、ここが見つかりました：私は私の画像がアップロードされ、これに隣接していhttp://www.w3schools.com/tags/canvas_getimagedata.asp

は、私は素敵なボーダーを持っているキャンバスであると私はしようとしていますサイドバイサイド画像を表示する。私はデモンストレーションとしてピクセルの色を反転しようとしていますが、私は色を変更することができません私はなぜ理解していません。ここで

は私はJSからHTMLを分離私のコードのペンです： http://codepen.io/kKasper/pen/zBXWOZ

document.getElementById("team").onload = function() { 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=document.getElementById("team"); 
    ctx.drawImage(img, 0, 0); 
    var imgData = ctx.getImageData(0, 0, c.width, c.height); 
    // invert colors 
    var i; 
    for (i = 0; i < imgData.data.length; i += 4) { 
     imgData.data[i] = 255 - imgData.data[i]; 
     imgData.data[i+1] = 255 - imgData.data[i+1]; 
     imgData.data[i+2] = 255 - imgData.data[i+2]; 
     imgData.data[i+3] = 255; 
    } 
    ctx.putImageData(imgData, 0, 0); 
}; 

それはctx.drawImage（IMG、0、0）と思われます。はキャンバスの中に私のイメージを描いています。何らかの理由で、WC3チュートリアルで機能する関数が画像上で正しく機能していないのは、関数の後に画像を描画するときに変更がないためです。

誰でもこの問題を解決するのに役立つことができますか？

Answer 1

Codepenでブラウザのデベロッパーコンソールを開こうとしてください。私はこのエラーを取得しています：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

これは、あなたがキャンバスに別のドメイン（すなわちないcodepen.io）から画像を描画したことを意味します。悪意のあるスクリプトが外部ドメインと通信することを防ぐセキュリティ機能として、ブラウザはJSがそのようなデータにアクセスすることを禁止します。 same-origin policyのMDNの記事を参照してください。

コードをローカルファイルから実行するか、ページと同じドメインのイメージを使用してみてください。私はそれがうまくいくと思う。

デベロッパーコンソールはあなたの友人です！

Answer 2

ブラウザがブレンドをサポートしている限り、合成を使用してイメージを反転できます。

利点：

• これはキャンバスgetImageData
• よりも高速ですが、クロスオリジンのセキュリティ制限を

ctx.drawImage(img,0,0); 
ctx.globalCompositeOperation='difference'; 
ctx.fillStyle='white'; 
ctx.fillRect(0,0,canvas.width,canvas.height);