16

HTML5 キャンバスの単純なグレースケール フィルターを実現したいのですが、画像データをピクセルとして取得できません。FF と Chrome からセキュリティ警告が表示されます。最後に、フィルターは画像を灰色にしません。

JS FIDLE コード

js:

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

var image = new Image();
image.onload = function () {
  if (image.width != canvas.width)
    canvas.width = image.width;
  if (image.height != canvas.height)
    canvas.height = image.height;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg";

function filter(imageData){
 var d = imageData.data;
   for (var i = 0; i < d.length; i += 4) {
     var r = d[i];
     var g = d[i + 1];
     var b = d[i + 2];
     d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
   }
return imageData;
}
4

2 に答える 2

11

これはセキュリティ機能です。W3から:

canvas 要素のgetImageData(sx, sy, sw, sh)origin-clean フラグが false に設定されている場合、メソッドはSecurityError例外をスローする必要があります。

これは、悪意のあるサイト所有者が、ユーザーのブラウザがアクセスできるプライベートな可能性のある画像をキャンバスにロードし、データを自分のサーバーに送信するのを防ぐためです。次の場合、origin-clean をオフにすることができます。

  • エレメントの 2D コンテキストの drawImage() メソッドが、canvas エレメントを所有する Document オブジェクトとは異なるオリジンを持つ HTMLImageElement または HTMLVideoElement で呼び出されます。

  • 要素の 2D コンテキストの drawImage() メソッドは、origin-clean フラグが false の HTMLCanvasElement で呼び出されます。

  • 要素の 2D コンテキストの fillStyle 属性が、HTMLImageElement または HTMLVideoElement から作成された CanvasPattern オブジェクトに設定されます。このオブジェクトの起源は、パターンの作成時に canvas 要素を所有する Document オブジェクトの起源とは異なります。

  • 要素の 2D コンテキストの fillStyle 属性は、パターンの作成時に origin-clean フラグが false であった HTMLCanvasElement から作成された CanvasPattern オブジェクトに設定されます。

  • 要素の 2D コンテキストの strokeStyle 属性は、HTMLImageElement または HTMLVideoElement から作成された CanvasPattern オブジェクトに設定されます。このオブジェクトの起源は、パターンが作成されたときに canvas 要素を所有する Document オブジェクトの起源とは異なります。

  • 要素の 2D コンテキストの strokeStyle 属性は、パターンの作成時に origin-clean フラグが false であった HTMLCanvasElement から作成された CanvasPattern オブジェクトに設定されます。

  • 要素の 2D コンテキストの fillText() または strokeText() メソッドが呼び出され、canvas 要素を所有する Document オブジェクトのオリジンとは異なるオリジンを持つフォントが使用されます。

ソース

于 2013-06-11T01:12:11.837 に答える