网页H5 Vue3使用腾讯身份证OCR识别

目录

1.新手指引

2.注册密匙

3.身份证识别文档及示例

4.身份证识别使用

5.封装成接口调用

6.前端调用(uniapp vue3)

---

1.新手指引

进入文字识别控制台注册账号及开通文字识别权限

文字识别 新手指引-文档中心-腾讯云

2.注册密匙

新键密匙保存得到对应的secretId和secretKey

登录 - 腾讯云

3.身份证识别文档及示例

身份证识别参数及调用：文字识别 身份证识别-服务端 API 文档-文档中心-腾讯云

java调用示例可以参考：Java-SDK 中心-腾讯云

在线测试身份证识别：登录 - 腾讯云

4.身份证识别使用

引入pom

  <!-- 版本在maven生效需要时间，如获取不到对应的版本，可以调低版本号 -->
        <dependency>
            <groupId>com.tencentcloudapi</groupId>
            <artifactId>tencentcloud-sdk-java-ocr</artifactId>
            <version>3.1.1195</version>
        </dependency>

创建OCR识别服务

填写对应刚刚创建的secretId和secretKey 运行main即可实现身份证识别

import com.tencentcloudapi.common.AbstractModel;
import com.tencentcloudapi.common.Credential;
import com.tencentcloudapi.common.exception.TencentCloudSDKException;
import com.tencentcloudapi.common.profile.ClientProfile;
import com.tencentcloudapi.common.profile.HttpProfile;
import com.tencentcloudapi.ocr.v20181119.OcrClient;
import com.tencentcloudapi.ocr.v20181119.models.IDCardOCRRequest;
import com.tencentcloudapi.ocr.v20181119.models.IDCardOCRResponse;

/**
 * 腾讯云OCR服务
 * @author laijiangfeng
 * @date 2025/2/13 15:30
 */
public class TencentOCRService {

    private static final String REGION = "ap-guangzhou"; // 区域

    private OcrClient client;

    public TencentOCRService(String secretId, String secretKey) {
        // 初始化客户端
        Credential cred = new Credential(secretId, secretKey);
        HttpProfile httpProfile = new HttpProfile();
        httpProfile.setEndpoint("ocr.tencentcloudapi.com"); // 接口地址
        ClientProfile clientProfile = new ClientProfile();
        clientProfile.setHttpProfile(httpProfile);
        client = new OcrClient(cred, REGION, clientProfile);
    }

    public String recognizeIDCardByImageBase64(String imageBase64, String cardSide) throws TencentCloudSDKException {
        // 构造请求参数
        IDCardOCRRequest req = new IDCardOCRRequest();
        req.setImageBase64(imageBase64);
        req.setCardSide(cardSide); // FRONT（正面）或 BACK（反面）

        // 调用接口
        IDCardOCRResponse resp = client.IDCardOCR(req);

        // 返回识别结果
        return AbstractModel.toJsonString(resp);
    }

    public String recognizeIDCardByUrl(String imageUrl, String cardSide) throws TencentCloudSDKException {
        // 构造请求参数
        IDCardOCRRequest req = new IDCardOCRRequest();
        req.setImageUrl(imageUrl);
        req.setCardSide(cardSide); // FRONT（正面）或 BACK（反面）

        // 调用接口
        IDCardOCRResponse resp = client.IDCardOCR(req);

        // 返回识别结果
        return AbstractModel.toJsonString(resp);
    }

    public static void main(String[] args) {
        TencentOCRService ocrService = new TencentOCRService("secretId", "secretKey");
        try {
            String result = ocrService.recognizeIDCardByUrl("https://ocr-demo-1254418846.cos.ap-guangzhou.myqcloud.com/card/IDCardOCR/IDCardOCR1.jpg", "FRONT");
            System.out.println(result);
        } catch (TencentCloudSDKException e) {
            e.printStackTrace();
        }
    }
}

5.封装成接口调用

编写密匙配置类TencentOCR

import lombok.Data;

/**
 * 腾讯身份证等OCR识别配置信息
 * @author laijiangfeng
 * @date 2025/2/13 15:09
 */
@Data
public class TencentOCR {

    private String secretId;

    private String secretKey;
}

配置配置文件yml或者properties ，这里示例使用的是shop.properties

#腾讯身份证等OCR识别
#腾讯OCR识别的secretId
shop.tencentOCR.secretId: xxxxsecretId
#腾讯OCR识别的secretKey
shop.tencentOCR.secretKey: xxxxsecretKey

创建ShopBasicConfig基类用于读取配置文件shop.properties的内容

@Data
@Component
@PropertySource("classpath:shop.properties")
@ConfigurationProperties(prefix = "shop")
public class ShopBasicConfig {

	/**
	 * 腾讯身份证识别等
	 */
	private TencentOCR tencentOCR;
}

创建ShopBeanConfig用于注册OCR识别bean到spring容器

@Configuration
@AllArgsConstructor
@ConditionalOnClass(ShopBasicConfig.class)
public class ShopBeanConfig {

	private final ShopBasicConfig shopBasicConfig;

	@Bean
	public TencentOCRService tencentOCRService() {
		TencentOCR tencentOCR = shopBasicConfig.getTencentOCR();
		return new TencentOCRService(tencentOCR.getSecretId(), tencentOCR.getSecretKey());
	}
}

编写OCR身份证请求参数

/**
 * @author laijiangfeng
 * @date 2025/2/14 11:44
 */
@Data
@Schema(description = "身份证识别参数")
public class OcrIdCardParam {

    /**
     * FRONT: 身份证正面
     * BACK: 身份证反面
     * 该参数如果不填，将为您自动判断身份证正反面。
     * 示例值：FRONT
     */
    @NotNull(message = "身份证正反面不能为空")
    @Schema(description = "身份证正反面" ,required=true)
    private String cardSide;

    /**
     * 身份证base64图片
     * 图片的 Base64 值。要求图片经Base64编码后不超过 7M，分辨率建议500*800以上，支持PNG、JPG、JPEG、BMP格式。建议卡片部分占据图片2/3以上。
     * 图片的 ImageUrl、ImageBase64 必须提供一个，如果都提供，只使用 ImageUrl。
     * 示例值：/9j/4AAQSkZJRg.....s97n//2Q==
     */
    @Schema(description = "身份证base64图片" ,required=true)
    private String imageBase64;

    /**
     * 身份证图片Url,传了url默认用url,不传用base64图片
     * 图片的 Url 地址。要求图片经Base64编码后不超过 7M，分辨率建议500*800以上，支持PNG、JPG、JPEG、BMP格式。建议卡片部分占据图片2/3以上。
     * 建议图片存储于腾讯云，可保障更高的下载速度和稳定性。
     * 示例值：https://ocr-demo-1254418846.cos.ap-guangzhou.myqcloud.com/card/IDCardOCR/IDCardOCR1.jpg
     */
    @Schema(description = "身份证图片Url" ,required=true)
    private String imageUrl;
}

编写OCR身份证识别接口

/**
 * ocr识别接口
 * @author laijiangfeng
 * @date 2025/2/13 16:24
 */
@RestController
@RequestMapping("/p/ocr")
@Tag(name = "ocr识别接口")
@AllArgsConstructor
public class OCRController {

    @Autowired
    private TencentOCRService ocrService;

    @PostMapping("/idcard")
    @Operation(description = "身份证识别接口")
    public ServerResponseEntity<?> recognizeIDCard(@RequestBody OcrIdCardParam ocrIdCardParam) {
        try {
            String result = ocrService.recognizeIDCardByImageBase64(ocrIdCardParam.getImageBase64(), ocrIdCardParam.getCardSide());
            JSONObject cardInfo = JSONObject.parseObject(result);
            return ServerResponseEntity.success(cardInfo);
        } catch (Exception e) {
            e.printStackTrace();
            return ServerResponseEntity.showFailMsg("识别失败: " + e.getMessage());
        }
    }
}

6.前端调用(uniapp vue3)

/**
 * 选择身份证照片
 */
const chooseIdCardImage = async () => {
  // 选择图片
  const res = await uni.chooseImage({
    count: 1,
    sourceType: ["album", "camera"],
  });

  if (res.tempFilePaths.length > 0) {
    const imagePath = res.tempFilePaths[0];

    // 将图片转换为 Base64
    const imageBase64 = await imageToBase64(imagePath);

    //默认识别正面
    const cardSide = 'FRONT';

    uni.showLoading({
      title: '识别中...',
      mask: true
    });
    // 调用后端接口
    idCardOcr(imageBase64, cardSide);

    uni.hideLoading();
  }
};

/**
 * 图片转成base64
 */
const imageToBase64 = async (imagePath) => {
  return new Promise((resolve, reject) => {
    // 将图片路径转换为 Blob 对象
    pathToBlob(imagePath)
      .then((blob) => {
        // 使用 FileReader 将 Blob 转换为 Base64
        const reader = new FileReader();
        reader.onload = () => {
          resolve(reader.result.split(",")[1]); // 获取 Base64 部分
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.readAsDataURL(blob);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

/**
 * 图片路径转成Blob 对象
 */
const pathToBlob = (imagePath) => {
  return new Promise((resolve, reject) => {
    // 使用 fetch 获取 Blob 对象
    fetch(imagePath)
      .then((response) => {
        if (response.ok) {
          return response.blob();
        } else {
          reject(new Error("图片加载失败"));
        }
      })
      .then((blob) => {
        resolve(blob);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

/**
 * 身份证识别
 */
const idCardOcr = (imageBase64, cardSide) => {
  let url = '/p/ocr/idcard'
  let method = 'POST'
  http.request({
    url,
    method,
    data: {
      imageBase64: imageBase64,
      cardSide: cardSide,
    }
  }).then((res) => {
    console.log('识别结果', res.data)
  })
};

chooseIdCardImage调取相机选择照片或者拍照

imageToBase64将图片转成base64格式图片

pathToBlob 将文件路径转成文件

idCardOcr 发送请求到后端接口获取身份证识别结果