时间戳

首页 > 解决方案 > 使用 pngjs 从缓冲区读取图像

node.js - 使用 pngjs 从缓冲区读取图像

问题描述

我的期望：
我正在尝试从 url 读取 PNG 图像，然后用 pngjs 解析它

我得到什么：
错误：文件签名无效

我试过的：
结果urlToBuffer()肯定是一个缓冲区。我尝试了不同的编码，尝试了不同的 http 客户端等。

抛出错误的地方：
https ://github.com/lukeapage/pngjs/blob/master/lib/parser.js 行：48

我的代码：

const axios = require('axios').default;
const PNG = require('pngjs').PNG;

const urlToBuffer = async (url) => {
  return axios({
      method: 'get',
      url: url,
      responseType: 'arraybuffer'
  })
  .then(res => Buffer.from(res.data))
  .then(buffer => {
      console.log('is buffer?', Buffer.isBuffer(buffer));
      console.log(buffer);
      return buffer;
  });
};

const beforeImageURL = 'https://my-source.com/image.png';
const beforeImageBuffer = await urlToBuffer(beforeImageURL);
const beforeImage = PNG.sync.read(beforeImageBuffer);

标签： node.jspngjs

解决方案

您的代码对我来说运行良好，它正在下载图像并对其进行解析。

我进行了一些修改以保存图像（因此我可以在图像编辑器/VS Code 中打开），还将图像属性写入控制台。

我想知道您用于测试的特定 URL 上的图像是否存在问题？

const axios = require('axios').default;
const PNG = require('pngjs').PNG;
const fs = require("fs");

const urlToBuffer = async (url) => {
return axios({
    method: 'get',
    url: url,
    responseType: 'arraybuffer'
})
.then(res => Buffer.from(res.data))
.then(buffer => {
    console.log('is buffer?', Buffer.isBuffer(buffer));
    console.log(buffer);
    return buffer;
});
};

(async () => {
    const beforeImageURL = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
    const beforeImageBuffer = await urlToBuffer(beforeImageURL);
    // Test by writing to file.
    fs.writeFileSync("image.png", beforeImageBuffer);
    const beforeImage = PNG.sync.read(beforeImageBuffer);
    console.log("Image properties:");
    console.table( { ...beforeImage, data: [] });
})();

我在这里使用图像进行测试。

推荐阅读