localhostのcontext.getImageData（）？

Question

私は次のコードスニペットを持っていると私は（XAMPPを実行しているOSX、）ローカルホストからそれを実行しようとしている：

var canvas = document.getElementById('mycanvas'); 
    var cx = canvas.getContext('2d'); 

    var myImg = new Image(); 
    myImg.src = 'images/lion.jpg'; 

    $(myImg).load(function() { 
     cx.drawImage(myImg, 0, 0); 
     var imgData = cx.getImageData(0,0,150,150); 
    }); 

しかし、私はそれを実行したとき、私は、コンソールからこのエラーを取得する：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 
site.js:11Uncaught Error: SECURITY_ERR: DOM Exception 18 

私はここでいくつかの類似の質問を見つけました。これはローカルで作業しているという事実と関係しており、同じドメインから画像にアクセスしようとした場合は起こりません。これが理にかなっているかどうかはわかりませんが、それは私が理解していることです。

私の質問は、ローカルの開発環境でこの作業を行うにはどうすればいいですか？

Answer 1

HTTPサーバー（たとえば、ApacheまたはNginx）でhtmlを提供します。 Pythonがインストールされて

マックOSXが来るので、あなたは、単に、端末を開いて、HTTPサーバを起動することができ、その後、入力：ブラウザでhttp://localhost:8000/

cd /path/to/my/work/ 
python -m SimpleHTTPServer 

次に開きました。これはうまくいくはずです。

Answer 2

別のブラウザをお試しください。これがChromiumの私に起こりました。Firefoxに切り替えるだけで、ローカルでデバッグを続けることができました。

Answer 3

私は、ソリューションのコンボを使用して終了（this other problemを参照）

ステップ：

1. base64文字列に画像を変換します。
2. Image jsオブジェクトのsrcとして割り当てます。キャンバス上
3. ドロー

コード：

// helper to transform to base64 
// see other question for more help 
function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    }; 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 

var canvas  = document.querySelector("canvas"); 
var ctx   = canvas.getContext("2d"); 
var png   = new Image(); 
var backgroundSrc = "....."; 

png.onload = function() { 
    ctx.drawImage(png, 0, 0); 
}; 

toDataUrl(backgroundSrc, function(base64Img) { 
    png.src = base64Img; 
}); 

私はこのソリューションは最適ではないですけど、それは私のために働いて画像が同じ起源から来ていないときに役立ちます。

同じ問題が発生した場合は誰でもこれを投稿しています。