Estoy tratando de guardar un collage de imágenes creadas en un front-end de React Canvas. Sin embargo, dado que estoy obteniendo mis imágenes de un servidor, aparece el siguiente error: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Mi código es el siguiente:
const imgHidden = new Image(); imgHidden.src = layer imgHidden.crossOrigin="Anonymous" imgHidden.onload= () => { const ctxHidden = hiddenCanvas.current.getContext("2d") ctxHidden.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height); ctxHidden.drawImage(imgHidden, 0,0, 900, 900) } //layer has the url from where image is coming (https://xxx.s3.filebase.com/abc.png) function saveImage() { let imageToSave = new Image(); imageToSave.crossOrigin="anonymous" imageToSave.src = hiddenCanvas.current.toDataURL('image/png', 1.0); setSavedImage(imageToSave.src) //alert("Patience Lurker! Minting isn't active yet!") }El servidor donde he almacenado mis imágenes tiene la opción de agregar CORS. Agregué el siguiente JSON:
{ "CORSRules": [ { "AllowedHeaders": [], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] }Sin embargo, no funcionó. ¿Qué "métodos permitidos" necesito agregar para que esto funcione en React Canvas?
De vez en cuando me da este error: Access to image at 'https://bucketname.s3.filebase.com/2.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Además, debido a la imgHidden.crossOrigin="Anonymous" en la función de dibujo, aparece un error: GET https://traits.s3.filebase.com/101.png net::ERR_FAILED 200 al intentar cambiar dinámicamente las imágenes sobre lienzo Básicamente, mi lienzo deja de funcionar si esta línea está presente y si la elimino, el problema de CORS me impide guardar la base64.
Resulta que el problema radica en el servidor de Filebase. A pesar de tener la configuración de CORS correcta a través de la línea de comandos de AWS (al cargar un json), el servidor no las aplica a mi depósito. Para cualquiera que esté solucionando problemas de CORS, tengo dos consejos:
Use este sitio para averiguar si el CORS en su servidor está configurado correctamente: https://cors-test.codehappy.dev/
Use un enlace de imagen IMGUR en su lienzo en lugar de la imagen del servidor. Si IMGUR funciona (como lo hizo en mi aplicación React), significa que la configuración de CORS en el servidor es incorrecta. Si el enlace IMGUR no funciona, significa que su código de reacción es incorrecto.
Recuerde agregar la línea img.crossOrigin="anonymous" ANTES img.src . Espero que mi calvario de 2,5 días ayude a otros.