Холст, испорченный изображениями CORS

У меня проблемы с использованием изображений с поддержкой CORS с canvas (Pixastic).

На сервере у меня есть

Header set Access-Control-Allow-Origin "*"

в моем файле htaccess.

На стороне клиента я попытался установить атрибут crossorigin в HTML, например, так:

<img src="http://myseconddomain/image.jpg" crossorigin="anonymous" />

безуспешно. После этого я попробовал в коде Pixastic:

var el = elements[i];
el.crossOrigin = 'anonymous';

Тоже не работает.

Я также отключил кэш Chrome, но это не помогает.

Chrome регистрирует:

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

даже если HTML выглядит нормально (crossorigin атрибут установлен), заголовки изображений выглядят нормально (Access-Control-Allow-Origin)... я не знаю, что попробовать дальше, поэтому любые советы приветствуются!

К сожалению, я не могу предоставить какую-либо ссылку, так как это приложение далеко от производства, как вы можете догадаться.

1 ответ

Решение

Я нашел способ, я опубликую его здесь, надеюсь, он когда-нибудь кому-нибудь поможет.

Случилось так, что я не испортил правильную функцию в коде Pixastic, так как функция init() вызывается не всегда, как я сначала подумал.

Я добавил следующую строку в функцию Pixastic.process():

dataImg.crossOrigin = "anonymous";

И это сработало.

Другие вопросы по тегам