这几天用cordova用的头大，用cordova插件cordova-plugin-camera感觉不好用，而且在某些机型有点问题==

所以改成用HubuilderX进行打包，并且使用h5plus的api进行拍照调用

官方api: 点击这里进入

注意的是 ：该程序必须打包成apk在真机或者模拟器运行,不然会报错

github项目地址：从这里进入

先上效果图：

具体实现：

android.js

//获取系统方法
function takePhoto(callback) {
  var cmr = plus.camera.getCamera();
  cmr.captureImage(
    function(p) {
      plus.io.resolveLocalFileSystemURL(
        p,
        function(entry) {
          dealImage(
            entry.toLocalURL(),
            {
              width: 100,
              height: 100,
              quality: 0.7
            },
            function(base64) {
				//回调
              callback(base64);
            }
          );
        },
        function(e) {
          outLine("读取拍照文件错误：" + e.message);
        }
      );
    },
    function(e) {},
    { filename: "_doc/camera/", index: 1 }
  );
}

function takefromgalery(callback) {
  plus.gallery.pick(
    function(e) {
      for (var i in e.files) {
        console.log(e.files[i]);
        plus.io.resolveLocalFileSystemURL(
          e.files[i],
          function(entry) {
            dealImage(
              entry.toLocalURL(),
              {
                width: 100,
                height: 100,
                quality: 0.7
              },
              function(base64) {
                callback(base64)
              }
            );
          },
          function(e) {
            outLine("读取拍照文件错误：" + e.message);
          }
        );
      }
    },
    function(e) {
      console.log("取消选择图片");
    },
    { filter: "image", multiple: true }
  );
}
//将实际路径转化成base64编码
function dealImage(path, obj, callback) {
  var img = new Image();
  img.src = path;
  img.onload = function() {
    var that = this;
    var w = that.width,
      h = that.height,
      scale = w / h;
    w = obj.width || w;
    h = obj.height || w / scale;
    var quality = 0.9; 
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var anw = document.createAttribute("width");
    anw.nodeValue = w;
    var anh = document.createAttribute("height");
    anh.nodeValue = h;
    canvas.setAttributeNode(anw);
    canvas.setAttributeNode(anh);
    ctx.drawImage(that, 0, 0, w, h);
    // 图像质量
    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
      quality = obj.quality;
    }
    var base64 = canvas.toDataURL("image/jpeg", quality);
    callback(base64);
  };
}
export { takePhoto, takefromgalery, dealImage };

picActionSheet.vue

<!-- 拍照封装  -->
<template>
  <van-action-sheet
    v-model="show.visable"
    :actions="actions"
    @select="onSelect"
    cancel-text="取消"
    close-on-click-action
  />
</template>

<script>
import { takePhoto, takefromgalery } from "../../utils/android";

import { ActionSheet  } from 'vant'
export default {
  name: "picActionSheet",
  props: ["show"],
  components:{
    "van-action-sheet":ActionSheet
  },
  data() {
    return {
      actions: [
        { name: "选取照片", index: 1 },
        { name: "拍照上传", index: 2 },
        { name: "选取相册", index: 3 }
      ]
    };
  },
  methods: {
    onSelect(item) {
      let that = this;
      switch (item.index) {
        case 1:
        //本地选择
          this.$emit("change", item);
          break;
        case 2:
        	//拍照
          takePhoto(res => {
            this.$emit("fileChangeSuccess", res);
          })
          break;
        case 3:
        	//相册
          takefromgalery(res => {
            this.$emit("fileChangeSuccess", res);
          });
          break;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.dx-header {
  position: fixed;
  width: 100%;
  z-index: 999;
}
</style>

helloword.vue

<template>
  <div class="hello">
    <dxUpload
      @onChange="change"
      ref="upload"
      @chooseFile="onChooseFile"
    ></dxUpload>
    <picActionSheet
      @change="itemChange"
      :show="showPhotoDialog"
      @fileChangeSuccess="onFileChangeSuccess"
    ></picActionSheet>
  </div>
</template>

<script>
import dxupload from "./dxupload/dxUpload.vue";
import { dataURLtoFile } from "../utils/utils";
import picActionSheet from "./actionsheet/picActionSheet.vue";
export default {
  name: "HelloWorld",
  components: {
    [dxupload.name]: dxupload,
    [picActionSheet.name]: picActionSheet
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      showPhotoDialog: { visable: false }
    };
  },
  methods: {
    itemChange() {
      this.$refs.upload.uploadFile();
    },
    onChooseFile() {
      //https://blog.csdn.net/github_35549695/article/details/82770044
      this.showPhotoDialog.visable = true;
    },
    change() {
      console.log("change");
    },
    onFileChangeSuccess(item) {
      //转化文件格式 将base64转File
      let e = {
        target: {
          files: [dataURLtoFile(item, new Date().getTime() + ".jpeg")]
        }
      };
      this.$refs.upload.fileChangeHandler(e);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

upload组件是自己写的，但是很多逻辑还未实现，等有空一起把上传接口一起搞定。

有建议或者喜欢的可以评个论点赞什么的