При рисовании изображения внешней ссылки на холсте мы столкнемся с междоменной проблемой.
Примеры следующие:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = Canvas.toDataURL('image/png'); изображение.источник = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>Открыв эту страницу в браузере, вы обнаружите такую проблему:
Неперехваченное исключение DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты невозможно экспортировать.
Это ограничено политикой CORS, и возникнут междоменные проблемы. Хотя изображения можно использовать, рисование на холсте приведет к его загрязнению. Если холст загрязнен, данные с него невозможно извлечь. нельзя использовать метод Canvas toBlob() или getImageData(); при использовании этих методов будет выдана указанная выше ошибка безопасности.
Это неприятная проблема, но, к счастью, в img добавлен атрибут crossorigin, который определяет, включена ли функция CORS во время процесса получения изображения:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = Canvas.toDataURL('изображение/ПНГ'); 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>Сравнивая два приведенных выше фрагмента JS-кода, вы обнаружите дополнительную строку:
image.setAttribute('crossorigin', 'anonymous');Это так просто, идеальное решение!
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.