JavaScript实现前端图片下载与本地保存完整指南

function downloadIamge(src, imgName){​
    let image = new Image();​
    image.src = src;​
    image.setAttribute("crossOrigin", "anonymous");​
    image.onload = function() {​
        let c = document.createElement("canvas");​
        c.width = image.width;​
        c.height = image.height;​
        c.getContext("2d").drawImage(image, 0, 0, image.width, image.height);​
        let a = document.createElement("a"); ​
        a.download = imgName;​
        a.href = c.toDataURL("image/png");​
        a.click();​
    }​
}

const imageUrl = "https://example.com/image.jpg";
const imageName = "myImage.jpg";
downloadImage(imageUrl, imageName);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button>点击下载多个图片</button>
    <script>
      const srcList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件 
      bt.addEventListener('click',downloadMany(srcList))

      //下载多个
      function downloadMany(srcList){
          return function() {
              srcList.forEach((url,index)=>{
               //循环调用download函数下载
              download(url,index+'png')
            })
          }
      }
      //下载函数
      function download(url,fileName){
            //图片的地址 
            fetch(url)
              // 获取 blob 对象
              .then(res=>res.blob())
              .then(blob=>{
                // 创建a标签
                var link = document.createElement('a');
                // 设置a标签为不可见
                link.style.display = 'none';
                // 将a标签添加到body
                document.body.appendChild(link);
                // 生成Blob URL并设置给a标签的href属性
                var url = window.URL.createObjectURL(blob);
                link.href = url;
                // 设置a标签的download
                link.download = fileName;
                // 模拟点击事件进行下载
                link.click();
                //下载完成后清理URL对象和a标签
                window.URL.revokeObjectURL(url);
                document.body.removeChild(link); 
              })
      }

    </script>
</body>
</html>