uniapp的H5实现图片长按保存

实现图片预览

使用uniapp的api实现图片预览，可以缩放，关闭等操作

uni.previewImage({urls:[imageUrl],success:()=>{this.controllTouch();}
})

imageUrl是图片地址，如https://www.111.com/abc/image.png

urls是字符串数组，用来预览图片

因为app可以使用对应的图片下载保存，这里就不多说了，主要讲的是在H5实现图片预览保存功能

长按图片显示保存弹框 

因为H5无法实现长按显示弹框所以，要自己实现这个功能。

1、在图片开始预览时，加上事件监听，手指点击和手指离开

window.addEventListener("touchstart",fnTouchStart,true);
window.addEventListener("touchend",fnTouchEnd,true);

 其中touchstart和touchend是手指开始和离开的监听名字，第二个参数是监听到手指开始和手指离开时所执行的函数。

2、编写手指开始接触屏幕和手指离开时的函数

2、1手指开始接触屏幕

因为在预览时会有两个手指放大缩小图片，单击图片关闭预览的操作，所以需要对这两种情况进行判断。

当监测到屏幕上有两个手指时，不会进行保存图片提示，一个手指长按时会出现提示

其中有几个手指接触屏幕，会体现在事件监听的回调函数的参数中（e.touches.length），长度为多少就表示有多少个手指在接触屏幕。

 2、2手指离开屏幕

在手指离开屏幕时，也会有对应的回调函数表示（e.touches.length），为0表示有一根手指离开屏幕。

2、3实现1秒后，长按提示

使用定时器完成，每次监测到手指点击屏幕时清空定时器，只有在长按1秒后离开屏幕，才会执行定时器里面的内容。

showDownImage 是控制弹框的显示和隐藏，后面有作用

// 触碰屏幕控制
controllTouch(){let flag = false;let timeEvent = null;const fnTouchStart = (e) => {clearTimeout(timeEvent)flag = false;// 判断按住的时间是否超过1秒timeEvent = setTimeout(()=>{if(e.touches.length == 1){flag = true;}else if(e.touches.length == 2){flag = false;}},1000)}const fnTouchEnd = (e) => {if(e.touches.length == 0 && flag){this.showDownImage = true;flag = false;}else{//如果为单击事件，做对应的处理if(!this.showDownImage){this.closeControllTouch(fnTouchStart,fnTouchEnd,timeEvent);}}}window.addEventListener("touchstart",fnTouchStart,true);window.addEventListener("touchend",fnTouchEnd,true);
},

2、4为什么不适用匿名函数实现事件监听？

因为使用匿名函数后，无法对匿名函数进行去掉监听的操作。加入使用以下方法对点击事件进行监听

window.addEventListener("touchstart",(e)=>{console.log(e);
},true);

后续无法拿到上面事件的函数，进行销毁事件监听处理。

3、为单击事件时，关闭预览，去掉事件监听

在上述代码中，使用了非匿名函数形式的事件监听，在这里对移除事件监听，防止在其他页面也显示弹框，同时清理定时器。

closeControllTouch(fnTouchStart,fnTouchEnd,timeEvent){window.removeEventListener("touchstart",fnTouchStart,true);window.removeEventListener("touchend",fnTouchEnd,true);clearTimeout(timeEvent);
},

4、showDownImage 展示弹框

当判断是长按图片时，手指离开屏幕，出现弹框，使用了uview的模态框实现

<u-modal :show="showDownImage"class="comfirm-modal"title="是否保存图片"width="560rpx"confirmColor="#009BF3":showCancelButton="true"confirmText="确认"@confirm="downLoad"@cancel="showDownImage = false"></u-modal>

@confirm="downLoad"是点击确定时，执行函数downLoad下载图片

downLoad() {const url = '';//你要下载的图片地址var xhr = new XMLHttpRequest();xhr.open('get', url, true);xhr.responseType = 'blob';xhr.onload = ()=>{if (xhr.status === 200) {console.log(xhr)var blobUrl = new Blob([xhr.response]);const link = document.createElement('a');link.style.display = 'none';var urlObject = window.URL.createObjectURL(blobUrl);link.href = urlObject;link.download = url;document.body.appendChild(link);link.click();document.body.removeChild(link);}}xhr.send();this.showDownImage = false;this.closePreviewImage();},

下载完成图片之后，关闭模态框，事件监听，操作完成！！！

这是实习期间碰到的问题，希望大佬指正