11

ページ上の画像の外観を編集するために、スクリプトを作成 (または編集とハッキング) しています。JavaScript の基本は知っていますが、canvas を見るのはこれが初めてです。だから我慢して

次のエラーが表示されます。

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

エラーをスローする私のコードスニペットは次のとおりです。

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/

しかし、それを自分のニーズに合わせる方法がわかりません..

私はそれがすべてセキュリティとそのすべてのせいであることを知っています-しかし、それをすべて実現するための回避策はありますか?

ありがとう

編集

ちょっと待って..エラーは、getImageData を取得できないためです..「ローカル」にする方法はありますか

4

5 に答える 5

23

CORS を満たすために、dropbox.com のような CORS に適したサイトで画像をホストできます。

image.crossOrigin="anonymous" を指定すると、セキュリティ エラーは発生しません。

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

ここにコードとフィドルがあります: 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-27T21:11:17.710 に答える
2

次のような Windows ショートカットを作成すると、Chrome で動作することがわかりました。

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

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

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

関連記事: Chrome で THREE.js を使用したローカル イメージでクロスオリジン イメージの読み込みが拒否される

Web サーバーなしでローカル ファイルを操作しているとします。

于 2016-04-05T20:48:33.980 に答える