Làm cách nào để sửa lỗi getImageData () Canvas đã bị làm hỏng bởi dữ liệu có nguồn gốc chéo?

Mã của tôi đang hoạt động rất tốt trên localhost của tôi nhưng nó không hoạt động trên trang web.

Tôi đã gặp lỗi này từ bảng điều khiển, cho dòng này .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

một phần mã của tôi:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

Lưu ý: url hình ảnh của tôi (src) là từ url tên miền phụ

Như những người khác đã nói bạn đang "làm mờ" khung vẽ bằng cách tải từ một miền có nguồn gốc chéo.

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enables_Image

Tuy nhiên, bạn có thể ngăn điều này bằng cách cài đặt đơn giản:

img.crossOrigin = "Anonymous";

Điều này chỉ hoạt động nếu máy chủ từ xa thiết lập tiêu đề sau một cách thích hợp:

Access-Control-Allow-Origin "*"

Trình chọn tệp Dropbox khi sử dụng tùy chọn "liên kết trực tiếp" là một ví dụ tuyệt vời về điều này. Tôi sử dụng nó trên lẻprints.com để thu thập hình ảnh từ url hình ảnh hộp thư từ xa, vào khung vẽ của tôi và sau đó gửi dữ liệu hình ảnh trở lại máy chủ của tôi. Tất cả trong javascript

Tôi thấy rằng tôi phải sử dụng .setAttribute('crossOrigin', '')và phải thêm dấu thời gian vào chuỗi truy vấn của URL để tránh phản hồi 304 thiếu Access-Control-Allow-Origintiêu đề.

Cái này cho tôi

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

Bạn sẽ không thể vẽ hình ảnh trực tiếp từ một máy chủ khác vào một khung vẽ và sau đó sử dụng getImageData. Đây là một vấn đề bảo mật và khung vẽ sẽ được coi là "vô vị".

Bạn có thể lưu một bản sao của hình ảnh vào máy chủ của mình bằng PHP và sau đó chỉ cần tải hình ảnh mới không? Ví dụ: bạn có thể gửi URL tới tập lệnh PHP và lưu nó vào máy chủ của bạn, sau đó trả lại tên tệp mới cho javascript của bạn như thế này:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

Bạn sẽ sử dụng tập lệnh PHP với một số javascript ajax như thế này:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

Nếu bạn sử dụng getImageDatatrên khung vẽ sau đó, nó sẽ hoạt động tốt.

Ngoài ra, nếu bạn không muốn lưu toàn bộ hình ảnh, bạn có thể chuyển tọa độ x & y cho tập lệnh PHP của mình và tính giá trị rgba của pixel ở bên đó. Tôi nghĩ rằng có những thư viện tốt để thực hiện kiểu xử lý ảnh đó trong PHP.

Nếu bạn muốn sử dụng phương pháp này, hãy cho tôi biết nếu bạn cần trợ giúp thực hiện nó.

chỉnh sửa-1: peeps chỉ ra rằng tập lệnh php bị lộ và cho phép internet có khả năng sử dụng nó một cách độc hại. có một triệu cách để xử lý việc này, một trong những cách đơn giản nhất là một số cách xáo trộn URL ... tôi nghĩ rằng các thực hành php an toàn xứng đáng có một google riêng; P

chỉnh sửa-2: theo yêu cầu phổ biến, tôi đã thêm một kiểm tra để đảm bảo đó là hình ảnh chứ không phải tập lệnh php (từ: PHP kiểm tra xem tệp có phải là hình ảnh không ).

Tôi đã nhìn thấy lỗi này trên Chrometrong khi tôi đã được thử nghiệm mã của tôi tại địa phương. Tôi chuyển sang Firefoxvà tôi không thấy lỗi nữa. Có lẽ chuyển sang trình duyệt khác là một sửa chữa nhanh chóng.

Nếu bạn đang sử dụng giải pháp được đưa ra trong câu trả lời đầu tiên, thì hãy đảm bảo bạn thêm img.crossOrigin = "Anonymous";ngay sau khi bạn khai báo imgbiến (ví dụ var img = new Image();:).

Vấn đề của bạn là bạn tải một hình ảnh bên ngoài, có nghĩa là từ một tên miền khác. Điều này gây ra lỗi bảo mật khi bạn cố gắng truy cập bất kỳ dữ liệu nào trong bối cảnh canvas của bạn.

Bạn đang "làm mờ" khung vẽ bằng cách tải từ một miền có nguồn gốc chéo. Kiểm tra bài viết MDN này:

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enables_Image

Khi làm việc trên máy chủ, hãy thêm máy chủ

Tôi đã có một vấn đề tương tự khi làm việc trên địa phương. Url của bạn sẽ là đường dẫn đến tệp cục bộ, ví dụ: tệp: ///Users/PeterP/Desktop/folder/index.html.

Xin lưu ý rằng tôi đang dùng MAC.

Tôi đã làm tròn điều này bằng cách cài đặt máy chủ http trên toàn cầu. https://www.npmjs.com/package/http-server

Các bước:

1. Cài đặt toàn cầu: npm install http-server -g
2. Chạy máy chủ: http-server ~/Desktop/folder/

PS: Tôi giả sử bạn đã cài đặt nút, nếu không bạn sẽ không nhận được các lệnh npm chạy rất xa.

Như matt burn nói trong câu trả lời của anh ấy , bạn có thể cần bật CORS trên máy chủ nơi lưu trữ hình ảnh sự cố.

Nếu máy chủ là Apache, điều này có thể được thực hiện bằng cách thêm đoạn mã sau (từ đây ) vào cấu hình Virtualhost của bạn hoặc một .htaccesstệp:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

... Nếu thêm nó vào Virtualhost, có lẽ bạn cũng cần phải tải lại cấu hình của Apache (ví dụ: sudo service apache2 reloadnếu Apache đang chạy trên máy chủ Linux)

Vấn đề của tôi đã rất rắc rối. Tôi chỉ cần mã hóa 64 hình ảnh để đảm bảo không có bất kỳ vấn đề nào về CORS

Tôi gặp vấn đề tương tự ngày hôm nay, và giải quyết nó bằng mã sau đây.

Mã HTML:

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

mã js:

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

mã như trên, và không có vấn đề tên miền chéo.

Tôi đã có cùng một vấn đề, và đối với tôi nó hoạt động bằng cách đơn giản là ghép https:${image.getAttribute('src')}