使用 canvas 将图片URL转换为PNG格式的图像数据并保存为文件

当我们需要将一个图片URL转换为PNG格式的图像数据时，可以使用Canvas来完成这个任务。在这篇博客中，我们会学习如何使用Canvas将一个图片URL转换为PNG格式的图像数据，并将其保存为文件。

步骤一：加载图片

首先，我们需要从给定的URL加载图像

const img = new Image();
img.crossOrigin = "anonymous"; // 如果需要跨域访问图片，需要设置图片的crossOrigin属性
img.src = url;
await new Promise(resolve => { img.onload = resolve; }); // 等待图片加载完成

在这个示例代码中，我们创建一个新的Image对象, 然后将图片的URL赋值给Image对象的src属性，并使用Promise等待图片加载完成。

步骤二：绘制图片到Canvas

一旦图片加载完成，我们就可以将它绘制到Canvas上

const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

在这个示例代码中，我们创建了一个新的Canvas元素，并将其大小设置为与图片相同。然后，我们获取Canvas的2D上下文，并使用drawImage()方法将图片绘制到Canvas上。

步骤三：将Canvas转换为PNG格式的图像数据

一旦我们将图片绘制到Canvas上，我们就可以将Canvas转换为PNG格式的图像数据。我们可以使用Canvas的toDataURL()方法来完成这个任务。

const pngDataUrl = canvas.toDataURL("image/png");

步骤四：将PNG格式的图像数据保存为文件

最后，我们可以将PNG格式的图像数据保存为文件。我们可以使用Blob和File API来完成这个任务

canvas.toBlob(blob => {
  const file = new File([blob], filename, { type: "image/png" });
  // 在这里处理File对象
});

在这个示例代码中，我们使用Canvas的toBlob()方法生成Blob对象，并将其传递给File构造函数，以创建一个新的File对象。然后，我们可以在回调函数中处理File对象，例如将其上传到服务器。

总结

使用HTML5的Canvas API，我们可以很容易地将一个图片URL转换为PNG格式的图像数据，并将其保存为文件。

• 加载图片
• 将图片绘制到Canvas上
• 将Canvas转换为PNG格式的图像数据
• 将PNG格式的图像数据保存为文件

完整代码

async function urlToFile(url, filename) {
  const img = new Image();
  img.crossOrigin = "anonymous"; // 如果需要跨域访问图片，需要设置图片的crossOrigin属性
  img.src = url;
  await new Promise(resolve => { img.onload = resolve; }); // 等待图片加载完成
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  return new Promise(resolve => {
    canvas.toBlob(blob => {
      const file = new File([blob], filename, { type: "image/png" });
      resolve(file);
    });
  });
}