cordova vue app 长按保存图片

cordova vue监听长按事件

---

前言

长按保存图片 主要在vue进行监听 用插件进行保存

---

一、添加插件cordova-plugin-canvas2image

cordova plugin add cordova-plugin-canvas2image

二、添加权限

代码如下

            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />

三、在app.vue页面中添加长按监听图片事件

代码如下：

      let timer = 0
      document.ontouchstart = (e) => {
        timer = setTimeout(() => {
          console.log('LongPress')
          if (e.target.nodeName === 'IMG') {
            console.log(e)
            this.$refs.imgSave.openFuc(true, e.target.currentSrc)
          }
          e.preventDefault()
        }, 800)
      }
      document.ontouchmove = (e) => {
        console.log('touchmove')
        clearTimeout(timer)
        timer = 0
      }
      document.ontouchend = (e) => {
        console.log('touchend')
        clearTimeout(timer)
        // if (e.target.nodeName === 'IMG') {
        //   return false
        // }
      }

添加保存图片组件：xxx.vue

在app.vue页面中引入该组件 具体dom代码不做一一列出了，
页面中添加canvas

<canvas id="myCanvas" style="position: absolute; z-index: -999; visibility: hidden"></canvas>

具体说下js逻辑
保存时再确认下 是否添加好权限
代码如下：

   const permissions = cordova.plugins.permissions
      permissions.checkPermission(permissions.WRITE_EXTERNAL_STORAGE, (s) => {
        if (!s.hasPermission) {
          permissions.requestPermission(permissions.WRITE_EXTERNAL_STORAGE, (s) => {
            if (s.hasPermission) {
              this.saveToPhone()
            } else {
              console.log('申请失败')
            }
          }, function (error) {
            console.log(error)
          })
        } else {
          this.saveToPhone()
        }
      }, function (error) {
        console.log(error)
      })

接下来添加保存方法

  saveToPhone () {
      // eslint-disable-next-line no-unused-vars
      let canvas, context
      // eslint-disable-next-line prefer-const
      canvas = document.getElementById('myCanvas')
      const img = new Image()
      img.src = this.imgSrc
      img.onload = () => {
        canvas.width = img.width
        canvas.height = img.height
        context = canvas.getContext('2d')
        // eslint-disable-next-line no-undef
        context.drawImage(img, 0, 0)
        this.closeFuc()
        try {
          window.canvas2ImagePlugin.saveImageDataToLibrary(
            (msg) => {
              this.$toast.success({
                className: 'toast-default-size',
                message: '保存成功'
              })
              // eslint-disable-next-line handle-callback-err
            }, (err) => {
              console.log(err)
              this.$toast.fail(
                {
                  className: 'toast-default-size',
                  message: '保存失败！'
                })
            },
            document.getElementById('myCanvas')
          )
        } catch (e) {
          console.log(e.message)
        }
      }
    }

---

总结

主要通过vue页面监听 添加保存图片的组件 实现长按保存 之前卡在 未添加权限 就去保存 一直失败 例外 图片过大时 保存会慢 可以优化下