es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El método toBuffer de Node.js Canvas se almacena en caché.

28 May, 2023 Programación

Tengo el siguiente código para producir dos archivos pdf diferentes. Sin embargo, obtengo el mismo resultado duplicado en el segundo archivo en lugar de dos resultados diferentes. ¿Qué estoy haciendo mal?

const fs = require ('fs');
const {createCanvas} = require ('canvas');

const canvasWidth = 768;
const canvasHeight = 1056;

const canvas = createCanvas(canvasWidth, canvasHeight, 'pdf');
const ctx = canvas.getContext('2d');

ctx.fillText('Some text 1', 50, 50);
var buffer = canvas.toBuffer('application/pdf');
fs.writeFileSync('../foo-1.pdf', buffer );

ctx.fillText('More text 2', 150, 50);
var buffer2 = canvas.toBuffer('application/pdf');
fs.writeFileSync('../foo-2.pdf', buffer2 );

Intenté usar el método fs.fileWrite() asíncrono, pero también lleva al mismo resultado.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema que hay en el código proporcionado es que el mismo canvas se utiliza para crear dos archivos PDF separados. Una vez que se crea el primer archivo PDF, el canvas sigue conservando el texto “Some text 1” y cuando se crea un segundo archivo PDF utilizando el mismo canvas, contiene el mismo contenido que el primer archivo PDF.

    Para solucionar este problema, se deben crear dos instancias de canvas separadas, una para cada archivo PDF. Esto se puede hacer de la siguiente manera:

    const fs = require('fs');
const { createCanvas } = require('canvas');

const canvasWidth = 768;
const canvasHeight = 1056;

const canvas1 = createCanvas(canvasWidth, canvasHeight, 'pdf');
const ctx1 = canvas1.getContext('2d');

ctx1.fillText('Some text 1', 50, 50);
var buffer1 = canvas1.toBuffer('application/pdf');
fs.writeFileSync(`../foo-1.pdf`, buffer1);

const canvas2 = createCanvas(canvasWidth, canvasHeight, 'pdf');
const ctx2 = canvas2.getContext('2d');

ctx2.fillText('More text 2', 150, 50);
var buffer2 = canvas2.toBuffer('application/pdf');
fs.writeFileSync(`../foo-2.pdf`, buffer2);

    Aquí, se crean dos instancias de canvas separadas (canvas1 y canvas2). Se utilizan los contextos ctx1 y ctx2 para dibujar el texto respectivo en cada canvas. Finalmente, se crean buffers separados para cada canvas utilizando canvas1.toBuffer() y canvas2.toBuffer(), y los archivos PDF se escriben en disco utilizando fs.writeFileSync().

Comments are closed.