原理：canvas.toDataURL

<template>
  <div id="app">
    <div class="ocr_img" >
      <input
        style="display: block;"
        type="file"
        accept="image/*"
        capture="camera"
        @change="getOcrImage($event)"
      />
      <img :src="imgUrl" />
      <div>base64編碼為：</div>
      <div style="word-wrap: break-word;">{{pic}}</div>
    </div>
  </div>
</template>

<script>
/*
 
 eslint-disable */
export default {
  name: 'App',
  data(){
    return {
      imgUrl:'',
      pic:'',
    }
  },
  methods:{
    getOcrImage(e) {
      let that = this;
      // 重新上傳時清空原資料
      that.base64img = "";
      that.pic = "";
      if (e.target.files.length) {//判斷照片是否上傳成功
        let file = e.target.files[0];//
 
拿到上傳檔案的屬性物件
        let reader = new FileReader();
        reader.readAsDataURL(file);//呼叫FileReader物件的readAsDataURL方法,將檔案讀取為DataURL
        let fileSize = Math.round(e.target.files[0].size / 1024 / 1024);
        reader.onload = function() {
          img.src = this.result;
          that.showNext = true;
        };
        let img 
 
= new Image(),
          maxW = 1000,
          canvas = document.createElement("canvas"),
          drawer = canvas.getContext("2d");
        img.onload = function() {
          if (img.width > maxW) {//圖片壓縮
            img.height *= maxW / img.width;
            img.width = maxW;
          }
          canvas.width = img.width;
          canvas.height = img.height;
          drawer.clearRect(0, 0, canvas.width, canvas.height);
          drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
          let compressRate = that.getCompressRate(1, fileSize);//圖片壓縮
          let base64 = canvas.toDataURL("image/jpeg", compressRate); // 這裡就拿到了壓縮後的base64圖片
          let pic = base64.split(",")[1];
          that.base64img = pic;
          that.pic = pic;
          that.imgUrl = "data:image/png;base64," + pic;
          // 清空檔案上傳控制元件的值  不清理會出現選擇同樣的圖片會無法觸發input事件了
          e.target.value = null;
        };
      }
    },
    getCompressRate(allowMaxSize, fileSize) {
      let compressRate = 1;
      if (fileSize / allowMaxSize > 4) {
        compressRate = 0.6;
      } else if (fileSize / allowMaxSize > 3) {
        compressRate = 0.7;
      } else if (fileSize / allowMaxSize > 2) {
        compressRate = 0.8;
      } else if (fileSize / allowMaxSize > 1) {
        compressRate = 0.9;
      } else {
        compressRate = 1;
      }
      return compressRate;
    }
  }
}
/* eslint-disable */
</script>

結果截圖：