En el elemento canvas, utiliza el siguiente código para dibujar imágenes.

 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d') let width = canvas.width let height = canvas.height ctx.clearRect(0, 0, width, height) ctx.canvas.width = width ctx.canvas.height = height .... let image = new Image //image.crossOrigin = 'anonymous' image.src = url ctx.drawImage(image, x, y)

Todo funciona bien siempre que no quiera exportar la obra de arte resultante. Intento hacerlo así:

 let canvas = document.getElementById('canvas') var link = document.createElement('a') let imgUrl = canvas.toDataURL() link.download = 'graphics.jpg' link.href = imgUrl link.click()

Entonces recibo el siguiente error en la consola:

 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Al buscar una solución a este problema, me encontré con la información de que antes de agregar gráficos al lienzo, necesito agregar una línea que comenté en la parte superior, a saber:

 image.crossOrigin = 'anonymous'

El problema es que estos gráficos no se cargan porque están bloqueados por la política cors:

 Access to image at ... from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Los gráficos se toman del backend escrito en laravel. ¿Cómo puede js exportar datos de lienzo sin cambiar nada en el backend? Si esto no es posible, cómo cambiar la política cors en laravel para que no bloquee la descarga de imágenes desde la carpeta de almacenamiento.