Nodejs - 锐合并图像缓冲区已损坏

Question

我的用例要求我在每个 api 调用中合并两个图像缓冲区并将其上传到 s3 签名的 url。 流量：

const image1 = getImage() // from remote server (base64 encoded)
const image2 = getImage() // from remote server (base64 encoded)
const buffer1 = Buffer.from(poaFrontImage, "base64");
const buffer2 = Buffer.from(poaBackImage, "base64");
const combineBuffer = await this.mergeImagesVertically(buffer1, buffer2);
const bufferData = await combineBuffer.toBuffer();
await fs.writeFileSync('check.png', bufferData);  // this file is not opening

//further send buffer data for s3 upload.

utility function:
public async mergeImagesVertically(buffer1: Buffer, buffer2: Buffer) {
        const image1 = sharp(buffer1);
        const metadata1 = await image1.metadata();

        const mergedImage = sharp({
            create: {
                width: metadata1.width,
                height: metadata1.height * 2, 
                channels: 4,
                background: 'white',
            }
        });

        // Await the composite method to make sure it's executed before moving forward
        await mergedImage.composite([
            { input: buffer1, top: 0, left: 0 },
            { input: buffer2, top: metadata1.height, left: 0 }
        ]);

        await mergedImage.toFile('combineImage3.png'); // this image is perfect
        return mergedImage;
        //return await mergedImage.toBuffer();

    }

每次我尝试时，bufferData都是一个损坏的文件。难道是我的方法不对？还请告诉我是否有更有效的方法，因为此功能将在每个 api 请求中经常使用。

Answer 1

损坏的文件的问题可能与您处理缓冲区数据的方式有关。您应该使用异步文件写入方法，而不是使用同步写入文件并且可能无法正确处理异步操作的 fs.writeFileSync。此外，您可以直接从 mergeImagesVertically 函数返回缓冲区，而不是尖锐的对象。

以下是修改代码的方法：

const image1 = getImage(); // from remote server (base64 encoded)
const image2 = getImage(); // from remote server (base64 encoded)
const buffer1 = Buffer.from(image1, "base64");
const buffer2 = Buffer.from(image2, "base64");
const combinedBuffer = await this.mergeImagesVertically(buffer1, buffer2);

// Further processing with combinedBuffer (e.g., upload to S3)

// Utility function
public async mergeImagesVertically(buffer1: Buffer, buffer2: Buffer) {
const image1 = sharp(buffer1);
const metadata1 = await image1.metadata();

const mergedImage = sharp({
    create: {
        width: metadata1.width,
        height: metadata1.height * 2, 
        channels: 4,
        background: 'white',
    }
});

await mergedImage.composite([
    { input: buffer1, top: 0, left: 0 },
    { input: buffer2, top: metadata1.height, left: 0 }
]);

// Convert the merged image to buffer directly
const bufferData = await mergedImage.toBuffer();
return bufferData;
}

通过直接从 mergeImagesVertically 函数返回缓冲区并异步处理文件写入，您应该能够避免文件损坏问题。此方法对于处理您的用例也应该很有效。