Este artículo presenta un resumen de N posturas para desbloquear imágenes exportadas entre dominios desde el lienzo. Me gustaría compartirlas con usted.
DOMException no detectada: no se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar.
Creo que todos han encontrado el error anterior al usar lienzo para ejecutar toDataUrl para exportar imágenes. El nombre de dominio del servidor de imágenes es diferente del actual porque la política de seguridad no permite la exportación de imágenes entre dominios.
Hay muchas maneras de resolver este problema de expansión. 1. Convierte la imagen a base64.Cuando la imagen se convierte en base64, no es necesario hablar sobre el nombre de dominio y, naturalmente, no hay dominio cruzado.
Nota: Convierta la imagen a base64 y aumente el tamaño del archivo de imagen. Si la imagen es relativamente grande, no se recomienda convertirla a base64; de lo contrario, aumentará el tiempo de carga de la página web y afectará la velocidad del sitio web. para imágenes pequeñas.
2. La configuración del servidor de imágenes permite dominios cruzados Es decir, el encabezado de respuesta devuelto al solicitar la imagen contiene Access-Control-Allow-Origin con el valor establecido en * (permitiendo solicitudes entre dominios de todos los sitios web) o el nombre de dominio del sitio web actual (solo permitiendo solicitudes entre dominios bajo nombres de dominio fijos), y luego el front-end carga la imagen. Establezca el atributo de origen cruzado de la imagen img.crossOrigin=anonymous。 El código específico es el siguiente.
var lienzo = 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); toDataURL()) }De esta manera, los problemas entre dominios se pueden resolver fácilmente combinando las funciones delantera y trasera.
3. Coloque la imagen bajo el nombre de dominio actual.Perdóneme por reírme con crueldad, esta es de hecho una solución al problema.
PERO en proyectos reales, las imágenes generalmente se almacenan en CDN, por lo que este método no es realista.