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

冰冰-ying

已于 2023-03-22 11:01:14 修改

阅读量5.1k

点赞数

文章标签：前端 html javascript

于 2023-01-06 08:57:24 首次发布

本文链接：https://blog.csdn.net/yingw1/article/details/128573025

版权

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

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