js保存图片到本地

原创已于 2023-10-31 17:09:58 修改 · 5.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2020-04-16 11:02:17 首次发布

小卖部 js 专栏收录该内容

63 篇文章

订阅专栏

说明：可以实现下载图片，但是移动端浏览器不行，暂时没有实现，如果有知道的大哥留个言，让我改进一下，感谢。

操作步骤：新建一个文件夹，将代码放入index.html，然后在文件夹内启用命令行安装 npm install -g live-server 文件夹下输入live-server就可以了。

也可以看这里，点一下试试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      text-align: center;
    }
    .img {
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      width: 100px;
      height: 100px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div class="box">
    <img class="img" id="girlImg" src="http://test-saas-apis.mumway.com/mumwayportal/channelPromotion/activityCode?channelId=44" alt=""><br />
    <button onclick="downloadImg()">保存图片</button>
    <a href="#" onclick="javascript:savePic();">保存到相册</a>
    <button onclick="downloadIamge('girlImg', '二维码名称')">保存图片2222</button>
    
  </div>
  <script>
  	// 简单的
  	fetch('https://file.wonder-link.net/90626f8a-0ebe-48fa-935e-4fb09b0c3ff1.jpg')
    .then(response => response.blob())
    .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '二维码.jpg';
        a.click();
        URL.revokeObjectURL(url);
    });
    // 第一种方法
    function downloadImg(){
      var img = document.getElementById('girlImg');
      var url = img.src;
      var a = document.createElement('a');
      var event = new MouseEvent('click')
      a.download = 'imgName'
      a.href = url;
      a.dispatchEvent(event);
    }

    // 第二种方法
    function savePic(){
      var img = document.getElementById('girlImg');
      var picurl = img.src;
      savePicture(picurl);
    }
    var triggerEvent = "touchstart";
    function savePicture(Url){
      var blob=new Blob([''], {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = Url;
      a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
      var e = document.createEvent('MouseEvents');
      e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      a.dispatchEvent(e);
      URL.revokeObjectURL(url);
    }

    // 第三种方法  解决图片跨域问题
    function downloadIamge(selector, name) {
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height

          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          var url = canvas.toDataURL('image/png')
          var a = document.createElement('a')
          // 创建一个单击事件
          var event = new MouseEvent('click')
          a.download = name || '下载图片名称'
          a.href = url

          // 触发a的单击事件
          a.dispatchEvent(event)
      }

      image.src = document.getElementById('girlImg').src
  }
  
  </script>
</body>
</html>