2

我的任务是将几个 png 堆叠在另一个之上并将其导出为一个 png。图像的大小不同，但它们不需要调整大小，只需裁剪到可用的画布即可。

图像来自文件系统并作为缓冲区发送。可能有 8 到 30 张图像。

我的测试使用了 10 张图像，我将它与 node-canvas 进行了比较，它所花费的时间不到 Sharp 的 50%。我认为 Sharp 的一个问题是我必须extract在合成之前进行制作和操作。

这是我使用 Sharp 运行的代码，需要 600 毫秒，包含 10 张图像：

export const renderComponentsSHARP = async ( layers  )=>{

    const images = [];

    for(let i=0; i<layers.length; i++){
        const layer = sharp(layers[i]));
        const meta =  await layer.metadata();
        if(meta.height > AVATAR_SIZE.height || meta.width > AVATAR_SIZE.width)
            layer.extract({ top:0, left:0, ...AVATAR_SIZE });
        images.push({input:await layer.toBuffer()});
    }

    return sharp({
        create: {
            ...AVATAR_SIZE,
            channels: 4,
            background: { r: 0, g: 0, b: 0, alpha: 0 }
        }})
        .composite(images)
        .png()
        .toBuffer();
};

这是我在画布上运行的代码，大约需要 280 毫秒：

export const renderComponentsCANVAS = async ( layers )=>{

    const canvas = createCanvas(AVATAR_SIZE.width, AVATAR_SIZE.height);
    const ctx = canvas.getContext('2d');

    const images = await Promise.all(layers.map( layer=>loadImage(layer)));

    images.forEach(image=>{
        ctx.drawImage(image, 0, 0);
    });

    return canvas.toBuffer();
};

我做错了什么尖锐吗？或者它不是这项工作的工具？

4

0 回答 0