Este artículo presenta la solución al problema de que toDataURL() informa un error al introducir imágenes entre dominios en Canvas. Me gustaría compartirlo con usted.
【Escena】
Cuando un usuario abre una página web, solicita imágenes en Tencent COS (servidor de imágenes). Dibuja usando lienzo.
Luego, el usuario puede volver a seleccionar la imagen, recortarla y cargarla.
【pregunta】
Cuando la imagen se carga por primera vez, no hay problema para recortar y dibujar después de seleccionar una nueva imagen. Pero la carga falló con el siguiente error:
No se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar.
Después de comprenderlo, debe configurar el campo crossOrigin cuando se hace referencia a la imagen por primera vez:
var c=document.getElementById(cover_show); var img=new Image(); img.src=http://vsqx-cover-xxxxxx.coscd.myqcloud.com/+this.vsqx_uid+.jpg //Agrega esta línea : img.setAttribute(crossOrigin,'anonymous'); img.onload = function(){ var cxt=c.getContext(2d); cxt.drawImage(img,0,0,300,150,0,0,200,126);Luego ejecútelo nuevamente. Descubrí que la imagen no se mostraba cuando se cargó por primera vez. . .
El error de la consola es el siguiente:
【Solución final】
Inicie sesión en Tencent Cloud COS, busque este depósito y configure el acceso entre dominios CORS. (Lo mismo se aplica a otros servidores PHP/JAVA)
Pruebe nuevamente: la imagen se muestra correctamente y la imagen se carga correctamente.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.