#小程序云开发挑战赛#-ai视觉测试-为了梦
代码链接 ：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;
}
体验小程序
