使用pngjs从缓冲区读取图像

Question

我期望的:
我想从一个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);

- David Freimaucher

Answer 1

你的代码对我来说运行得非常好，它正在下载图像并解析它。

我稍微修改了一下，以保存图像（这样我就可以在图像编辑器/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: [] });
})();

我正在使用这里的图片进行测试。

- Terry Lennox

---

感谢您的回复。也许是由于图像托管在Google云存储上时存在阅读权限问题。我尝试了您的图像，它可以正常工作。因此，我已经更换了图像托管方案。 - David Freimaucher