微信通过拍照,提取签名信息,通过上景减下景得到纯白底色
js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
TabList: [
{name: '1. 拍照'},
{name: '2. 预览上传'}
],
TabCur: 0,
Snap: false,
Preview: false,
img: '',
sourceKey: '',
calImg: '',
weight:50,
imgList: [],
},
onLoad: function () {
},
upImg:function () {
var that = this;
if (that.data.imgList.length != 0) {
that.setData({
imgList: that.data.imgList.concat(that.data.calImg)
})
} else {
that.setData({
imgList: that.data.calImg
})
}
let base64 = wx.getFileSystemManager().readFileSync(that.data.imgList, "base64");
let img = `data:base64,${base64}`;
console.log(base64);
wx.request({
url: app.globalData.globalReqUrl +'/api/sign/base64',
data:{
photo:base64,
},
method:'POST',
header:{
'content-type':'application/x-www-form-urlencoded',
'token':app.globalData.token
},
success:function(res){
console.log(res);
let error = null;
if(res.data.status!="200"){
error = "系统错误 请稍后尝试"
}
if(res.data.status=="200"){
}
if(error !== null){
wx.showToast({
title: error,
icon:'none',
duration:2000
})
}else{
wx.showToast({
title:'上传成功',
icon:'success',
duration:1000,
success:function(){
setTimeout(function(){
wx.navigateBack({
delta: 2,
})
},1000);
}
})
}
},
fail:function(res){
console.log(res);
}
})
}
,
NumSteps() {
this.setData({
TabCur: this.data.TabCur == this.data.TabList.length - 1 ? 0 : this.data.TabCur + 1
})
},
Navigate(e) {
var target = e.currentTarget.dataset.index;
if (target < this.data.TabCur){
this.setData({
TabCur: target
})
}
},
OpenCamera() {
this.setData({
Snap: true
})
},
Cancel() {
this.setData({
Preview: false
})
},
SaveImg() {
this.setData({
Snap: false,
Preview: false
})
this.RemoveBackground();
this.NumSteps();
},
TakePhoto() {
const ctx = wx.createCameraContext()
const listener = ctx.onCameraFrame((frame) => {
console.log(frame)
})
ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log(res)
this.setData({
img: res.tempImagePath,
Preview: true
})
listener.stop({
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
}
})
},
fail: (err) => {
console.log(err)
}
})
},
TextChange(e) {
this.setData({
sourceKey: e.detail.value
})
},
WeightChange(e) {
this.setData({
calImg: '',
weight: e.detail.value
})
this.RemoveBackground();
},
WeightChanging(e) {
},
RemoveBackground(){
const ctx = wx.createCanvasContext("myCanvas");
var that = this;
wx.getImageInfo({
src: this.data.img,
success: function (res) {
console.log(res)
ctx.drawImage(that.data.img, 0, 0, res.width, (res.width / 1080) * 960, 0, 0, 1080, 960);
ctx.draw(false, () => {
wx.canvasGetImageData({
canvasId: "myCanvas",
x: 240,
y: 221,
width: 600,
height: 600,
success: (res) => {
console.log(res)
var length = 600 * 300 * 4;
var calData = new Uint8ClampedArray(length)
var weight = that.data.weight / 50
for(var i = 0; i < length; i++){
calData[i] = (i % 4 === 3 ? 255 : (255 - (res.data[i + length] - res.data[i])) * 2 - (188 * weight));
}
wx.canvasPutImageData({
canvasId: "myCanvas2",
data: calData,
x: 0,
y: 0,
width: 600,
height: 300,
success: (res) => {
console.log(res)
wx.canvasToTempFilePath({
width: 600,
height: 300,
canvasId: "myCanvas2",
success: function(res) {
console.log(res)
that.setData({
calImg: res.tempFilePath,
})
}
});
},
fail: res => {
console.log(res)
},
})
},
fail: res => {
console.log(res)
},
})
})
}
})
}
})
wxml
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item {{index > TabCur?'':'text-red'}}" bindtap="Navigate" data-index="{{index}}" wx:for="{{TabList}}" wx:key="index">
<text class="cuIcon-{{index > TabCur ? 'title' : 'roundcheckfill'}}" data-index="{{index + 1}}"></text> {{item.name}}
</view>
</view>
</view>
<block wx:if="{{TabCur==0}}">
<block wx:if="{{!Snap}}">
<view class="bg-white margin-top padding">
<view class="margin-bottom">
<text>Step 1. 拍照</text>
</view>
<view class="image flex justify-center">
<image src="/images/upload_signature/lead2-1.png" mode="widthFix" style="width:70%"></image>
</view>
<view class="margin-top">
<text>将签名居中置于上半绿色方框中,文字底线需要和红色基准线对齐;</text>
</view>
<view class="margin-top">
<text>为保证最佳的识别效果,</text>
<text style="font-weight: bold">绿色方框内不能含有阴影;下半绿色方框是对照区,光线需和上半保持一致。</text>
</view>
</view>
<view class="padding flex flex-direction">
<button bindtap="OpenCamera" class="lg" style="width:100%">开始拍照</button>
</view>
</block>
<block wx:if="{{Snap}}">
<view class="camera_box">
<camera class="camera" wx:if="{{!Preview}}" device-position="back" flash="off" binderror="error">
<cover-view>
<cover-image src="/images/upload_signature/cover.png"></cover-image>
</cover-view>
</camera>
<image class="camera_preview" src="/images/upload_signature/cover.png" wx:if="{{Preview}}" mode="widthFix"></image>
<image class="camera_img" src="{{img}}" wx:if="{{Preview}}" mode="widthFix"></image>
<view class="action">
<view class="photo_btn" bindtap="TakePhoto" wx:if="{{!Preview}}">
<image src="/images/camera/snap.png" class="photo_btn"></image>
</view>
<view class="photo_btn" bindtap="Cancel" wx:if="{{Preview}}">
<image src="/images/camera/cancel.png" class="photo_btn"></image>
</view>
<view class="photo_btn" bindtap="SaveImg" wx:if="{{Preview}}">
<image src="/images/camera/confirm.png" class="photo_btn"></image>
</view>
</view>
</view>
</block>
</block>
<block wx:if="{{TabCur==1}}">
<form>
<view class="bg-white margin-top padding">
<text>Step 2. 预览上传</text>
</view>
<view class="bg-white padding">
<view class="flex justify-center">
<text>拖动滑条,直到清晰为止</text>
</view>
<view class="flex justify-center">
<slider style="width:100%" value="{{weight}}" bindchange="WeightChange" bindchanging="WeightChanging" min="0" max="100" activeColor='#0081FF' backgroundColor='#CCCCCC' block-size='12' block-color='#A10606' step="1"/>
</view>
<view class="image flex margin-bottom justify-center">
<image src="{{calImg}}" mode="widthFix" wx:if="{{calImg}}" style="width:70%; max-height: 300px"></image>
<view class="padding margin" wx:if="{{!calImg}}">
<text>正在生成签名,请稍等...</text>
</view>
</view>
<view class="flex justify-center">
<text>您拍摄的签名</text>
</view>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-green lg" bindtap="upImg" style="width:100%">提交</button>
</view>
</form>
</block>
<view style='width:0px; height:0px; overflow:hidden; transform:scale(0,0)'>
<canvas class="canvas" canvas-id="myCanvas"></canvas>
<canvas class="canvas2" canvas-id="myCanvas2"></canvas>
</view>