H5页面点击保存，把页面上的图片保存到手机相册有什么好方法吗？

Question

H5页面点击保存，把页面上的图片保存到手机相册有什么好方法吗？当前H5需要在手机浏览器和微信中打开
在网上查找到这个方法，但是不能用，会直接把这个图片打开，不能达到保存到手机相册的目的？ 有什么好的办法吗

    function saveStills(){
            console.info('保存');
            let Url = this.dialogImgUrl //图片路径，也可以传值进来
            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, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
            //派遣后，它将不再执行任何操作。执行保存到本地
            a.dispatchEvent(e);
            //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
            URL.revokeObjectURL(url);
            /* 
            //这段好像并不影响，所以我不用，注释掉
            var imgs = document.getElementsByTagName("img");
            for(var i = 0,o;o = imgs[i];i++){
                
                o.addEventListener(triggerEvent,function(){
                    var newurl = this.getAttribute("src");
                    saveAs(newurl);
                },false);
            } */
}

Answer 1

把交互都改成长按保存就好了。点击保存会有误操作，没有长按保存来的友好。