Azure 函数，缩略图大小大于原始图像

Question

我已经使用这个带有Azure函数和NodeJS文章的背景图像缩略图处理来创建一个缩略图。已成功创建映像。但是图像的尺寸增加了。这是怎么发生的？它一定很小不是吗？我该如何解决这个奇怪的问题？

这是Blob存储器上的原始图像

处理后(缩略图)

这是 Azure 函数（节点）：

var Jimp = require("jimp");

module.exports = (context, myBlob) => {

    // Read image with Jimp
    Jimp.read(myBlob).then((image) => {

        // Manipulate image
        image
            .resize(200, Jimp.AUTO) 
            .greyscale()
            .getBuffer(Jimp.MIME_JPEG, (error, stream) => {

                // Check for errors
                if (error) {
                    context.log(`There was an error processing the image.`);
                    context.done(error);
                }
                else {
                    context.log(`Successfully processed the image`);

                    // Bind the stream to the output binding to create a new blob
                    context.done(null, stream);

                }

            });

    });

};

Answer 1

我也有同样的问题，我使用了夏普，这对我很有用。如果您需要更多帮助，请告诉我，我将分享我的完整函数代码。

 const sharp = require('sharp');
 const thumbnailWidth = 250
 module.exports = async (context, myBlob) => {
    
      let thumbBuffer
      const image = await sharp(myBlob)
      image.resize({ width: thumbnailWidth })
      return thumbBuffer = await image.toBuffer()
 }

Answer 2

我已经找到了解决办法。

JPEG的默认质量为100。您应该将其设置为较低的值以获得压缩：

您可以在此处了解更多信息：图像大小缩小，文件大小变大

我必须设置＜code＞。质量（50）如下所示。此问题仅适用于JPEG。

var Jimp = require("jimp");

module.exports = (context, myBlob) => {

    // Read image with Jimp
    Jimp.read(myBlob).then((image) => {

        // Manipulate image
        image
            .resize(200, Jimp.AUTO)
            .greyscale()
            .quality(50) // set the quality for JPEGs
            .getBuffer(Jimp.MIME_JPEG, (error, stream) => {

                // Check for errors
                if (error) {
                    context.log(`There was an error processing the image.`);
                    context.done(error);
                }
                else {
                    context.log(`Successfully processed the image`);
                    // Bind the stream to the output binding to create a new blob
                    context.done(null, stream);

                }

            });

    });

};