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

Question

Как исправить ошибку 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) взят из субдомена.

189

javascript html html5 html5-canvas

Источник

user1604095 28 фев '14 в 14:22

14 ответов

Другие вопросы по тегам javascript html html5 html5-canvas

user276093 08 янв '15 в 12:23 2015-01-08 12:23 · Answer 1 · 2015-01-08 12:23

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

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

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

img.crossOrigin = "Anonymous";

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

Access-Control-Allow-Origin "*"

Отличным примером этого является средство выбора файлов Dropbox при использовании параметра "прямая ссылка". Я использую его на http://www.oddprints.com/ для перемещения изображений из URL- адреса удаленного изображения в Dropbox на свой холст, а затем отправляю данные изображений обратно на мой сервер. Все в яваскрипте:)

user266531 14 окт '15 в 21:21 2015-10-14 21:21 · Answer 2 · 2015-10-14 21:21

Я обнаружил, что мне пришлось использовать .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', '');

user3479674 23 апр '14 в 05:36 2014-04-23 05:36 · Answer 3 · 2014-04-23 05:36

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

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

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

  $url=$_GET['url'];
  $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.

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

user1908112 05 сен '18 в 17:00 2018-09-05 17:00 · Answer 4 · 2018-09-05 17:00

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

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

Обратите внимание, что я нахожусь на MAC.

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

шаги:

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

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

user3388652 29 июл '20 в 04:31 2020-07-29 04:31 · Answer 5 · 2020-07-29 04:31

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

6

Источник

user3388652 29 июл '20 в 04:31

user3766568 13 мар '19 в 07:15 2019-03-13 07:15 · Answer 6 · 2019-03-13 07:15

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

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

user8919391 20 июн '22 в 04:59 2022-06-20 04:59 · Answer 7 · 2022-06-20 04:59

УстановитьImageхcrossOriginприписыватьAnonymous.

        let image = new Image();
  // image.src = ...;
  image.crossOrigin = `Anonymous`;

3

Источник

user8919391 20 июн '22 в 04:59

user2389720 28 фев '14 в 14:30 2014-02-28 14:30 · Answer 8 · 2014-02-28 14:30

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

2

Источник

user2389720 28 фев '14 в 14:30

user1396172 28 фев '14 в 14:39 2014-02-28 14:39 · Answer 9 · 2014-02-28 14:39

Вы "портите" холст, загружая его из домена перекрестного происхождения. Проверьте эту статью MDN:

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

2

Источник

user1396172 28 фев '14 в 14:39

user14164111 16 апр '21 в 10:08 2021-04-16 10:08 · Answer 10 · 2021-04-16 10:08

обходное решение, преобразовать URL-адрес исходного изображения в данные Base64 и назначить img

например, используйте Axios

      const getBase64 = async(url)=>{
      try {
        let image = await axios.get(url, { responseType: 'arraybuffer' });
        let raw = Buffer.from(image.data).toString('base64');
        return "data:" + image.headers["content-type"] + ";base64,"+raw;
      } catch (error) {
          console.log(error)
      } 
}

var image = new Image()

image.src=getBase64(url)

нет перекрестной зависимости от холста

user180500 15 июн '16 в 15:26 2016-06-15 15:26 · Answer 11 · 2016-06-15 15:26

Как говорит Мэтт Бернс в своем ответе, вам может потребоваться включить 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)

23 мар '21 в 21:29 2021-03-23 21:29 · Answer 12 · 2021-03-23 21:29

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

[https://www.base64-image.de/[1], чтобы преобразовать изображение в строку данных. Преобразуйте и скопируйте строковые данные с указанного выше веб-сайта. установите image.src = <copied_data_string>.

user7760195 15 июн '17 в 09:22 2017-06-15 09:22 · Answer 13 · 2017-06-15 09:22

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

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

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

user8454914 04 сен '18 в 12:41 2018-09-04 12:41 · Answer 14 · 2018-09-04 12:41

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

-3

Источник

user8454914 04 сен '18 в 12:41