Azure Functions ，缩略图图像大小大于原始图像答案

【问题标题】：Azure Functions , Thumbnail image size is larger than original imageAzure Functions ，缩略图图像大小大于原始图像
【发布时间】：2017-06-10 02:30:36
【问题描述】：

我用这个Background image thumbnail processing with Azure Functions and 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);

                }

            });

    });

};

【问题讨论】：

这不是 Azure Functions 问题 - 它更像是 Jimp 问题。您可以使用此图像在本地对其进行测试。
您的内容类型不匹配。 Blob 存储可能会根据内容类型以不同方式存储它们。
谢谢，@AaronChen-MSFT 我找到了解决方案。请看 :)
谢谢，@ChrisAnderson-MSFT 我找到了解决方案。请看 :)
是的，但是我们怎样才能改变它呢？我在这里提出了一个单独的问题：@ChrisAnderson-MSFT stackoverflow.com/questions/41858321/…

标签： node.js image azure thumbnails azure-functions

【解决方案1】：

我已经找到了解决方案。

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

您可以在这里阅读更多信息：Image is resized down and gets bigger file size

我必须设置.quality(50)，如下图。这个问题只有JPEGs。

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);

                }

            });

    });

};

【讨论】：

【解决方案2】：

我遇到了同样的问题，我使用了sharp，这对我有用。如果您需要更多帮助，请告诉我，我将分享我的完整功能代码。

 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()
 }

【讨论】：