19 changed files with 599 additions and 13 deletions
|
After Width: | Height: | Size: 364 B |
@ -0,0 +1,36 @@ |
|||
|
|||
|
|||
export const ocrAction = async (filePath) => { |
|||
wx.showLoading({ |
|||
title: '正在处理', |
|||
}) |
|||
|
|||
// TODO 将 tempFilePath 上传到 CDN 得到 url
|
|||
let img_url = 'http://192.168.1.144:9000/mzjzf/身份反.jpg' |
|||
// 实现上传到 cdn 的代码, 将得到的 url 写到 img_url 中
|
|||
|
|||
// 调用服务市场接口 https://fuwu.weixin.qq.com/service/detail/000ce4cec24ca026d37900ed551415
|
|||
try { |
|||
await wx.serviceMarket.invokeService({ |
|||
api: 'OcrAllInOne', |
|||
service: 'wx79ac3de8be320b71', |
|||
data: { |
|||
img_url, |
|||
data_type: 3, |
|||
ocr_type: 1, // 详细见文档
|
|||
} |
|||
}) |
|||
wx.hideLoading() |
|||
} catch (e) { |
|||
wx.hideLoading() |
|||
throw e |
|||
} |
|||
} |
|||
|
|||
export const takePhoto = async (tempFilePath) => { |
|||
if(tempFilePath){ |
|||
return ocrAction(tempFilePath) |
|||
} |
|||
const filePath = await chooseImage() |
|||
return ocrAction(filePath) |
|||
} |
|||
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 233 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,212 @@ |
|||
import { |
|||
ocrAction, |
|||
} from '../../../../ocr.js' |
|||
|
|||
const chooseImage = async () => { |
|||
return new Promise((resolve, reject) => { |
|||
wx.chooseMedia({ |
|||
count: 1, |
|||
sizeType: ['original','compressed'], |
|||
sourceType: ['album'], |
|||
mediaType:['image'], |
|||
success: (res) => { |
|||
console.log(res); |
|||
resolve(res.tempFiles[0].tempFilePath) |
|||
}, |
|||
fail: (res) => { |
|||
reject(new Error(`选择图片失败: ${res.errMsg}`)) |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
Page({ |
|||
data: { |
|||
title: '身份证识别', |
|||
skipphotoStatus: "0", |
|||
flash: true, |
|||
bottom: 125, |
|||
windowWidth: 300, |
|||
touchPadding: 36, |
|||
windowHeight: 200, |
|||
isShowImage: true, |
|||
showCamera: false, |
|||
path: '', |
|||
cameraAuth: true, |
|||
top: 386, |
|||
left: 24, |
|||
width: 666, |
|||
height: 464 |
|||
}, |
|||
onLoad(opt) { |
|||
wx.setNavigationBarTitle({ |
|||
title: this.data.title |
|||
}) |
|||
this.initData() |
|||
}, |
|||
showTool() { |
|||
this.setData({ |
|||
showCamera: true |
|||
}) |
|||
}, |
|||
error(e) { |
|||
console.log('camera加载失败') |
|||
this.setData({ |
|||
cameraAuth: false |
|||
}) |
|||
}, |
|||
handleSetting() { |
|||
// 对用户的设置进行判断，如果没有授权，即使用户返回到保存页面，显示的也是“去授权”按钮；同意授权之后才显示保存按钮
|
|||
if (!e.detail.authSetting['scope.camera']) { |
|||
wx.showModal({ |
|||
title: '', |
|||
content: '若不打开授权，则无法拍照！', |
|||
showCancel: false |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
cameraAuth: true |
|||
}) |
|||
} |
|||
}, |
|||
initData() { |
|||
wx.getSystemInfo({ |
|||
success: res => { |
|||
const ios = !!(res.system.toLowerCase().search('ios') + 1) |
|||
const model = res.model >= 'iPhone X' |
|||
let rate = res.windowHeight < 800 ? (res.windowHeight - 110) / 698 : 1 |
|||
let bottom = this.data.bottom * rate |
|||
let globalStatusBarHeight = res.statusBarHeight ? res.statusBarHeight * 2 : 0 |
|||
let top = (this.data.top + globalStatusBarHeight) |
|||
let temp = ((top - globalStatusBarHeight) * rate - 88 - 48 - 60) |
|||
if (temp < 20) { |
|||
top = (60 + 20 + 88 + 48) / rate + globalStatusBarHeight |
|||
bottom = bottom - (20 - temp) * rate |
|||
} |
|||
this.setData({ |
|||
globalStatusBarHeight: globalStatusBarHeight, |
|||
globalIos: true, |
|||
bottom: bottom, |
|||
touchPadding: this.data.touchPadding * rate, |
|||
top: top * rate, |
|||
height: (this.data.height * rate / 4) * 4, |
|||
windowWidth: res.windowWidth, |
|||
windowHeight: res.windowHeight, |
|||
}) |
|||
}, |
|||
}) |
|||
}, |
|||
|
|||
//改变是是否闪光
|
|||
changeFlash() { |
|||
this.setData({ |
|||
flash: !this.data.flash |
|||
}) |
|||
}, |
|||
goPre() { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
async chooseImg(e) { |
|||
chooseImage() |
|||
.then(ocrAction) |
|||
.catch(e => { |
|||
console.error(e) |
|||
console.error('因为没有真的上传图片，所以走到出错的逻辑里了') |
|||
wx.showToast({ |
|||
title: '出错啦...', |
|||
icon: 'error' |
|||
}) |
|||
}) |
|||
}, |
|||
takePhotoAction(e) { |
|||
this.setData({ |
|||
isShowImage: true, |
|||
}) |
|||
const ctx = wx.createCameraContext() |
|||
ctx.takePhoto({ |
|||
quality: 'high', //高质量
|
|||
success: (res) => { |
|||
this.loadTempImagePath(res.tempImagePath); |
|||
}, |
|||
}) |
|||
}, |
|||
cancel() { |
|||
wx.navigateBack() |
|||
if (this._cb) { |
|||
this._cb(this._callbackId, 'cancel') |
|||
} |
|||
}, |
|||
loadTempImagePath(filePath) { |
|||
let that = this |
|||
let { |
|||
windowWidth, |
|||
windowHeight |
|||
} = this.data |
|||
let rate = windowWidth / 375 |
|||
let image_x = (that.data.left / 2) * rate; |
|||
let image_y = ((that.data.top / 2)) * rate; |
|||
let image_width = (375 - 2 * that.data.left / 2) * rate; |
|||
let image_height = (that.data.height / 2) * rate; |
|||
// (image_height < 700) && (image_height > 380) && (image_height = 380)
|
|||
wx.getImageInfo({ |
|||
src: filePath, |
|||
success(res) { |
|||
that.canvas = wx.createCanvasContext("image-canvas", that) |
|||
//过渡页面中，图片的路径座标和大小
|
|||
that.canvas.drawImage(filePath, 0, 0, that.data.windowWidth, that.data.windowHeight) |
|||
wx.showLoading({ |
|||
title: '数据处理中...', |
|||
icon: 'loading', |
|||
duration: 10000 |
|||
}) |
|||
// 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定
|
|||
that.canvas.setStrokeStyle('rgba(0, 0, 0, 0)') |
|||
that.canvas.strokeRect(image_x, image_y, image_width, image_height) |
|||
that.canvas.draw() |
|||
setTimeout(function () { |
|||
wx.canvasToTempFilePath({ //裁剪对参数
|
|||
canvasId: "image-canvas", |
|||
x: image_x, //画布x轴起点
|
|||
y: image_y, //画布y轴起点
|
|||
width: image_width, //画布宽度
|
|||
height: image_height, //画布高度
|
|||
destWidth: image_width, //输出图片宽度
|
|||
destHeight: image_height, //输出图片高度
|
|||
success: function (res) { |
|||
that.setData({ |
|||
image: res.tempFilePath, |
|||
isShowImage: false |
|||
}) |
|||
wx.hideLoading() |
|||
ocrAction(res.tempFilePath) |
|||
.then((result) => { |
|||
that.success(result) |
|||
}) |
|||
.catch((e) => { |
|||
that.setData({ |
|||
isShowImage: true |
|||
}) |
|||
console.error('因为没有真的上传图片，所以走到出错的逻辑里了') |
|||
wx.showToast({ |
|||
title: '出错啦...', |
|||
icon: 'loading' |
|||
}) |
|||
}) |
|||
}, |
|||
fail: function (e) { |
|||
wx.showToast({ |
|||
title: '出错啦...', |
|||
icon: 'loading' |
|||
}) |
|||
} |
|||
}); |
|||
}, 1000); |
|||
} |
|||
}) |
|||
}, |
|||
success(e) { |
|||
console.error('success', e) |
|||
}, |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"navigationStyle": "custom" |
|||
} |
|||
@ -0,0 +1,113 @@ |
|||
<view style="width:750rpx;height:100vh"> |
|||
<!-- 这是背景遮罩 --> |
|||
<canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" style='position:fixed;top:0rpx;width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas> |
|||
<camera wx:if="{{cameraAuth}}" flash="{{flash ? 'on' : 'off'}}" bindinitdone="showTool" mode="normal" device-position="back" binderror="error" style="position:fixed;top:0rpx;width: 100%; height: 100vh;"> |
|||
<cover-view wx:if="{{showCamera}}" style="display: flex; height: 100vh; flex-direction: column;"> |
|||
<cover-view style="height:{{top}}rpx;" class="header bg-cover"> |
|||
</cover-view> |
|||
<cover-view class="main-container"> |
|||
<cover-view style="height: {{height}}rpx;" class="container-center"> |
|||
</cover-view> |
|||
<cover-view style="flex: 0 0 {{left}}px;" class="container-left bg-cover"></cover-view> |
|||
<cover-view style="flex: 0 0 {{left}}px;" class="container-right bg-cover"></cover-view> |
|||
</cover-view> |
|||
<cover-view class="footer bg-cover"> |
|||
</cover-view> |
|||
</cover-view> |
|||
<cover-view wx:if="{{showCamera}}" style="position:fixed; top:0rpx; display: flex; height: 100vh; flex-direction: column;"> |
|||
<cover-view style="height:{{top}}rpx;" class="header"> |
|||
<!-- <cover-view wx:if="{{!cameraAuth}}"><Button bindopensetting='handleSetting' style="color:#000" open-type="openSetting">开启摄像头授权</Button></cover-view> --> |
|||
<cover-view style="padding-top:{{globalStatusBarHeight}}rpx" class="title"> {{title}}</cover-view> |
|||
<cover-image wx:if="{{cameraAuth}}" bindtap="changeFlash" style="margin-top:60rpx" class="flash btn-click" src="../../image/{{flash ? 'ScanCode_Flash@3x' : 'ScanCode_FlashClose@3x'}}.png"> </cover-image> |
|||
</cover-view> |
|||
<cover-view class="main-container"> |
|||
<cover-view wx:if="{{cameraAuth}}" style="height: {{height}}rpx;" class="container-center"> |
|||
<cover-view class="column"> |
|||
<cover-image class="frame" src="../../image/ScanCode_Frame.png"> </cover-image> |
|||
<cover-image style="transform: rotate(90deg);" class="frame" src="../../image/ScanCode_Frame.png"> </cover-image> |
|||
</cover-view> |
|||
<cover-view class="bottom-column"> |
|||
<cover-image style="transform: rotate(270deg);" class="frame" src="../../image/ScanCode_Frame.png"> </cover-image> |
|||
<cover-image style="transform: rotate(180deg);" class="frame" src="../../image/ScanCode_Frame.png"> </cover-image> |
|||
</cover-view> |
|||
</cover-view> |
|||
<cover-view wx:else style="height: {{height}}rpx;" class="no-authwording bg-cover"> |
|||
<!-- <button style="line-height: 45px;height:45px; padding-left: 14px;padding-right: 14px" type="default" open-type="openSetting" bindopensetting='handleSetting' >点击授权 </button> --> |
|||
<cover-view style="position:relative; top:-45px;" class="touch-wording">暂无权限访问摄像头，请去小程序设置中授权打开摄像头</cover-view> |
|||
</cover-view> |
|||
<cover-view style="flex: 0 0 {{left}}px;" class="container-left"></cover-view> |
|||
<cover-view style="flex: 0 0 {{left}}px;" class="container-right"></cover-view> |
|||
</cover-view> |
|||
<cover-view class="footer"> |
|||
<cover-view wx:if="{{cameraAuth}}" class="frame-wording">拍摄要求：清晰完整，避免缺边、模糊、反光。</cover-view> |
|||
<!-- <cover-view class="touch-wording">轻触拍照</cover-view> --> |
|||
<cover-view class="tool-container"> |
|||
<!-- <cover-view wx:if="{{cameraAuth}}" style="margin-bottom: {{touchPadding}}px" class="touch-wording">轻触拍照</cover-view> --> |
|||
<cover-view class="img-container"> |
|||
<cover-image bindtap="goPre" class="close tool-icon btn-click" src="../../image/ScanCode_Close@3x.png"> </cover-image> |
|||
<cover-image bindtap="takePhotoAction" class="cam tool-icon btn-click" src="../../image/ScanCode_Cam@3x.png"> </cover-image> |
|||
<!-- <button style="line-height: 45px;height:45px; padding-left: 14px;padding-right: 14px" type="default" open-type="openSetting" bindopensetting='handleSetting' >点击授权 </button> --> |
|||
<cover-image bindtap="chooseImg" class="pic tool-icon btn-click" src="../../image/ScanCode_Pic@3x.png"> </cover-image> |
|||
</cover-view> |
|||
<cover-view style="height: {{bottom}}px" class="tool-blank"></cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
<!-- <cover-view ></cover-view> --> |
|||
</cover-view> |
|||
</camera> |
|||
<cover-view wx:if='{{!isShowImage}}' class="show-img"> |
|||
<cover-view style="display: flex; height: 100vh; flex-direction: column;"> |
|||
<cover-view style="height:{{top}}rpx;" class="header"> |
|||
</cover-view> |
|||
<cover-view class="main-container"> |
|||
<cover-view style="height: {{height}}rpx;" class="container-center"> |
|||
<cover-image class="photo" src="{{image}}"></cover-image> |
|||
</cover-view> |
|||
<cover-view style="flex: 0 0 {{left}}px;" class="container-left"></cover-view> |
|||
<cover-view style="flex: 0 0 {{left}}px;" class="container-right"></cover-view> |
|||
</cover-view> |
|||
<cover-view class="footer"> |
|||
</cover-view> |
|||
<!-- <cover-view ></cover-view> --> |
|||
</cover-view> |
|||
</cover-view> |
|||
<view wx:if="{{!cameraAuth}}" style="position:fixed;top:0rpx;width: 100%; height: 100vh;background-color: #7f7f7f"> |
|||
<view style="display: flex; height: 100vh; flex-direction: column;"> |
|||
<view style="height:{{top}}rpx;" class="header"> |
|||
</view> |
|||
<view class="main-container"> |
|||
<view style="height: {{height}}rpx;" class="container-center"> |
|||
</view> |
|||
<view style="flex: 0 0 {{left}}px;" class="container-left"></view> |
|||
<view style="flex: 0 0 {{left}}px;" class="container-right"></view> |
|||
</view> |
|||
<view class="footer"> |
|||
</view> |
|||
</view> |
|||
<view style="position:fixed; top:0rpx; display: flex; height: 100vh; flex-direction: column;"> |
|||
<view style="height:{{top}}rpx;" class="header"> |
|||
<!-- <view wx:if="{{!cameraAuth}}"><Button bindopensetting='handleSetting' style="color:#000" open-type="openSetting">开启摄像头授权</Button></view> --> |
|||
<view style="padding-top:{{globalStatusBarHeight}}rpx" class="title"> {{title}}</view> |
|||
</view> |
|||
<view class="main-container"> |
|||
<view style="position:relative; top:-45px;" class="touch-wording">暂无权限访问摄像头，请点击下方按钮设置权限</view> |
|||
</view> |
|||
<view style="text-align: center; width: 750rpx; position:relative; top:-25px;"> |
|||
<button type="primary" style="width: 90px" open-type="openSetting">设置</button> |
|||
</view> |
|||
<view class="footer"> |
|||
<view class="tool-container"> |
|||
<!-- <view wx:if="{{cameraAuth}}" style="margin-bottom: {{touchPadding}}px" class="touch-wording">轻触拍照</view> --> |
|||
<view class="img-container"> |
|||
<image bindtap="goPre" class="close tool-icon btn-click" src="../../image/ScanCode_Close@3x.png"> </image> |
|||
<image bindtap="takePhotoAction" class="cam tool-icon btn-click" src="../../image/ScanCode_Cam@3x.png"> </image> |
|||
<!-- <button style="line-height: 45px;height:45px; padding-left: 14px;padding-right: 14px" type="default" open-type="openSetting" bindopensetting='handleSetting' >点击授权 </button> --> |
|||
<image bindtap="chooseImg" class="pic tool-icon btn-click" src="../../image/ScanCode_Pic@3x.png"> </image> |
|||
</view> |
|||
<view style="height: {{bottom}}px" class="tool-blank"></view> |
|||
</view> |
|||
</view> |
|||
<!-- <view ></view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,214 @@ |
|||
.bg { |
|||
display: flex; |
|||
/* position: fixed; */ |
|||
top: 0; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.bg-cover { |
|||
background-color: #000; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.title { |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
line-height: 70rpx; |
|||
color: #fff; |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.flash { |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-left: 24px; |
|||
} |
|||
|
|||
/** flex布局 **/ |
|||
.main-container { |
|||
display: flex; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
flex: 1; |
|||
} |
|||
|
|||
.container-center { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-content: space-between; |
|||
flex: 1; |
|||
} |
|||
|
|||
.no-authwording { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-content: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
.container-left, |
|||
.container-right { |
|||
flex: 0 0 12px; |
|||
} |
|||
|
|||
.container-left { |
|||
order: -1; |
|||
} |
|||
|
|||
.column { |
|||
flex-basis: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.bottom-column { |
|||
flex-basis: 100%; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.close { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.pic { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.tool-icon { |
|||
align-items: center; |
|||
} |
|||
|
|||
.cam { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.frame { |
|||
display: inline-block; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
|
|||
.right-frame { |
|||
float: right; |
|||
} |
|||
|
|||
.bottom-tool { |
|||
/* width: 100%; */ |
|||
padding: 0rpx 42rpx; |
|||
position: fixed; |
|||
bottom: 225rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-top: 6rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.tool-container { |
|||
flex-basis: 100%; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
width: 750rpx; |
|||
height: 130px; |
|||
line-height: 74px; |
|||
} |
|||
|
|||
.img-container { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
width: 750rpx; |
|||
height: 74px; |
|||
line-height: 74px; |
|||
} |
|||
|
|||
.frame-wording { |
|||
justify-content: flex-start; |
|||
width: 750rpx; |
|||
padding-top: 15px; |
|||
text-align: center; |
|||
opacity: 0.5; |
|||
font-family: PingFangSC-Regular; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.tool-blank { |
|||
width: 750rpx; |
|||
} |
|||
|
|||
.cam-container { |
|||
width: 538rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.close { |
|||
padding-left: 66px; |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
|
|||
.cam { |
|||
margin: 0 auto; |
|||
width: 74px; |
|||
height: 74px; |
|||
} |
|||
|
|||
.pic { |
|||
padding-right: 66px; |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
|
|||
.touch-wording { |
|||
width: 750rpx; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
/* padding-bottom: 36px; */ |
|||
color: rgba(255, 255, 255, 0.90); |
|||
} |
|||
|
|||
.show-img { |
|||
position: fixed; |
|||
top: 0; |
|||
background-color: #000; |
|||
width: 750rpx; |
|||
height: 750vh; |
|||
} |
|||
|
|||
.photo { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.btn-click:active { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.choose-img-container { |
|||
position: fixed; |
|||
top: 0; |
|||
background-color: #000; |
|||
width: 750rpx; |
|||
height: 750vh; |
|||
line-height: 100%; |
|||
} |
|||
|
|||
.choose-img { |
|||
margin: auto 0; |
|||
width: 750rpx; |
|||
height: auto; |
|||
vertical-align: middle; |
|||
} |
|||
@ -1,6 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"ocr-navigator": "plugin://ocr-plugin/ocr-navigator" |
|||
}, |
|||
"navigationStyle": "custom" |
|||
|
|||
|
|||
Loading…
Reference in new issue