如何将远程 webp 图像转换为 png 图像以将其加载到 node-canvas

Question

通常我使用

将 png 图像导入 Canvas

const image = Canvas.LoadImage('url.png')
const canvas = Canvas.createCanvas(256,256)
const ctx = canvas.getContext('2d')
ctx.drawImage(image,256,256)

但是当我尝试导入 webp 图像时，我收到一条错误消息，指出不支持 webp。在研究 node-canvas 的问题时，我发现 this issue，导入问题似乎已解决，但我现在不明白如何导入 webp 图像。

我尝试使用 fix in the issue 中的 Image, ImageFromBuffer(await fetch(url).buffer()) 但都出错了。

Answer 1

我使用库Sharp解决了它。

首先获取文件作为缓冲区

// axios for remote images- maybe fs for local images?
const imageResponse = await axios.get(url, {
        responseType: 'arraybuffer',
      });

使用 sharp 将文件转换为 png：

const img = await sharp(imageResponse.data).toFormat('png').toBuffer();

然后就可以使用loadImage了

const file = await loadImage(img).then((image) => {
      ctx.drawImage(
        image,
        256,
        256
      );

      return { buffer: canvas.toBuffer(), mimetype: `image/png` };
    });

如何将远程 webp 图像转换为 png 图像以将其加载到 node-canvas

How to convert a remote webp image to a png image to load it into node-canvas

canvas

node.js

webp

node-canvas