js通过图片路径下载图片（解决firefox下载为空图片的bug）

具体思路：

1. 通过图片路径获取图片资源。
2. 将图片资源使用canvas转为base64
3. 再将base64转换为 Blob对象

   此处将base64 转换为 Blob 是为了解决低版本的Firefox浏览器中得到的 base64 数据为一个空白图片的bug

4. 使用URL.createObjectURL()方法将Blob转化为路径
5. 通过标签触发点击事件实现下载

具体代码如下：

function downPicture(src){
  const image = new Image();
  const pos = src.lastIndexOf('\/'); // 查找最后一个/的位置
  const fileName = src.substring(pos + 1);
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous');
  image.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    const imgData = canvas.toDataURL({format: 'png', multiplier: 4}); // 得到图片的base64编码数据
    // 此处又将base64转为Blob 对象是因为：在低版本的Firefox浏览器中得到的 base64 数据为一个空白图片
    // 所以才转为Blob对象，解决此bug。不考虑兼容性可以直接将此base64对象直接赋值给a.href即可。无需以下***中操作
    // *********************************************
    const blob = dataURLtoBlob(imgData);
    const objurl = URL.createObjectURL(blob);
    // *********************************************
    const a = document.createElement('a'); // 生成一个a元素
    const e = new MouseEvent('click'); // 创建一个单击事件
    a.download = fileName ; // 设置图片名称
    a.href = objurl; // 将生成的URL设置为a.href属性
    a.dispatchEvent(e); // 触发a的单击事件
  };
  image.src = src;
}

function dataURLtoBlob(dataurl){
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}