小程序 wxml selectable_小程序 | 实现文字识别和一键复制

文字识别

今天，小白和大家分享一个自己做的文字识别小程序。

那么如何实现文字识别和一键复制这两个功能呢？

单靠我们自己是很难实现的，所以在这里我们可以调用百度官方的接口实现文字识别。

百度Ai开放平台：https://ai.baidu.com/。

这里大家可以自行创建应用，小白就不多加赘述。

效果展示：可以拍摄照片和选择相册中的照片，实现文字识别和一键复制功能，实现微信之父所说的："扫完即用，用完即走"。

效果小程序

js文件主要代码，逻辑实现

Page({  data: {    image: "",    access_token: "",    tempFilePaths: "",    final_text: ""  },   //把识别成功的文字复制到剪切板中  copy: function (e) {    var that = this;    wx.setClipboardData({      //去找上面的数据      data: that.data.final_text,      success: function (res) {        wx.showToast({          title: '复制成功',        });      }    });  },  load_image() {    //创建文件管理对象    var FSM = wx.getFileSystemManager();    var image = this.data.image;    var that = this;    //从本地相册选择图片或使用相机拍照    wx.chooseImage({      count: 1,      //原图或是压缩图      sizeType: ['original', 'compressed'],       //sourceType: ['album', 'camera']：从相机选择图片和使用相机拍摄      sourceType: ['album', 'camera'],      success(res) {         //tempFilePaths是http/https开头的路径        const tempFilePaths = res.tempFilePaths        var tempFiles_size = res.tempFiles[0].size;        console.log(tempFilePaths)        console.log(tempFiles_size)        //百度ai开放平台的图片不能超过4MB        if (tempFiles_size > 4096 * 1024) {          wx.showToast({            title: '图片过大了呢',            icon: 'none',            mask: true,            duration: 2000          })        }        else {          wx.showToast({            title: '很快就好了呢',            icon: 'none',            mask: true,            duration: 2000          })          //设置上传图片的路径          that.setData({            tempFilePaths: tempFilePaths          })          //手机上传的图片是http或https开头的，这里我们转换成base64编码的格式          FSM.readFile({            filePath: res.tempFilePaths[0],            encoding: "base64",            success: function (data) {              image = data.data              //image就是base64编码后的格式              that.setData({                image: image              })            }          })          //调用win_access_token函数          that.win_access_token()        }      }    })  },  //获取access_token  win_access_token() {    var that = this;    var access_token = this.data.access_token;    wx.request({      //这里自行添加自己创建应用的AppID和Secret Key      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=&client_secret=',      success(res) {        access_token = res.data['access_token']        that.setData({          access_token: access_token        })        console.log(access_token)        that.win_text()      }    })  },  win_text() {    var that = this;    var final_text = this.data.final_text;    var image = this.data.image;    var access_token = this.data.access_token;    wx.request({      url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic',      data: {        access_token: access_token,        image: this.data.image      },      header: { 'Content-Type': 'application/x-www-form-urlencoded' },      method: 'POST',      success(res) {        console.log(res.data)        //final_text拼接图片识别后和的所有文字        for (var i = 0; i < res.data.words_result.length; i++) {          final_text += res.data.words_result[i]['words']        }        console.log(final_text)        that.setData({          final_text: final_text        })        wx.showToast({          title: '好啦，快来使用一键复制',          icon: 'none',          mask: true,          duration: 1500        })      }    })  },  //每次打开页面时，都将final_text清空  onShow: function () {    this.setData({       //识别的文字内容        final_text: ""    })  },})

json文件，标题为文字识别

{  "navigationBarTitleText": "查看启动日志",  "usingComponents": {}}

wxml文件，实现界面布局

<view class="page__bd page__bd_spacing">  <button class="weui-btn" style="background-color: #2395e7;margin-top:50% ;" bindtap="load_image" type="primary">上传图片呢button>view><button class="weui-btn mini-btn" style="background-color: #2395e7;  float: right;" bindtap="copy" type="primary" size="mini">一键复制button><text class='final_text' selectable='true'>{{final_text}}text>

wxss文件，实现界面美化

/* pages/home/home.wxss */.final_text{  font-size:15px;  font-family:SimSun;  display:absolute;}

完~