Dữ liệu gốc có nguồn gốc trong canvas HTML5

Question

Tôi đang tải một hình ảnh theo js và vẽ nó vào khung vẽ. Sau khi vẽ, tôi lấy imageData từ vải:

var img = new Image(); 
img.onload = function() { 
    canvas.drawImage(img, 0, 0); 
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails 
} 
img.src = 'picture.jpeg'; 

này hoạt động hoàn hảo cả trong Safari và Firefox, nhưng thất bại trong Chrome với thông báo sau:

Không thể để có được dữ liệu hình ảnh từ vải vì canvas đã bị nhiễm độc bởi dữ liệu gốc.

Tệp javascript và hình ảnh nằm trong cùng một thư mục, vì vậy tôi không hiểu hành vi của chorme.

Answer 1

Để kích hoạt CORS (Cross-Origin Resource Sharing) cho hình ảnh của bạn vượt qua các tiêu đề HTTP với phản ứng hình ảnh:

Access-Control-Allow-Origin: * 

Nguồn gốc được xác định bởi tên miền và giao thức (ví dụ http và https không giống nhau) của trang web chứ không phải vị trí của tập lệnh.

Nếu bạn đang chạy cục bộ bằng cách sử dụng tệp: // thì điều này thường được xem là sự cố tên miền chéo; vì vậy nó tốt hơn để đi qua

http://localhost/ 

Answer 2

var img = new Image(); 
img.onload = function() { 
    canvas.drawImage(img, 0, 0); 
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail 
} 
img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example 
img.src = 'picture.jpeg'; 

Hope this helps

Answer 3

Để giải quyết vấn đề miền chéo với file: //, bạn có thể bắt đầu chrome với tham số

--allow-file-access-from-files 

Answer 4

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
var img = new Image(); 
img.crossOrigin = "anonymous"; 
img.onload = function() { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 
    originalImageData = ctx.canvas.toDataURL(); 
} 
img.src = 'picture.jpeg'; 

hy vọng điều này sẽ hữu ích.

Answer 5

Nếu tiêu đề phản hồi của máy chủ chứa Access-Control-Allow-Origin: *, thì bạn có thể sửa nó từ phía máy khách: Thêm thuộc tính vào hình ảnh hoặc video.

<img src="..." crossorigin="Anonymous" /> 
 
<video src="..." crossorigin="Anonymous"></video>

Nếu không, bạn phải sử dụng phía máy chủ proxy.