Как исправить ошибку getImageData () Холст был испорчен данными из разных источников?

Мой код очень хорошо работает на моем локальном хосте, но не работает на сайте.

Я получил эту ошибку из консоли для этой строки .getImageData(x,y,1,1).data:

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

часть моего кода:

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;
    }

Примечание: мой URL-адрес изображения (src) взят с URL-адреса поддомена

Как уже говорили другие, вы «заражаете» холст загрузкой из домена перекрестного происхождения.

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

Однако вы можете предотвратить это, просто установив:

img.crossOrigin = "Anonymous";

Это работает, только если удаленный сервер правильно устанавливает следующий заголовок:

Access-Control-Allow-Origin "*"

Выбора файлов Dropbox при использовании опции «прямая ссылка» является прекрасным примером этого. Я использую его на oddprints.com для переноса изображений с URL удаленного изображения Dropbox на свой холст, а затем отправляю данные изображения обратно на мой сервер. Все в javascript

Я обнаружил, что мне пришлось использовать .setAttribute('crossOrigin', '')и мне пришлось добавить метку времени к строке запроса URL-адреса, чтобы избежать ответа 304 без Access-Control-Allow-Originзаголовка.

Это дает мне

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

Вы не сможете рисовать изображения прямо с другого сервера на холсте, а затем использовать getImageData. Это проблема безопасности, и холст будет считаться "испорченным".

Сработает ли для вас сохранить копию изображения на сервере с помощью PHP, а затем просто загрузить новое изображение? Например, вы можете отправить URL-адрес сценария PHP и сохранить его на своем сервере, а затем вернуть новое имя файла в свой javascript следующим образом:

<?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;

?>

Вы бы использовали сценарий PHP с некоторым javascript ajax следующим образом:

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;
  }
}

Если после этого использовать getImageDataна холсте, все будет нормально.

В качестве альтернативы, если вы не хотите сохранять все изображение, вы можете передать координаты x и y в свой PHP-скрипт и вычислить значение rgba пикселя на этой стороне. Я думаю, что есть хорошие библиотеки для такой обработки изображений в PHP.

Если вы хотите использовать этот подход, дайте мне знать, если вам понадобится помощь в его реализации.

edit-1: peeps указали, что скрипт php открыт и позволяет Интернету потенциально использовать его злонамеренно. есть миллион способов справиться с этим, один из самых простых - это своего рода обфускация URL ... я считаю, что безопасные методы php заслуживают отдельного Google; P

edit-2: по многочисленным просьбам я добавил проверку, чтобы убедиться, что это изображение, а не сценарий php (от: Проверка PHP, является ли файл изображением ).

Я видел эту ошибку, Chromeпока тестировал свой код локально. Я переключился на Firefoxи больше не вижу ошибки. Возможно, переход на другой браузер - быстрое решение.

Если вы используете решение, указанное в первом ответе, убедитесь, что вы добавили его img.crossOrigin = "Anonymous";сразу после объявления imgпеременной (например var img = new Image();).

Ваша проблема в том, что вы загружаете внешнее изображение, то есть из другого домена. Это вызывает ошибку безопасности при попытке доступа к каким-либо данным контекста холста.

Вы «заражаете» холст загрузкой из домена перекрестного происхождения. Ознакомьтесь с этой статьей MDN:

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

При работе на локальном добавить сервер

У меня была аналогичная проблема при работе с local. Ваш URL-адрес будет путем к локальному файлу, например file: ///Users/PeterP/Desktop/folder/index.html.

Обратите внимание, что я использую MAC.

Я обошел это, установив http-сервер глобально. https://www.npmjs.com/package/http-server

шаги:

1. Глобальная установка: npm install http-server -g
2. Запускаем сервер: http-server ~/Desktop/folder/

PS: Я предполагаю, что у вас установлен узел, иначе вы не получите очень далеко от команд npm.

Как сказал Мэтт Бернс в своем ответе , вам может потребоваться включить CORS на сервере, на котором размещены проблемные изображения.

Если сервер Apache, это можно сделать, добавив следующий фрагмент ( отсюда ) либо в вашу конфигурацию VirtualHost, либо в .htaccessфайл:

<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>

... при добавлении его в VirtualHost вам, вероятно, потребуется также перезагрузить конфигурацию Apache (например, sudo service apache2 reloadесли Apache работает на сервере Linux)

Моя проблема была настолько запутанной, что я просто закодировал изображение base64, чтобы убедиться, что не может быть никаких проблем с CORS

Сегодня я сталкиваюсь с той же проблемой и решаю ее следующим кодом.

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>

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)
}

код, подобный приведенному выше, и междоменной проблемы нет.

У меня была такая же проблема, и для меня это сработало, просто объединив https:${image.getAttribute('src')}