Разрешения на ресурсы междоменного изображения (изображение с поддержкой CORS)

В документе спецификации HTML вводится атрибут crossorigin для изображений. Установив соответствующую информацию заголовка CORS, изображения img можно загружать с других сайтов и использовать в холсте так же, как если бы они были загружены непосредственно с текущего сайта (текущий источник).

Подробную информацию об использовании атрибутов перекрестного происхождения см. в разделе атрибуты настроек CORS.

Хотя изображения на холсте можно использовать без авторизации CORS, это испортит холст. Пока холст загрязнен, данные больше не могут быть извлечены из холста, а это означает, что такие методы, как toBlob(), toDataURL() и getImageData(), нельзя вызвать, иначе будет выдана ошибка безопасности.

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

(Примечание переводчика: если пользователь вошел на сайты социальных сетей, таких как QQ, и если не предусмотрена защита, веб-сайт может использовать Canvas для получения и загрузки информации об изображении пользователя после открытия веб-сайта, что приводит к утечке информации.)

Сначала сервер изображений должен установить соответствующий заголовок ответа Access-Control-Allow-Origin . Добавьте атрибут crossOrigin элемента img в заголовок запроса. Например, сервер Apache может скопировать информацию о конфигурации из конфигураций сервера Apache HTML5 Boilerplate, чтобы ответить:

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origin: набор заголовков IS_CORS Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

После того как эти настройки вступят в силу, вы сможете сохранять изображения с других сайтов в хранилище DOM (или другие места) так же, как и ресурсы этого сайта.

 var img = новое изображение, холст = document.createElement(canvas), ctx = Canvas.getContext(2d), src = http://example.com/image; // Конкретный адрес изображения img.crossOrigin = Anonymous;img. = функция () { холст.ширина = img.width; холст.высота = img.height; ctx.drawImage(img, 0, 0 ); localStorage.setItem( saveImageData, Canvas.toDataURL(image/png) );}img.src = src;// Убедитесь, что кэшированное изображение также запускает событие загрузки, если ( img.complete || img.complete == = не определено ) { img.src = data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw== img.src = src;}

Совместимость с браузером

Рабочий стол

мобильный

См. также

Chrome: использование изображений из разных источников в WebGL

Атрибут HTML-спецификации-crossorigin

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