h5页面点击保存图片可以保存到手机相册

 如图，点击下面的保存图片想要把图片保存到手机相册，

1.  
   <div class="saveImg" @click="savePic">保存图片</div>
2.  
   savePic(Url) {
3.  
   Url = this.imgURL //图片路径，也可以传值进来
4.  
   var triggerEvent = "touchstart"; //指定下载方式
5.  
   var blob = new Blob([''], { type: 'application/octet-stream' }); //二进制大型对象blob
6.  
   var url = URL.createObjectURL(blob); //创建一个字符串路径空位
7.  
   var a = document.createElement('a'); //创建一个 a 标签
8.  
   a.href = Url; //把路径赋到a标签的href上
9.  
   //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
10.  
    a.download = Url.replace(/(.*\/)*([^.] .*)/ig, "$2").split("?")[0];
11.  
    /* var e = document.createEvent('MouseEvents'); //创建事件（MouseEvents鼠标事件）
12.  
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
13.  
    //代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
14.  
    var e = new MouseEvent('click', (true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
15.  
    //派遣后，它将不再执行任何操作。执行保存到本地
16.  
    a.dispatchEvent(e);
17.  
    //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
18.  
    URL.revokeObjectURL(url);
19.  
    },

这篇好文章是转载于：学新通技术网