context.getImageData() hoạt động không an toàn

Question

Tôi muốn nhận ra bộ lọc thang độ xám đơn giản cho canvas HTML5, nhưng tôi không thể lấy dữ liệu Hình ảnh làm pixel. Tôi nhận được cảnh báo bảo mật từ FF và Chrome. Cuối cùng, bộ lọc không làm cho hình ảnh có màu xám.

JS FIDLE CODE

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; 
} 

Answer 1

Đây là một tính năng bảo mật. Từ W3:

Phương pháp getImageData(sx, sy, sw, sh) phải, nếu lá cờ có nguồn gốc sạch các yếu tố canvas được đặt sai, ném một ngoại lệ SecurityError

này là để ngăn chặn các chủ sở hữu trang web độc hại từ tải hình ảnh có khả năng tin rằng trình duyệt của người dùng có quyền truy cập vào canvas, sau đó gửi dữ liệu đến máy chủ của riêng họ. Nguồn gốc sạch có thể được tắt nếu:

• phương pháp drawImage() của phần tử 2D bối cảnh được gọi với một HTMLImageElement hoặc một HTMLVideoElement có nguồn gốc không phải là cùng một như của đối tượng Document sở hữu phần tử canvas.

• Phương thức drawImage() của bối cảnh 2D của phần tử được gọi với HTMLCanvasElement có cờ sạch gốc là sai.

• fillstyle thuộc tính của phần tử 2D bối cảnh được thiết lập để một đối tượng CanvasPattern được tạo ra từ một HTMLImageElement hoặc một HTMLVideoElement có nguồn gốc không phải là giống như của các tài liệu đối tượng sở hữu các yếu tố canvas khi mô hình được tạo ra .

• Thuộc tính fillStyle của bối cảnh 2D của phần tử được đặt thành đối tượng CanvasPattern được tạo từ HTMLCanvasElement có cờ nguồn gốc sạch sẽ sai khi tạo mẫu.

• strokeStyle thuộc tính của phần tử 2D bối cảnh được thiết lập để một đối tượng CanvasPattern được tạo ra từ một HTMLImageElement hoặc một HTMLVideoElement có nguồn gốc không phải là giống như của các tài liệu đối tượng sở hữu các yếu tố canvas khi mô hình được tạo ra .

• Thuộc tính strokeStyle của bối cảnh 2D của phần tử được đặt thành đối tượng CanvasPattern được tạo từ HTMLCanvasElement có cờ nguồn gốc sạch sẽ sai khi tạo mẫu.

• Phương thức fillText() hoặc strokeText() của bối cảnh 2D của phần tử được gọi và kết thúc bằng cách sử dụng phông chữ có nguồn gốc không phải là giống như đối tượng Document sở hữu phần tử canvas.

Source