0

Cuento con la siguiente etiqueta:

             <img
              src={"enlace-imagen"}
              id="canvas"
              style={{
                objectFit: "scale-down",
              }}
            />

Por otro lado, tengo un botón con un evento onCLick que ejecuta la siguiente función:

   async function downloadImage() {

    const link = document.createElement("a");
    link.download = "codigoQR.png";
    let m = document.getElementById("canvas") as HTMLCanvasElement;
    link.href = m.toDataURL();
    link.click();
  }

El problema está en que al ejecutar la función, sucede la excepción: "m.toDataURL is not a function". Saben como solucionarlo?

5
  • Es TypeScript el código.
    – Kobe Moya
    Commented el 22 ago. 2022 a las 19:31
  • Revisaste todo en la consola del navegador? Sale algo cuando intentas hacer ese cast del img como canvas?
    – Alfabravo
    Commented el 22 ago. 2022 a las 19:38
  • El único error que brinda la consola es: "payment_methods.tsx?fc4f:72 Uncaught (in promise) TypeError: m.toDataURL is not a function". También da un erro 500 en el servidor interno, pero creo que es producto de la primera excepción.
    – Kobe Moya
    Commented el 22 ago. 2022 a las 19:44
  • Mi kung-fu en TS no es bueno, pero no veo en la documentación que uno pueda hacer ese cast tan así nada más. Por eso la pregunta. Pero bueh, si llega alguien más pro que sepa la respuesta, veremos :)
    – Alfabravo
    Commented el 22 ago. 2022 a las 19:58
  • Exactamente... ¿qué quieres hacer? Porque defines una imagen, la quieres usar como un canvas después de generar un enlace que apunta a un .PNG Commented el 23 ago. 2022 a las 18:31

1 respuesta 1

0

Tal como lo tienes diseñado:

 async function downloadImage() {
    const link = document.createElement("a");
    let m = document.getElementById("canvas") as HTMLImageElement;
    link.href = m.src;
    link.click();
}
4
  • 1
    Implementando tu solución, el navegador abre una nueva pestaña y muestra la imagen, no hace la opción de descarga. He investigado y creo que solo pasa en versiones antiguas del navegador.
    – Kobe Moya
    Commented el 23 ago. 2022 a las 19:37
  • A mi me abre una ventana de archivos para guardar la descarga. Supongo que dependerá del navegador. Commented el 23 ago. 2022 a las 19:51
  • Qué navegador estás usando?
    – Kobe Moya
    Commented el 23 ago. 2022 a las 23:07
  • Chrome Versión 104.0.5112.102 (Build oficial) (64 bits) (enriquegg.ddns.net/download) <--- aquí una prueba online Commented el 24 ago. 2022 a las 15:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.