如何在 JSON 响应中嵌入图像答案

【问题标题】：how to embed an image in a JSON response如何在 JSON 响应中嵌入图像
【发布时间】：2020-02-27 06:39:13
【问题描述】：

我正在使用Jimp 读取如下所示的 JSON 字符串：

如您所见，image 节点是 base64 编码的 JPEG。

我能够成功地将其转换为 TIFF 并保存：

  Jimp.read(Buffer.from(inputImage, "base64"), function(err, image) {
    image.getBuffer(Jimp.MIME_TIFF, function(error, tiff) {
    context.bindings.outputBlob = tiff
    ...}

但是，当我尝试将 tiff 嵌入到 JSON 对象中时，TIFF 变得乱码：

  const response = {
    image: tiff.toString('base64'),
    correlation: correlation
  };

  context.bindings.outputBlob = response;

这是完整的代码：

const Jimp = require("jimp");

module.exports = function(context, myBlob) {
  const correlation = context.bindings.inputBlob.correlation;
  const inputImage = context.bindings.inputBlob.image;
  const imageName = context.bindings.inputBlob.imageName;

  context.log(
    correlation + "Attempting to convert this image to a tiff: " + imageName
  );
  Jimp.read(Buffer.from(inputImage, "base64"), function(err, image) {
    image.getBuffer(Jimp.MIME_TIFF, function(error, tiff) {
      const response = {
        image: tiff.toString('base64'),
        correlation: correlation
      };

      context.bindings.outputBlob = response;
      context.log(
        correlation + "Succesfully converted " + imageName + " to tiff."
      );
      context.done();
    });
  });
};

我们如何将 tiff 嵌入到 JSON 有效负载中？

如果此输出不可协商，我将如何从保存的有效负载中呈现 tiff？

【问题讨论】：

Jimp 调用 UTIF，它读取任何类型的 tiff，但似乎只写入未压缩的 RGBA tiff。通常，解压缩和重新压缩图像不会返回相同的数据。
@OrionLawlor 谢谢。在那种情况下，保存图像后，我将如何渲染它？
您是否尝试将其呈现为函数的响应，例如通过 context.res？
@search-learn 是的

标签： javascript node.js json azure-functions jimp

【解决方案1】：

好吧，既然您确认您正在寻找带有 context.res 的输出，这是我的工作示例。请注意，有一个最大响应大小，因此您不能像我在这里返回图像的方式返回每个图像/文件

const Jimp = require('jimp')

module.exports = async function (context, req)
{
    let response = {}

    try
    {
        let url = 'https://noahwriting.com/wp-content/uploads/2018/06/APPLE-300x286.jpg'

        //call function to download and resize image
        response = await resizeImage(url)

    }
    catch (err)
    {
        response.type = 'application/json'
        if (err.response == undefined)
        {
            context.log(err)
            response.status = 500
            response.data = err
        }
        else
        {
            response.data = err.response.data
            response.status = err.response.status
            context.log(response)
        }
    }

    //response
    context.res =
    {
        headers: { 'Content-Type': `${response.type}` },
        body: response.buf
    }
}

async function resizeImage(url)
{
    //read image to buffer
    let image = await Jimp.read(url)

    //resize image
    image.resize(300, Jimp.AUTO)

    //save to buffer
    let image_buf = await image.getBufferAsync(image.getMIME())

    //image.getMIME() returns something like `image/jpeg` which is a valid Content-Type for responses.
    return { 'buf': image_buf, 'type': image.getMIME() }
}

（Offtopic，但我看到您正在使用 blob 存储，所以..）如果您计划在 Azure Blob 存储中存储照片/文件/任何内容，并且您想以某种系统的方式检索它们，您会很快发现您无法查询存储，您必须处理丑陋的 XML。我的工作是避免以这种方式创建一个将照片/文件存储在 Blob 存储中的函数，然后将文件的 url 路径以及文件名和任何其他属性保存到 mongo 存储中。因此，我可以进行超快速查询来检索指向相应文件的链接数组。

【讨论】：