Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

185
Views
Problemas al pasar canvas.toDataURL() a ffmpeg.wasm

Estoy tratando de configurar la conversión de animación de lienzo a video con FFMPEG.wasm. La idea es generar un montón de imágenes con canvas.toDataURL() y luego enviarlas a un servidor Node para generar un video. Todo funciona perfectamente con las imágenes precargadas que extraigo del directorio público para realizar pruebas; sin embargo, cuando intento enviar un montón (o una sola) de imágenes creadas con canvas.toDataURL() el siguiente error:

 RuntimeError: abort(Error: ENAMETOOLONG: name too long, open 'data:image/png;base64, ...

Traté de reemplazar canvas.toDataURL() con canvas.getContext('2d').getImageData() , sin embargo, esto tampoco ayudó. A continuación se muestra un código de corte que estoy usando:

frente:

 async function fetchData() { const response = await fetch('/api/record-canvas', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: here_goes_the_canvas_data }), }); }

back-end:

 await ffmpeg.load(); ffmpeg.FS('writeFile', `001.png`, await fetchFile(image)); await ffmpeg.run('-loop', '1', '-i', '001.png', '-c:v', 'libx264', '-t', '30', '-pix_fmt', 'yuv420p', 'out.mp4'); await fs.promises.writeFile('out.mp4', ffmpeg.FS('readFile', 'out.mp4'));

El código anterior está simplificado para hacer un video de una sola imagen repitiéndola durante 30 segundos. Una vez más, funciona muy bien con la imagen precargada, pero no con los datos del lienzo.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Para aquellos que se encontraron con el mismo problema, esta es la solución que se me ocurrió:

  1. dataURL debe ser jpeg (por ejemplo, canvas.toDataURL('image/jpeg') ).

  2. Debe transformarlo en un valor de búfer (por ejemplo Buffer.from(image.split(',')[1], 'base64') antes de pasar a la función fetchFile de FFMPEG.

  3. Las respuestas son largas y difíciles de entender.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!