キャンバスは原点を越えたデータの作業で汚染されていた

私はページ上の画像の見た目を編集するためにスクリプトを書く（または、一緒に編集し、ハッキングする）。私はjavascriptの基礎を知っているが、これはキャンバスを見て初めてのことだ。ので、私はキャンバスは原点を越えたデータの作業で汚染されていた

私はこのエラーを取得していてクマ：

キャンバスは、クロスオリジン・データによって汚染されていますので、キャンバスから画像データを取得できません。

のでHERESに私のコードスニペットは、エラーをスロー：

var canvas = document.createElement('canvas'), 
      context = canvas.getContext('2d'), 
      height = img.naturalHeight || img.offsetHeight || img.height, 
      width = img.naturalWidth || img.offsetWidth || img.width, 
      imgData; 


     canvas.height = height; 
     canvas.width = width; 
     context.drawImage(img, 0, 0); 

     console.log(context); 
     try { 
      imgData = context.getImageData(0, 0, width, height); 
     } catch(e) {}

は今、私はこの記事を見つけました：

http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/

が、私はそれは私のニーズに合うようにする方法がわかりません...

私はセキュリティとそのすべてのためにそのすべてを知っていますが、すべてを実現させるための回避策がありますか？

おかげ

EDIT

あなたは...そう、それは「ローカル」

出典

2013-08-27 Dustin Silk

いいえ、セキュリティを回避することはできません。おそらく、[SOPを迂回する方法]を見てください（http：// stackoverflow。com/questions/3076414/way-to-circumvent-the-same-origin-policy） – Bergi

私はこれを知りました.. http://www.maxnov.com/getimagedata/ 私はこれを理解しようとします正しい方向になるようにする。 –

@ Ken-AbdiasSoftware：いいえ、できません。このデモではCORSも使用しています。 – Bergi

CORSを満たすために作るために離れているgetImageDataすることはできませんので、ああ...エラーがある待って、あなた

あなたがimage.crossOrigin = "anonymous"と発言すれば、セキュリティエラーは発生しません。

ここでは

var image=new Image(); 
    image.onload=function(){ 
    } 
    image.crossOrigin="anonymous"; 
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

コードとフィドルです：サーバー側でCORSを有効にするhttp://jsfiddle.net/m1erickson/4djSr/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var image=new Image(); 
    image.onload=function(){ 
     ctx.drawImage(image,0,0); 

     // desaturation colors 
     var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 
     var data=imgData.data; 

     for(var i = 0; i < data.length; i += 4) { 
      var grayscale= 0.33*data[i]+0.5*data[i+1]+0.15*data[i+2]; 
      data[i]=grayscale; 
      data[i+1]=grayscale; 
      data[i+2]=grayscale; 
     } 

     // write the modified image data 
     ctx.putImageData(imgData,0,0); 

    } 
    image.crossOrigin="anonymous"; 
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png"; 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=140 height=140></canvas> 
</body> 
</html>

出典

2013-08-27 21:11:17 markE

よろしくお願いいたします。私はこれがトリックをするかどうかを見るために、朝にもう一度それに立ち往生しよう。 –

が出方法です、しかし、あなたはサーバ側へのアクセス権を持っている場合、それはです。そうすることで、サーバーはCORS対応イメージを提供します。

出典

2015-03-07 22:04:45 chuqdennis

私は実際にコメントを追加するのに十分な評判はありませんが、私は匿名を大文字にしなければならないというマークの答えに追加したかっただけです。私はあなたがウィンドウを作成する場合、それはクロムと連携た

image.crossOrigin = "Anonymous"

出典

2015-04-01 00:21:27

は次のようにショートカット：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

は、クロムをシャットダウンし、ショートカットから起動します。

Source: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

Related post: Cross-origin image load denied on a local image with THREE.js on Chrome

ウェブサーバーのないローカルファイルを使用しているとします。

出典

2016-04-05 20:48:33 Snorvarg

crossorigin="anonymous"を画像要素に追加してみてください。たとえば、

<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>

出典

2017-03-11 07:45:23 mmla

キャンバスは原点を越えた​​データの作業で汚染されていた

答えて

関連する問題

キャンバスは原点を越えたデータの作業で汚染されていた