js图片下载图片转base64

图片转base64

通过canvas.toDataURL获取

  const getBase64Image = url => {
      return new Promise((resolve, reject) => {
        let canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d'),
          img = new Image();
        /*
          为了解决跨域，可以直接img.crossOrigin=''就能解决图片跨域问题
          crossorigin 的属性值可以是 anonymous、use-credentials，如果没有属性值或者非法属性值，会被浏览器默认做 anonymous 。crossorigin 的作用有三个：
          1. crossorigin会让浏览器启用CORS访问检查，检查http相应头的   Access-Control-Allow-Origin
          2. 对于传统script需要跨域获取的js资源，控制暴露出其报错的详细信息
          3. 对于module script，控制用于跨域请求的凭据模式
        */
        img.crossOrigin = '';
        img.onload = () => {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0);
          let dataURL = canvas.toDataURL('image/png');
          canvas = null;
          resolve(dataURL);
        };
        img.onerror = () => {
          reject('');
        };
        img.src = url;
      });
    };

图片下载

方法一： 直接使用a标签下载

  let aDom = document.createElement('a');
  aDom.style.display = 'none';
  // 下载图片名称
  aDom.download = Date.now() + '.png';
  // 图片链接
  aDom.href = '';
  document.body.appendChild(aDom);
  aDom.click();
  document.body.removeChild(aDom);
  // 如果下载的是外部地址，可能下载的时候会跳转页面。所以最好转成base64 下载

方法二： 如果后端需要权限下载图片，可以添加权限请求接口，然后再使用方法一下载。

  let url = ''; // 请求地址，后端返回的是文件流
  let params = {} // 参数
  axios.get('url', {
    params: params,
    responseType: 'blob',
  })
   .then(res => {
      let str = res?.headers?['content-disposition'] ?? '';
      if (!str) {
        return
      }
      const blob = res.data;
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = e => {
        
        // 后端设置的文件名称在res.headers的 "content-disposition": "attachment; filename=xxx.png",
        // 再使用方法一下载。
      };
      
    })
  .catch(err => {
    
  });