Uso react y html-to-image para exportar HTML a imágenes. Debido a que Safari no funciona correctamente con la exportación jpg/png, necesito exportar el nodo HTML a SVG (la URL de datos se genera así: datos: imagen/svg...).

Con esta cadena, estoy creando una nueva imagen dentro de un lienzo y luego guardo el lienzo en .png con el método canvas.toDataURL("image/png").

Todo funciona en Firefox/Chrome, pero en Safari no funciona la primera vez.

• Primer clic: solo tiene un nodo HTML avec (sin texto)
• Segundo clic: algunas imágenes + nodo HTML anterior
• Tercer clic: todo funciona

Aquí está parte de mi función:

 var canvas = document.createElement("canvas") var ctx = canvas.getContext('2d') var img = new Image; setTimeout(()=>{ htmlToImage.toSvg(document.querySelector('.Banner'), {pixelRatio: RatioVal}).then((dataUrl) => { canvas.width = 1300*RatioVal; canvas.height = 690*RatioVal; img.src = dataUrl; img.onload = () => { ctx.drawImage(img,0,0,canvas.width, canvas.height) var Export = canvas.toDataURL("image/png"); document.body.append(Export) var a = document.createElement('a'); a.href = Export; a.download = window.Chara.Nom+".png"; a.click(); }; }) },600)

¿Sabes por qué necesito hacer clic en Exportar 3 veces para tener una imagen completa? ¿Es esta la mejor manera de convertir dataUrl SVG a imagen PNG?

Probé muchas cosas (Blob to Png, etc.) pero el problema es el mismo en Safari.