Холст, испорченный изображениями 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";
И это сработало.