Cordova screenshot IOS 截屏无效

一、简介 cordova-screenshot

cordova-screenshot 为 cordova 截屏插件， 适用于Android IOS

基本用法：

navigator.screenshot.save((error,res) => {
  if(error){
    console.error(error);
  }else{
    console.log('ok',res.filePath); // 图片路径
  }
},'jpg',50);

官方推荐用法只适用于 Android，在 IOS 会出现截屏无效的情况

原因：截屏保存的图片路径并不是在相册，而是在 tem 一个路径

二、 解决 IOS 截屏失效

解决思路：先用 img 标题，src 指向 res.filePath 保存的图片路径，再调用 Canvas2ImagePlugin 插件，使用 Canvas 保存至相册

1. 安装 cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git

<div class="qr-box" v-show="isCordova === true">
  <van-button
    @click="handleSaveQrcode"
    class="qr-btn"
    color="linear-gradient(to right, #E5CC87, #C39C69)"
  >
    <span class="qr-recharge">保存二维码</span>
  </van-button>
</div>

<canvas class="hideCanvas" id="myCanvas" ref="myCanvas"></canvas>
<img class="hideImg" ref="myImg" :src="fileSrc" alt="">

.hideImg {
  border: 1px solid red;
  position: absolute;
  z-index: -999;
  right: 9999px;
}

.hideCanvas {
  border: 1px solid red;
  position: absolute;
  z-index: -999;
  right: 9999px;
}

// vue
data () {
    return {
      fileSrc: ''
    }
  },
methods: {
    // 截屏操作
    handleSaveQrcode () {
      // 调用 cordova-screenshot 方法
      navigator.screenshot.save((error, res) => {
        if (error) {
          Toast.error(error)
        } else {
          // 判断UA，ios android 情况不同
          var u = navigator.userAgent; var app = navigator.appVersion
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
          var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端

          if (isIOS) {
            // 针对IOS做处理 res.filePath 为路径
            this.handleSystemSaveAlbum(res.filePath)
          } else if (isAndroid) {
            // Android 不需要特殊处理
            Toast.success('图片保存至相册')
          }
        }
      }, 'jpg', 50)
    },
    // 保存相册
    handleSystemSaveAlbum (filePath) {
      let img = this.$refs.myImg
      this.fileSrc = filePath

      img.onload = () => {
        let canvas = this.$refs.myCanvas
        canvas.width = img.width
        canvas.height = img.height
        let context = canvas.getContext('2d')
        context.drawImage(img, 0, 0)
        try {
          // 使用 canvas2ImagePlugin 保存至相册
          window.canvas2ImagePlugin.saveImageDataToLibrary((gmsg) => {
            Toast.success('图片保存至相册')
          }, () => {
            Toast.fail('保存失败')
          },
          document.getElementById('myCanvas')
          )
        } catch (e) {
          Toast.fail(e.message)
        }
      }
    },
}