Как разрешить перекрестное использование изображений и холста?
В этой статье мы увидим, как разрешить использование перекрестного происхождения для изображений и холста, то есть использование изображений и холста с иностранного веб-сайта. Для выполнения этой задачи изображения с других веб-сайтов можно использовать в нашем HTML-документе, просто внедрив тег <img> и назначив URL-адрес атрибуту src . Хотя, скорее всего, в большинстве случаев мы можем получить ошибку CORS (Cross-Origin Resource Sharing). Это делается в целях безопасности, из-за чего мы не можем использовать эти изображения напрямую, и нам может потребоваться отправить запрос с учетными данными, такими как файлы cookie, или без них. Для этого будет использоваться атрибут crossorigin , который описывает обработку запросов между источниками элементом, тем самым обеспечивая настройку запросов CORS для извлеченных данных элемента. Другими словами, атрибут crossorigin устанавливает режим учетных данных при отправке запроса HTTP CORS, но он работает только с хостингом веб-сайта, имеющим HTTP-заголовок Access-Control-Allow-Origin.
Синтаксис : используйте приведенный ниже синтаксис для использования атрибута crossorigin:
<img src="https://the_image_URL" cross-origin="use-credentials">
Значения атрибута: Возможные значения атрибута перекрестного происхождения: «», «anonymous» или «use-credentials», которые описаны ниже:
- use-credentials: делается запрос, который использует заголовки CORS, которые настроены для включения элемента на внешний сайт, предоставляя учетные данные пользователя, такие как файлы cookie, сертификаты SSL или аутентификация HTTP.
- анонимный: делается запрос, который использует заголовки CORS, а также устанавливает значение для флага учетных данных как тот же источник. Здесь обмен учетными данными пользователя с использованием файлов cookie, SSL-сертификатов или HTTP-аутентификации не производится, если пункт назначения не является тем же источником.
- «»: запрос выполняется путем установки пустого значения для имени атрибута, т. е. запрос элемента на внешний сайт без предоставления каких-либо учетных данных пользователя.
Использование холста для отображения изображений с перекрестным происхождением. Во многих ситуациях мы можем захотеть использовать изображение в качестве холста (возможно, для анимации изображения), но чтобы иметь возможность его использовать, мы должны использовать свойство перекрестного происхождения в Javascript. .
Безопасность холста: холст можно использовать для отображения изображений и видео из различных источников, но это может вызвать проблему безопасности, если источник не поддерживает crossOrigin . Если мы рисуем на холсте данные из любого стороннего источника без одобрения CORS, холст становится испорченным. Холст считается испорченным, когда он больше не является безопасным. В испорченном холсте невозможно получить извлеченные данные, поскольку это вызовет исключение.
Существуют некоторые ограничения для элементов холста, которые описаны ниже:
- Холсту не разрешено извлекать HTML-элементы <img> или <svg> из стороннего источника.
- Если холст используется для получения изображения как HTMLCanvasElement или ImageBitMap , и изображение не удовлетворяет тем же правилам происхождения, чтение данных холста блокируется.
Если холст испорчен, то вызов функций getImageData() , toBlob() и toDataURL() приведет к ошибке безопасности. Ошибка безопасности предотвращает раскрытие личных данных изображениями, взятыми с иностранных веб-сайтов без разрешения.
Отображение или сохранение изображений из иностранного источника. Первым шагом является наличие веб-сервера с настроенным HTTP-заголовком Access-Control-Allow-Origin . Этот заголовок разрешает доступ к файлам изображений из разных источников.
Предварительная настройка, которую необходимо выполнить на веб-сервере: добавление приведенного ниже кода на сервер Apache позволит получить доступ к графическим файлам этого сервера с любого сайта в Интернете.
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch ".(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>Примечание. Для различных серверов процесс добавления заголовка HTTP отличается от приведенного выше кода для сервера Apache.
Отображение изображения на сайте: Сервер, с которого вы хотите отобразить изображение, должен иметь вышеуказанное необходимое условие.
Пример 1. В приведенном ниже примере показано отображение изображения с стороннего сайта с использованием холста с использованием свойства crossOrigin .
HTML
<!DOCTYPE html><html lang="en"><head> <title> Allowing cross-origin use of images and canvas </title></head><body> <canvas id="Canvas"></canvas> <script> // Any foreign website URl var imageUrl = // Creating canvas element var canvas = document.getElementById("Canvas"); // Creating new Image object with the name img var img = new Image(); // Setting cross origin value to anonymous img.crossOrigin = "anonymous" // The Image URL is been set to the // src property of the image img.src = imageUrl // This function waits until the image being loaded. img.onload = function () { // Matches the canvas width to that of the image canvas.width = this.width // Matches the canvas height to that of the image canvas.height = this.height // Displays the image to the canvas tag of id Canvas canvas.getContext("2d").drawImage(this, 0, 0) } </script></body></html> |
Примечание. Поскольку перекрестное происхождение не поддерживается сервером GFG, который разрешает доступ, поэтому мы можем не получить вывод, если будем использовать URL-адрес изображения, который используется в коде.
Выход:
Добавьте кнопку «Загрузить» для изображения: сервер, с которого вы хотите отобразить изображение, должен иметь указанные выше предварительные условия.
Пример 2: В приведенном ниже примере описывается разрешение пользователям загружать стороннее изображение с помощью кнопки загрузки. Затем мы преобразовали изображение в DataUrl и использовали тег <a> для запуска загрузки.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> Allowing cross-origin use of images and canvas </title></head><body> <div id="display"></div> <button onclick="Download()"> DOWNLOAD </button> <script> function Download() { // Hard coded image URL change the URL according // to the image you want to download let imgURL = let foreignImg = new Image(); // Set the cross origin to "anonymous" or // "use-credentials" according to the // server needs foreignImg.crossOrigin = "anonymous"; foreignImg.src = imgURL; // The imageLoad function is called after proper // loading of the image foreignImg.addEventListener("load", imageLoad); function imageLoad() { // This function is called display and start // the download of the image const display = document.getElementById("display"); let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); canvas.width = foreignImg.width; canvas.height = foreignImg.height; context.drawImage(foreignImg, 0, 0); display.appendChild(canvas); var image = canvas.toDataURL(); var tempLink = document.createElement("a"); tempLink.download = "image.png"; tempLink.href = image; document.body.appendChild(tempLink); tempLink.click(); document.body.removeChild(tempLink); } } </script></body></html> |
Примечание . Поскольку перекрестное происхождение не поддерживается сервером GFG, который разрешает доступ, поэтому мы можем не получить вывод, если будем использовать URL-адрес изображения, который используется в коде.
Выход: