A brief introduction of cordova-screenshot

Cordova – Screenshot is an add-on for Cordova and is available for Android and IOS

Basic usage:

navigator.screenshot.save((error,res) => { if(error){ console.error(error); }else{ console.log('ok',res.filePath); // Image path}},' JPG ',50);Copy the code

The official recommended usage is only available on Android. On IOS, screenshots are not valid

Reason: The screenshot saved image path is not in album, but in TEM a path

2. Resolve the failure of IOS screenshot

< img SRC = “res.filePath” style = “color: RGB (50, 50, 50)

  1. The installationcordova 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">Save qr code</span>
  </van-button>
</div>

<canvas class="hideCanvas" id="myCanvas" ref="myCanvas"></canvas>
<img class="hideImg" ref="myImg" :src="fileSrc" alt="">
Copy the code
.hideImg {
  border: 1px solid red;
  position: absolute;
  z-index: -999;
  right: 9999px;
}

.hideCanvas {
  border: 1px solid red;
  position: absolute;
  z-index: -999;
  right: 9999px;
}
Copy the code
// vue data () { return { fileSrc: '' } }, methods: {/ / screenshots handleSaveQrcode () {/ / the navigator call cordova - screenshot method. The screenshot. Save ((the error, Res) => {if (error) {toast.error (error)} else {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 + /) / / if the ios terminal (isIOS) {/ / ios against doing processing res. FilePath for path enclosing handleSystemSaveAlbum (res) filePath} else if (isAndroid) {// Android does not need special toast.success (' save image to album ')}}, 'JPG ', 50)}, $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 {/ / use canvas2ImagePlugin save to photo album window. Canvas2ImagePlugin. SaveImageDataToLibrary ((GMSG) = > { Toast. Success (' photos to photo album ')}, () = > {Toast. Fail (' save failed ')}, document.getElementById('myCanvas') ) } catch (e) { Toast.fail(e.message) } } }, }Copy the code