uniapp的H5实现图片长按保存-Toy模板网

这篇具有很好参考价值的文章主要介绍了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();
      },

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

这是实习期间碰到的问题，希望大佬指正文章来源地址https://www.toymoban.com/news/detail-676604.html

到了这里，关于uniapp的H5实现图片长按保存的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！