HTML5 Canvas getImageData và Chính sách gốc tương tự

Question

Tôi có một trang web đang chạy tại pixie.strd6.com và hình ảnh được lưu trữ thông qua Amazon S3 bằng CNAME cho images.pixie.strd6.com.

Tôi muốn để có thể rút ra những hình ảnh này đến một canvas HTML5 và gọi phương thức getImageData nhưng nó ném Error: SECURITY_ERR: DOM Exception 18

Tôi đã cố gắng thiết lập window.domain = "pixie.strd6.com", nhưng điều đó không có tác dụng.

Bên cạnh đó, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) cũng ném một lỗi: XMLHttpRequest cannot load http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982 . Origin http://pixie.strd6.com is not allowed by Access-Control-Allow-Origin.

Lý tưởng nhất là HTML5 canvas sẽ không chặn gọi getImageData từ tên miền phụ. Tôi đã xem xét thiết lập một tiêu đề Access-Control-Allow-Origin trong S3, nhưng chưa thành công.

Bất kỳ trợ giúp hoặc cách giải quyết nào đều được đánh giá cao.

Answer 1

Amazon recently announced CORS support

We're delighted to announce support for Cross-Origin Resource Sharing (CORS) in Amazon S3. You can now easily build web applications that use JavaScript and HTML5 to interact with resources in Amazon S3, enabling you to implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content. Until now, you needed to run a custom proxy server between your web application and Amazon S3 to support these capabilities.

How to enable CORS

To configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket.

Answer 2

Hành vi này là theo thiết kế. Theo thông số HTML5, ngay khi bạn vẽ hình ảnh có nguồn gốc chéo tới canvas, nó sẽ bị bẩn và bạn không thể đọc được pixel nữa. So khớp gốc so sánh lược đồ, máy chủ đủ điều kiện và trong các trình duyệt không phải của IE, cổng.

Answer 3

Một giải pháp có thể là sử dụng nginx để hoạt động như một proxy. Dưới đây là cách định cấu hình url sẽ truy cập http://pixie.strd6.com/s3/ để chuyển qua S3, nhưng trình duyệt vẫn có thể tin rằng đó là miền không phải là chéo.

location /s3/ { 
    proxy_pass http://images.pixie.strd6.com/; 
} 

Answer 4

Gần đây, tôi đã xem qua $.getImageData, bởi Max Novakovic. Trang này bao gồm một vài bản demo gọn gàng về tìm nạp và hoạt động trên ảnh Flickr, cùng với một số ví dụ về mã.

Tính năng này cho phép bạn tìm nạp hình ảnh ở dạng có thể điều chỉnh JavaScript từ một trang web tùy ý. Nó hoạt động bằng cách thêm một kịch bản vào trang. Tập lệnh sau đó yêu cầu hình ảnh từ máy chủ Google App Engine. Máy chủ tìm nạp hình ảnh được yêu cầu và chuyển nó thành chuyển đổi thành base64 thành tập lệnh. Khi kịch bản nhận base64, nó chuyển dữ liệu đến một cuộc gọi lại, sau đó có thể vẽ nó vào một khung vẽ và bắt đầu rối tung lên nó.

Answer 5

Chỉ gặp sự cố tương tự. Tôi đã tìm hiểu về CORS có thể hữu ích.

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#14

Nó không làm việc cho tôi kể từ khi tôi đang cố gắng để thao tác hình ảnh từ Flickr. Vì vậy, tôi vẫn đang tìm giải pháp.

Answer 6

Trong quá khứ, Amazon S3 không cho phép bạn sửa đổi hoặc thêm các tiêu đề HTTP cho phép truy cập-kiểm soát-cho phép và truy cập-điều khiển-cho phép chứng thực để có thể chuyển sang một dịch vụ khác như Rackspace Cloud Files hoặc một số dịch vụ khác.

Thêm hoặc sửa đổi các tiêu đề HTTP như thế này:

access-control-allow-origin: [your site] 
access-control-allow-credentials: true 

Xem http://www.w3.org/TR/cors/#use-cases để biết thêm thông tin.

Sử dụng dịch vụ cho phép bạn sửa đổi tiêu đề HTTP hoàn toàn giải quyết cùng một vấn đề gốc.

Answer 7

Nếu bạn đang sử dụng PHP, bạn có thể làm một cái gì đó như:

function fileExists($path){ 
     return (@fopen($path,"r")==true); 
    } 
    $ext = explode('.','https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg'); 
    if(fileExists('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg')){ 
     $contents = file_get_contents('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg'); 
     header('Content-type: image/'.end($ext)); 
     echo $contents; 
    } 

Và truy cập hình ảnh bằng cách sử dụng tập tin php, như thế nào nếu các tập tin được gọi là generateImage.php bạn có thể làm <img src="http://GENERATEPHPLOCATION/generateImage.php"/> và hình ảnh bên ngoài url có thể là một tham số get cho các tập tin

Answer 8

Đối với những người không sử dụng S3 có thể cố gắng xây dựng một proxy hình ảnh mã hóa tệp hình ảnh và gói nó vào một đối tượng JSON.

Sau đó, bạn có thể sử dụng JSONP hỗ trợ tên miền chéo để tìm nạp đối tượng JSON và gán dữ liệu hình ảnh cho img.src.

Tôi đã viết mã mẫu của máy chủ proxy hình ảnh với Google App Engine. https://github.com/flyakite/gae-image-proxy

Lợi nhuận đối tượng JSON trong các định dạng như thế này

{ 
    'height': 50, 
    'width' : 50, 
    'data' : 'data:image/jpeg;base64,QWRarjgk4546asd...QWAsdf' 
} 

Các 'dữ liệu' là dữ liệu hình ảnh ở định dạng base64. Gán nó cho một hình ảnh.

img.src = result.data; 

Hình ảnh bây giờ "sạch" cho canvas của bạn.

Answer 9

Để chỉnh sửa quyền xô S3 của bạn:

1) Đăng nhập vào Management Console AWS và mở Amazon S3 console tại https://console.aws.amazon.com/s3/

2) Trong danh sách Xô, mở thùng mà các thuộc tính bạn muốn để xem và nhấp vào "thêm cấu hình CORS"

3) Viết các quy tắc bạn sẵn sàng để thêm vào giữa các thẻ <CORSConfiguration>

<CORSConfiguration> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Bạn có thể tìm hiểu thêm về quy tắc tại địa chỉ: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) Xác định crossorigin = 'vô danh' trên hình ảnh mà bạn sẽ sử dụng trong canvas của bạn