APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能

Posted 2022-06-29 L_不觉晓晓

没用使用过html5+请参考另一篇博客：如何在Vue项目里面使用Html5+

一、提取图片中的文字

对于文字识别的技术，百度OCR技术可以说是非常厉害了，不仅可以满足我们文字识别的功能，还有其它各种各样的识别功能。以下是从官网的部分截图，文档也是比较齐全的，所以我们在此使用百度OCR技术。
对于使用申请可以参考以下博客：
参考博客： https://blog.csdn.net/cyan_soul/article/details/109207114
百度OCR官网： https://ai.baidu.com/ai-doc/OCR/1k3h7y3db

1.1 在这个页面的主要操作是把上个页面裁剪好的图片展示出来，并且把图中文字识别出来并展示在输入框内，在页面初始化的时候我们就要调用百度文字识别接口，来识别我们图片中的文字。在文字展示的区域，用户还可以点击编辑按钮，来进行手动修改

html代码

<template>
  <div>
    <van-image class="scan_img" :src="imageUrl" alt="">
    </van-image>
    <div class="border-style scan">
      <div class="scan_textarea">
        <van-field
          v-model="ingredient"
          autosize
          rows="4"
          :readonly="ingredientFlag"
          type="textarea"
        />
      </div>
      <div class="scan_btn">
        <van-button @click="analysis">解析</van-button>
        <br>
        <van-button @click="ingredientFlag = false" >
          编辑
        </van-button>
      </div>
    </div>
  </div>
</template>

1.2 js代码

  setup() 
    const  proxy  = getCurrentInstance();
    const state = reactive(
      imageUrl: '', // 拍照图片地址
      ingredient: '', // 扫描内容
      ingredientFlag: true, // 是否只读
    );
    onMounted(async () => 
      // 获取路由以及参数
      const params = proxy.$router.currentRoute.value.query;
      // 显示图片
      state.imageUrl = params.imgUrl;
      // 请求文字扫描接口
      proxy.$client.accurateBasic(state.imageUrl).then(function(result) 
        // 读取到的内容为空
        if (result.words_result_num === 0) 
          return;
        
        // 分析结果
        const wordsResult = result.words_result;
        // 循环读取扫描内容
        for(let index in wordsResult) 
          state.ingredient += `$wordsResult[index].words\\n`;
        
      ).catch(() => 
        // 如果发生网络错误
        proxy.$toast('网络不流畅');
      );
    );
    return 
      ...toRefs(state),
    ;
  ,

1.3 页面图

在这我们已经成功获取到了图片中的文字，接下的业务操作就是要根据实际需求进行调用了，在此不再赘述。

二、上一篇讲述如何裁剪图片