JS下载图片

   function downLoad(downloadName, url){
       const tag = document.createElement('a');
       // 此属性的值就是下载时图片的名称,注意,名称中不能有半角点,否则下载时后缀名会错误
       tag.setAttribute('download', downloadName.replace(/\./g, '。'));

       const image = new Image();
       // 设置 image 的 url, 添加时间戳,防止浏览器缓存图片
       image.src = url + '?time=' + new Date().getTime();
       //重要,设置 crossOrigin 属性,否则图片跨域会报错
       image.setAttribute('crossOrigin', 'Anonymous');
       // 图片未加载完成时操作会报错
       image.onload = () => {
           tag.href = getImageDataURL(image);
           tag.click();
       };
   }



   /**
    * 获取图片的 base64 编码 DataURL
    * @param image JS 图像对象
    * @return {string} 已编码的 DataURL
    */
   function getImageDataURL(image) {
       // 创建画布
       const canvas = document.createElement('canvas');
       canvas.width = image.width;
       canvas.height = image.height;
       const ctx = canvas.getContext('2d');
       // 以图片为背景剪裁画布
       ctx.drawImage(image, 0, 0, image.width, image.height);
       // 获取图片后缀名
       const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
       // 某些图片 url 可能没有后缀名,默认是 png
       return canvas.toDataURL('image/' + extension, 1);
最后修改:2023 年 07 月 25 日
您的赞赏是对我最大的支持。