Không thể lấy dữ liệu hình ảnh từ canvas vì canvas đã bị nhiễm độc bởi dữ liệu gốc xuất xứ

Question

Tôi đang sử dụng html5 Canvas để lấy màu từ hình ảnh. Đối với điều này tôi đã viết đoạn code sau trong javascript:

http://jsfiddle.net/8dQSS/1/ (Xin vui lòng kiểm tra giao diện điều khiển để xem ngoại lệ)

function getImageColor() { 
    var colors = []; 
    var image = new Image(); 

    image.onload = function() { 
     var canvas = document.createElement("canvas"); 
     canvas.width = image.width; 
     canvas.height = image.height; 

     // Draw the image in canvas 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(image, 0, 0); 

     // Get the pixel data 
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 

     // Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha 
     for (var x = 0; x < imageData.width; x++) { 
      for (var y = 0; y < imageData.height; y++) { 
       var index = 4 * (y * imageData.width + x); 
       var r = imageData.data[index]; 
       var g = imageData.data[index + 1]; 
       var b = imageData.data[index + 2]; 
       var a = imageData.data[index + 3]; 

       colors.push("rgb(" + r + "," + g + "," + b + ")"); 
      } 
     } 
    }; 
    image.src = "http://www.xxxxxxxxxxxx.com/demos/assets/image.jpg"; 
} 

Đoạn mã trên được ném ngoại lệ sau đây:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 
Uncaught Error: SECURITY_ERR: DOM Exception 18 

thể ai xin vui lòng cho tôi biết làm thế nào để giải quyết vấn đề này?

Answer 1

Giải pháp duy nhất tôi biết là có hình ảnh bạn muốn tải được lưu trữ trên cùng một máy chủ như tệp của bạn, bạn không thể truy cập và xử lý bất kỳ hình ảnh nào bạn muốn trên web thông qua canvas của bạn.

EDIT: Nếu bạn muốn, bạn có thể làm like this.

Answer 2

Bạn đang sử dụng điều này thông qua hệ thống tệp.? Nếu có thì hãy chạy nó trên máy chủ (localhost).

Answer 3

Tôi gặp lỗi này. Tôi đã tìm kiếm rất nhiều về crossorigin trên canvas. Giải pháp đầu tiên là thêm img.crossOrigin='anonymous'. Nhưng vấn đề vẫn còn. Tôi đã sử dụng tài sản được phân phối bởi s3 và đã khắc phục sự cố khi thêm tài khoản này vào chính sách nhóm.

{ 
    "Version": "2008-10-17", 
    "Statement": [ 
    { 
     "Sid": "AllowPublicRead", 
     "Effect": "Allow", 
     "Principal": { 
     "AWS": "*" 
     }, 
     "Action": "s3:GetObject", 
     "Resource": "arn:aws:s3:::seu-candidato/*" 
    } 
    ] 
} 

Tài sản từ xô đã có một số params như X-Amz-Expires, X-Amz-Date tôi gỡ bỏ chúng và ws vấn đề của tôi cố định