Tại sao canvas.toDataURL() ném một ngoại lệ bảo mật?

Question

Tôi không ngủ đủ giấc hay sao? Mã này sau

var frame=document.getElementById("viewer"); 
frame.width=100; 
frame.height=100; 

var ctx=frame.getContext("2d"); 
var img=new Image(); 
img.src="http://www.ansearch.com/images/interface/item/small/image.png" 

img.onload=function() { 
    // draw image 
    ctx.drawImage(img, 0, 0) 

    // Here's where the error happens: 
    window.open(frame.toDataURL("image/png")); 
} 

được ném lỗi này:

SECURITY_ERR: DOM Exception 18 

Không có cách nào điều này không nên làm việc! Bất cứ ai có thể giải thích điều này, xin vui lòng?

Answer 1

Trong specs nó nói:

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

Nếu hình ảnh đến từ máy chủ khác tôi không nghĩ rằng bạn có thể sử dụng toDataURL()

Answer 2

Bạn không thể đặt dấu cách trong ID của bạn

Cập nhật

Tôi đoán là hình ảnh đó là trên một máy chủ khác với nơi bạn đang thực hiện kịch bản. Tôi đã có thể sao chép lỗi của bạn khi chạy nó trên trang của riêng tôi, nhưng nó làm việc tốt thời điểm tôi đã sử dụng một hình ảnh được lưu trữ trên cùng một tên miền. Vì vậy, nó liên quan đến an ninh - đưa hình ảnh trên trang web của bạn. Bất cứ ai biết tại sao đây là trường hợp?

Answer 3

Có vẻ có một cách để ngăn chặn điều đó nếu hình ảnh lưu trữ có thể cung cấp các tiêu đề HTTP sau cho các nguồn tài nguyên hình ảnh và trình duyệt hỗ trợ CORS:

access-control-allow-origin: * 
access-control-allow-credentials: true

Đó là tuyên bố ở đây: http://www.w3.org/TR/cors/#use-cases

Answer 4

Nếu hình ảnh được lưu trữ trên một máy chủ đặt Access-Control-Allow-Origin hoặc Access-Control-Allow-Credentials, bạn có thể sử dụng Cross Origin Resource Sharing (CORS). See here (the crossorigin attribute) for more details.

Tùy chọn khác của bạn là để máy chủ của bạn có điểm cuối tìm nạp và phục vụ hình ảnh. (ví dụ: http://your_host/endpoint?url=URL) Nhược điểm của phương pháp đó là thời gian chờ và tìm nạp không cần thiết về mặt lý thuyết.

Nếu có nhiều giải pháp thay thế, tôi muốn được nghe về chúng.

Answer 5

Thiết thuộc tính gốc chéo trên các đối tượng hình ảnh làm việc cho tôi (tôi đã sử dụng fabricjs)

var c = document.createElement("img"); 
    c.onload=function(){ 
     // add the image to canvas or whatnot 
     c=c.onload=null 
    }; 
    c.setAttribute('crossOrigin','anonymous'); 
    c.src='http://google.com/cat.png'; 

Đối với những người sử dụng fabricjs, dưới đây là cách để vá Image.fromUrl

// patch fabric for cross domain image jazz 
fabric.Image.fromURL=function(d,f,e){ 
    var c=fabric.document.createElement("img"); 
    c.onload=function(){ 
     if(f){f(new fabric.Image(c,e))} 
     c=c.onload=null 
    }; 
    c.setAttribute('crossOrigin','anonymous'); 
    c.src=d; 
}; 

Answer 6

tôi đã có cùng một vấn đề và tất cả các hình ảnh được lưu trữ trong cùng một tên miền ... Vì vậy, nếu ai đó có cùng một vấn đề, dưới đây là cách tôi đã giải quyết:

Tôi có hai nút: một để tạo canvas và một ảnh khác để tạo hình ảnh từ canvas. Nó chỉ làm việc cho tôi, và xin lỗi vì tôi không biết tại sao, khi tôi viết tất cả các mã trên nút đầu tiên. Vì vậy, khi tôi nhấp vào nó sẽ tạo canvas và hình ảnh cùng một lúc ...

Tôi luôn gặp sự cố bảo mật này khi mã ở các chức năng khác nhau ...=/

Answer 7

Nếu bạn chỉ vẽ một số hình ảnh trên canvas, hãy đảm bảo bạn đang tải hình ảnh từ cùng một tên miền.

www.example.com là khác nhau để example.com

Vì vậy, hãy chắc chắn hình ảnh của bạn và các url mà bạn có trong thanh địa chỉ của bạn đều giống nhau, www hay không.

Answer 8

tôi đã có thể làm cho nó hoạt sử dụng này:

Viết này trên dòng đầu tiên của .htaccess của bạn trên máy chủ nguồn của bạn

Header add Access-Control-Allow-Origin "*" 

Sau đó, khi tạo một yếu tố <img>, làm điều đó như sau:

// jQuery 
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0] 

// or pure 
var img = document.createElement('img'); 
img.src='http://your_server/img.png'; 
img.setAttribute('crossOrigin','anonymous'); 

Answer 9

Cuối cùng tôi đã tìm ra giải pháp. Chỉ cần thêm crossOrigin như param thứ ba trong fromURL func

fabric.Image.fromURL(imageUrl, function (image) { 
      //your logic 
    }, { crossOrigin: "Anonymous" }); 

Answer 10

Tôi đang sử dụng fabric.js và có thể giải quyết điều này bằng cách sử dụng toDatalessJSON thay vì toDataURL:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src 

Edit: Nevermind. Điều này dẫn đến hình ảnh nền chỉ được xuất sang JPG, mà không có bản vẽ ở phía trên để nó không hoàn toàn hữu ích sau khi tất cả.