В этой статье представлено краткое описание N поз для разблокировки междоменных экспортированных изображений с холста. Я хотел бы поделиться ими с вами следующим образом.
Неперехваченное исключение DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты невозможно экспортировать.
Я считаю, что каждый сталкивался с вышеуказанной ошибкой при использовании холста для выполнения toDataUrl для экспорта изображений. Доменное имя сервера изображений отличается от текущего, поскольку политика безопасности не разрешает междоменный экспорт изображений.
Есть много способов решить эту проблему охвата. 1. Конвертируйте изображение в base64.Когда изображение становится base64, доменного имени, естественно, нет.
Примечание. Преобразуйте изображение в base64 и увеличьте размер файла изображения. Если изображение относительно большое, не рекомендуется конвертировать его в base64, иначе это увеличит время загрузки веб-страницы и повлияет на скорость веб-сайта. Этот метод в целом подходит. для небольших изображений.
2. Настройки сервера изображений позволяют использовать междоменный доступ. То есть заголовок ответа, возвращаемый при запросе изображения, содержит Access-Control-Allow-Origin установленным в * (разрешение междоменных запросов со всех веб-сайтов) или текущее имя домена веб-сайта (разрешение междоменных запросов только в соответствии с фиксированные доменные имена), а затем внешний интерфейс загружает изображение. Установите атрибут перекрестного происхождения изображения img.crossOrigin=anonymous。 Конкретный код выглядит следующим образом
var Canvas = document.getElementById('myCanvas') var ctx = Canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonymous img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }Таким образом, междоменные проблемы можно легко решить, объединив переднюю и заднюю части.
3. Разместите изображение под текущим доменным именем.Простите за недобрый смех, это действительно решение проблемы.
НО в реальных проектах изображения обычно хранятся в CDN, поэтому этот метод нереален.