以清晰的方式动态叠加多个图像

Question

我正在尝试使用sharp覆盖多个图像。下面显示了一个自包含的示例，该示例失败并出现错误：

错误：输入缓冲区包含不支持的图像格式

在第一次覆盖操作期间引发错误。我真正的生产代码将有一个动态数量的图像缝合，所以我需要一些形式的循环来创建我的合成图像。

你知道哪里出了问题吗？我是一个JavaScript新手，所以可能在某个地方有叮当声。。。

const sharp = require('sharp');
let photoWidth = 400;
let imagePromises = [];
// This would be a dynamic amount of images in reality
let images = ['https://i.imgur.com/ej54FT4.jpg', 'https://i.imgur.com/ej54FT4.jpg'];
// Centre, square crop each image
images.forEach((img) => {
imagePromises.push(
get(img)
.then((imgBuffer) => {
return sharp(imgBuffer)
.resize(photoWidth, null)
.max()
.withMetadata()
.toBuffer();
})
.then((imgBuffer) => {
return sharp(imgBuffer)
.resize(photoWidth, photoWidth)
.withMetadata()
.toBuffer();
})
);
});
// Create something to overlay the images on
let backgroundPromise = sharp({
create: {
width: photoWidth,
height: images.length * photoWidth,
channels: 3,
background: {r: 0, g: 0, b: 0}
}
}).toBuffer();
Promise.all(imagePromises)
.then((imgBuffers) => {
let i = -1;
return imgBuffers.reduce((current, overlay) => {
return current.then((curr) => {
i++;
console.log(`Overlaying image ${i + 1}`);
// Error occurs here:
return sharp(curr)
.overlayWith(overlay, {top: i * photoWidth, left: 0})
.withMetadata()
.toBuffer();
});
}, backgroundPromise);
})
.then((noFormatImage) => {
console.log("Converting to JPG");
return sharp(noFormatImage)
.jpeg({
quality: 95
})
.toBuffer();
})
.then((finishedImageBuffer) => {
console.log("Writing to storage");
return sharp(finishedImageBuffer)
.toFile('output.jpg');
})
.then((info) => {
console.log(info);
})
.catch((err) => console.log(err));

function get(url) {
return new Promise((resolve, reject) => {
let request = require('request').defaults({encoding: null});
request.get(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
resolve(body);
} else {
reject(error);
}
});
});
}

Answer 1

解决了这个问题。我需要将背景转换为JPEG:

// Create something to overlay the images on
let backgroundPromise = sharp({
create: {
width: photoWidth,
height: images.length * photoWidth,
channels: 3,
background: {r: 0, g: 0, b: 0}
}
})
.jpeg()   // <--- this was needed
.toBuffer();