В этой статье представлено решение проблемы, когда toDataURL() сообщает об ошибке при добавлении междоменных изображений в Canvas. Подробности следующие:
【Сцена】
Когда пользователь открывает веб-страницу, он или она запрашивает изображения на Tencent COS (сервер изображений). Рисуйте, используя холст.
Затем пользователь может повторно выбрать изображение, обрезать его и загрузить.
【вопрос】
При первой загрузке изображения проблем с обрезкой и рисованием после выбора нового изображения не возникает. Но загрузка не удалась со следующей ошибкой:
Не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты невозможно экспортировать.
После понимания вам необходимо установить поле crossOrigin при первом обращении к изображению:
var c=document.getElementById(cover_show); var img=new Image(); img.src=http://vsqx-cover-xxxxxx.coscd.myqcloud.com/+this.vsqx_uid+.jpg; : img.setAttribute(crossOrigin,'anonymous'); img.onload = function(){ var cxt=c.getContext(2d); cxt.drawImage(img,0,0,300,150,0,0,200,126);Затем запустите его еще раз. Я обнаружил, что изображение не отображалось при первой загрузке. . .
Ошибка консоли следующая:
【Окончательное решение】
Войдите в Tencent Cloud COS, найдите этот сегмент и настройте CORS междоменного доступа. (То же самое относится и к другим серверам PHP/JAVA)
Проверьте еще раз: изображение успешно отображается и успешно загружается.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.