Vue<通过图片识别银行卡号>

需求:用户填写银行卡号增加一个便捷功能,即调用手机相机拍照获取图片中的银行卡号.
自己眯了半天，也找了很多资料，感觉这个纯前端是无法解决的，因为是要调取第三方软件，利用OCR技术识别。
本人参考的是百度的，地址：http://ai.baidu.com/docs#/Begin/top

image.png
文档上有说要调用的Api，但是发现前端调用会出现跨域问题,所以说需要后端那边进行处理，就不需要白费力气了。
但是前端预计要准备的就是如何调用照相机以及图片的base64编码（因为百度文档里面有要求）
image.png
此处给大家说一个便捷的方法,只要用到input标签就行了,直接上vue代码了

<template>
  <div>
    <input
      @change="uploadPhoto($event)"
      type="file"
      class="kyc-passin"
      accept="image/jpg, image/jpeg, image/gif, image/png"
    >
  </div>
</template>

<script>
export default {
  methods: {
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      var filesize = file.size;
      var filename = file.name;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        var imgcode = e.target.result;
        console.log(imgcode);//此处就是你需要的图片数据了
      };
    }
  }
};
</script>
<style>
</style>

本人已经尝试过了，此标签在安卓上面会掉出相机和图库，用户可选择拍照或者选择文件，拍照后可直接获取到该图片的数据。