js点击下载图片文件

记录

  const downloadImg = (val) => {
    // val 为传入的图片地址
    let _type_index = val.lastIndexOf('.');
    let _type = val.substr(_type_index + 1); //原始图片类型
    let image = new Image();
    image.setAttribute('crossOrigin', 'anonymous'); //消除跨域
    image.src = val;
    image.onload = function () {
      //借助canvas实现 消除 图片地址会先直接窗口打开图片地址
      let canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      let context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, image.width, image.height);
      let url = canvas.toDataURL('image/' + _type);
      let blob = dataUrlToBold(url);
      let obj_url = URL.createObjectURL(blob); // 消除Chrome下文件太大 导致下载失败（网络失败）的问题
      let a = document.createElement('a');
      let event = new MouseEvent('click');
      a.download = name || 'xi-yuan';
      a.href = obj_url;
      a.dispatchEvent(event);
    };
  }

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