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

冰冰-ying

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

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html javascript

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

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

该代码段展示了一种使用JavaScript处理图片保存的方法。通过触发模拟点击事件，将图片URL转换为Blob对象，然后创建一个a标签用于下载，最后触发点击事件实现图片保存到本地。同时，代码中包含了处理文件名的正则表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 <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);
                },