怎么应用Canvas将一个图片URL转换成PNG格式图像信息

在我们需要把一个图片URL转换成PNG格式图像信息时，可以用Canvas去完成今天的任务。在这里篇blog中，我们也会学习怎么应用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);
    });
  });
}