实现ocr上传图片识别各类证件

最新推荐文章于 2023-11-14 15:12:00 发布

置顶

细雨、

最新推荐文章于 2023-11-14 15:12:00 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/foreverlailai/article/details/115980527

版权

这篇博客主要介绍如何实现OCR（Optical Character Recognition）技术来识别上传的图片，特别是各类证件。首先，文件上传与后端进行正常交互，获取图片路径或直接通过浏览器访问的地址。接着，说明OCR可以接受imgdata（base64格式）或imgUrl形式的图片，转换方法包括将图片地址转为base64。虽然OCR总是返回成功，但要注意它可能在某些情况下无法提供有效识别结果。

摘要由CSDN通过智能技术生成

一：正常的文件上传还是正常的和后端联调后端肯定是会告诉你返回一个图片路径的不返回的话也是自己去拼接的图片链接地址也就是能直接在浏览器打开的地址这里就不多做其他解释了

二：ocr能识别imgdata（也就是图片base64的形式）也能imgUrl的形式具体如下：
当是base64的时候你需要手动把图片地址转为base如下方法

<canvas id="canvas" style="display: none"></canvas>


 //一定要设置为let，不然图片不显示
      let image = new Image();

      //解决跨域问题
      image.setAttribute("crossOrigin", "anonymous");

      let imageUrl = this.imgurl//这里的是你的图片地址
      image.src = imageUrl;
      //image.onload为异步加载
      image.onload = () => {
        let that = this;
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 0.8;
        //这里的dataurl就是base64类型