代码链接 ：https://github.com/zzjdreams/ai-vision/tree/dev

演示视频链接：https://v.qq.com/x/page/o31493t081j.html

设计流程图

项目描述：

应用服务：引入讯飞开放平台的接口服务中的手写体文字识别和中英互译
数据库存储：小程序的云开发中的cdn存储和数据库
三方插件：crypto-js

项目截图：

• 选择应用

初始时展示

点击图片或点击下方上传图片进行图片的上传

图片识别成功后下方会出现识别出来的文字

打开用户页面展示查询记录

点击图片链接查看图片

长按列表进行删除操作

部分代码展示

//获取讯飞服务中的手写体识别
// 组装请求头
function getReqHeader() {
  let xParamStr = getXParamStr()
  let xCheckSum = CryptoJS.MD5(config.apiKey + ts + xParamStr).toString()
  return {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
    'X-Appid': config.appid,
    'X-CurTime': ts + "",
    'X-Param': xParamStr,
    'X-CheckSum': xCheckSum
  }
}
// 获取当前时间戳
let ts = parseInt(new Date().getTime() / 1000);

// 组装业务参数
function getXParamStr() {
  let xParam = {
    language: 'cn|en'
  }
  return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(xParam)))
}
export function requestUrl(img){
  return new Promise((r,j)=>{
    var postBody={
      image:img
    }
    wx.request({
      url: config.hostUrl,
      header:getReqHeader(),
      data:postBody,
      method:'POST',
      success(res){
        // console.log(res);
        // console.log(res.data.data.block[0].line);
        r(res);
      },
      fail(res){
        console.log(res);
        j(res);
      }
    });
  })
}

获取讯飞中翻译服务

export function setTransform(text,from,to){
  transVar.text=text;
  transVar.from=from;
  transVar.to=to;
  postBody = getPostBody(transVar.text, transVar.from, transVar.to);
  digest = getDigest(postBody);
  options. headers= {
    'Content-Type': 'application/json',
    'Accept': 'application/json,version=1.0',
    'Host': config.host,
    'Date': date,
    'Digest': digest,
    'Authorization': getAuthStr(date, digest)
  };
}
// 请求获取请求体签名
function getDigest(body) {
  return 'SHA-256=' + CryptoJS.enc.Base64.stringify(CryptoJS.SHA256(JSON.stringify(body)))
}

// 鉴权签名
function getAuthStr(date, digest) {
  let signatureOrigin = `host: ${config.host}\ndate: ${date}\nPOST ${config.uri} HTTP/1.1\ndigest: ${digest}`
  let signatureSha = CryptoJS.HmacSHA256(signatureOrigin, config.apiSecret)
  let signature = CryptoJS.enc.Base64.stringify(signatureSha)
  let authorizationOrigin = `api_key="${config.apiKey}", algorithm="hmac-sha256", headers="host date request-line digest", signature="${signature}"`
  return authorizationOrigin
}
// 生成请求body
function getPostBody(text, from, to) {
  let digestObj = {
  //填充common
    common: {
      app_id: config.appid
    },
  //填充business
    business:{
      from: from,
      to : to
    },
  //填充data
    data:{
      text: CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(text))
    }
  }
  return digestObj
}
export function requestUrl(){
  return new Promise((r,j)=>{
    wx.request({
      url: config.hostUrl,
      method:'POST',
      header:options.headers,
      data:postBody,
      success(res){
        // console.log(res);
        r(res);
      },
      fail(res){
        // console.log(res);
        j(res);
      }
    })
  })
}

在页面中使用函数

handWrite.requestUrl(img).then(
          res => {
            // console.log(res);
            if (res.data.data) {
              logUtil.hideLoading();
              logUtil.showToast('图片识别成功');
              that.data.line = res.data.data.block[0].line;
              that.setData(that.data);
              that.data.line.forEach(item => {
                // console.log(item)
            
  });
              if( app.cloudParameter.db){
                wx.cloud.uploadFile({
                  cloudPath:`ocrImg/${new Date().valueOf()}.png`,
                  filePath: that.data.imgSrc,
                  success(res){
                    // console.log(that.analyzeLine(that.data.line));
                    fileID=res.fileID;
                    app.cloudParameter.collection.add({
                      data:{
                        // openid:app.globalData.userMsg.openid,
                        date:new Date(),
                        type:0,
                        source:fileID,
                        destination:that.analyzeLine(that.data.line)
                      }
                    });
                  },
                  fail(res){
                    console.log(res);
                  }
                })
              }
            }
          },
          res => {
            console.log(res);
            logUtil.hideLoading();
            logUtil.showToast('文件上传失败');
          });

使用翻译函数

ost.requestUrl().then((res)=>{
        logUtil.log(res);
        if(res.data.data){
          this.setData({
            translateText:res.data.data.result.trans_result.dst
          });
          if(wx.cloud){
            app.cloudParameter.collection.add({
              data:{
                // openid:app.globalData.userMsg.openid,
                date:new Date(),
                type:1,
                source:that.data.showText,
                destination:that.data.translateText
              }
            });
          }
          logUtil.showToast('翻译成功');
        }   
        logUtil.hideLoading(); 
      },res=>{
        console.log(res);
        logUtil.showToast('翻译失败');
        logUtil.hideLoading(); 
      })

其中的上传数据库的函数为

app.cloudParameter.collection.add({
              data:{
                // openid:app.globalData.userMsg.openid,
                date:new Date(),
                type:1,
                source:that.data.showText,
                destination:that.data.translateText
              }
            });

查询数据库信息

    app.cloudParameter.collection.orderBy(
        "date","desc"
      ).get()
      .then(res=>{
        // console.log(res.data);
        this.setData(({
          dbInfo:res.data
        }))
      // console.log(JSON.stringify(this.data.dbInfo) )
      })
      .catch(res=>{
        console.log(res);
      })

wxss

添加抖动效果

/* 抖动效果实现类 */
@keyframes del-dou{
  0%{
    transform: rotate(0deg);
  }
  10%{
    transform: rotate(-4deg);
  }
  15%{
    transform: rotate(4deg);
  }
  20%{
    transform: rotate(-8deg);
  }
  25%{
    transform: rotate(8deg);
  }
  30%{
    transform: rotate(-4deg);
  }
  35%{
    transform: rotate(4deg);
  }
  40%{
    transform: rotate(0deg);
  }
}

.deletItem{
  animation: del-dou 1s 0s 3;
}

体验小程序