用 canvas 将图片 url 转成 blob
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片，这个图片文件可以被缓存或保存到本地，由用户代理端自行决定，默认图片类型为 image/png, 分辨率为 96dpi
第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置

语法

canvas.toBlob(callback, type[指定图片格式,可选], encoderOptions[指定图片展示质量,0-1之间可选]);

callback 可获得一个单独的 Blob 对象
无返回值

示例

将 canvas 图像转为文件

当一个内容画到 canvas 上时， 我们可以将它生成任何一个格式支持的图片文件，
比如，下面的代码获得了canvas元素中的图像，复制成一个png图，在文档中加入一个新的img元素，这个img元素的源图就是使用canvas创建的那个图像

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

指定图片的格式和质量

canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

image.png