关于cordova + vue 图片保存到本地

需要获取权限

具体实现

• 安装权限插件插件

cordova plugin add cordova.plugins.permissions      //配置存储的权限 获取设备权限

• 安装保存图片插件

cordova plugin add cordova-plugin-canvas2image   //这种方法可以直接在相册里面看到图片但是动图看不到

• 代码实现

1. config.xml 中插入

 <config-    file parent="/*" target="AndroidManifest.xml" xmlns:android="http://schemas.android.com/apk/res/android">
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
</config-file>

2. 判断是否打开权限，没有则打开

    save() {
      let that = this;
      console.log("保存");
      var permissions = cordova.plugins.permissions; //权限
      permissions.checkPermission(
        permissions.WRITE_EXTERNAL_STORAGE,
        function(s) {
          if (!s.hasPermission) {
            permissions.requestPermission(
              permissions.WRITE_EXTERNAL_STORAGE,
              function(s) {
                if (s.hasPermission) {
                  //调用保存图片的方法
                  that.savePic();
                } else {
                  console.log("申请失败");
                }
              },
              function(error) {
                console.log(error);
              }
            );
          } else {
            //调用保存图片的方法
            that.savePic();
          }
        },
        function(error) {
          console.log(error);
        }
      );
    },
    savePic() {
      let that = this
      var canvas, context, imageDataUrl, imageData;
      var img = new Image();
      img.src = this.host + this.src;
      canvas = this.$refs.canvas;
      var success = function(msg) {
        that.$toast.msg({msg:"保存成功"});//自己封装的方法
      };
      var error = function(err) {
        that.$toast.msg({msg:'保存失败'});//自己封装的方法
      };
      img.onload = function() {
        console.log("Img size: " + img.naturalWidth + "x" + img.naturalHeight);
        canvas.width = img.width;
        canvas.height = img.height;
        context = canvas.getContext("2d");
        context.drawImage(img, 0, 0);
        try {
          imageDataUrl = canvas.toDataURL("image/jpeg", 1.0);
          imageData = imageDataUrl.replace(/data:image\/jpeg;base64,/, "");
          cordova.exec(
            success,
            error,
            "Canvas2ImagePlugin",
            "saveImageDataToLibrary",
            [imageData]
          );
        } catch (e) {
          console.log(e.message);
        }
      };
      try {
        img.src = this.host + this.src;
        console.log("153" + img.src);
      } catch (e) {
        console.log("156" + img.src);
        error(e.message);
      }
    }

3. 需要在html中加上

<canvas ref="canvas" id="myCanvas"></canvas>
//隐藏 canvas
#myCanvas{
  position: fixed;
  visibility: hidden;
}

到此应该就实现了，网上文章和官网文档都有点出入，加上插件很久没更新，找资料花了很多事件，以此记录踩坑。