Picture/Text: Mi Shen
The WeChat applet provides universal print OCR recognition based on the applet. Simply put, the applet can take a photo or select a picture, and then the applet calls the interface to identify and return the recognition content.
Share this, the official demo of ocr.printedText, the main mini program, is relatively casual, and many details are mentioned in one stroke, so some friends may not understand it very well. Here we mainly share the two modes of WeChat applet cloud development and universal OCR recognition for image recognition into text. This is also a problem encountered by colleagues in development, so I will list it and share it as a demo.
The mini program provides several types of OCR recognition, such as ID card OCR recognition, bank card OCR recognition, driver's license OCR recognition, and general OCR recognition picture recognition. Everyone can draw inferences about this general recognition.
Demo preview:
It means uploading pictures. For this uploading pictures, the mobile phone supports taking pictures and selecting from the album.
Mini program upload interface
WXML button to select pictures.
上传图片 {
{item.text}}
JS part
// pages/upload/upload.jsPage({ /** * 页面的初始数据 */ data: { }, printText(){ wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths var filepath=encodeURI(tempFilePaths[0]) //把文件转换成文件流的形式 let buffer = wx.getFileSystemManager().readFileSync(filepath) console.log(filepath) wx.cloud.callFunction({ //调用云函数 upload name:'upload', data:{ //第一种上传到服务器方式 //imgUrl: encodeURI("https://www.toutiao.com/123.jpg") //第二种:文件流的方式 file:buffer }, complete:console.log }) } }) }, //更多内容不列举了})
There are two modes for image recognition ocr.printedText in the mini program. One is the url mode, which is relatively simple. There is also a local mode for uploading files. A file stream needs to be transferred and then the file stream is converted to base64
Mini program cloud function part
Corresponds to the upload cloud function part.
// 云函数入口函数exports.main = async (event, context) => { try { //第一种模式,获取服务器地址 if (event.imgUrl) { var result = await cloud.openapi.ocr.printedText({ type: 'photo', imgUrl: event.imgUrl }) //第二种模式,选择文件模式 } else { var result = await cloud.openapi.ocr.printedText({ type: 'photo', img: { contentType: 'image/png', value: new Buffer(event.file, 'base64') } }) } return result } catch (err) { return err }}
The complete structure is as follows:
The images we recognize are:
The final recognized text content is:
Of course, for other small program recognition, such as ID card OCR recognition, bank card OCR recognition, and driver's license OCR recognition, you can modify it yourself, and it's relatively simple. If you have any questions, please leave me a message. I think it’s good. Remember to follow Mi Shen. More exciting content will be shared in the future.