HTML5 Canvas kiểm soát truy cập-Allow-Origin lỗi

Question

Tôi nhận được lỗi javascript sau khi tôi cố gắng để có được dữ liệu từ một yếu tố canvas:

Error: canvas.toDataURL() not supported. [Exception... "The operation is insecure." code: "18" nsresult: "0x80530012 (SecurityError)"...

Các canvas được rút ra từ một hình ảnh phục vụ từ một khác nhau tên miền, nhưng tôi đang sử dụng proxy để thêm 2 dòng này vào tiêu đề phản hồi hình ảnh:

access-control-allow-origin: *

access-control-allow-credentials: true

Tôi đang thiếu gì?

Cảm ơn,
Ted

Answer 1

Để thực hiện một yêu cầu CORS thích hợp, bạn phải thiết lập để "Anonymous" của cross origin property hình ảnh. This example là từ Mạng nhà phát triển Mozilla.

var img = new Image, 
    canvas = document.createElement("canvas"), 
    ctx = canvas.getContext("2d"), 
    src = "http://example.com/image"; // insert image url here 

img.crossOrigin = "Anonymous"; 

img.onload = function() { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 
    localStorage.setItem("savedImageData", canvas.toDataURL("image/png")); 
} 
img.src = src; 
// make sure the load event fires for cached images too 
if (img.complete || img.complete === undefined) { 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
    img.src = src; 
} 

Hỗ trợ trình duyệt loại trừ mọi phiên bản đã biết của IE và các phiên bản Safari chưa được phát hành. Firefox và Chrome có nhiều năm hỗ trợ.