前端电子签名
记录一下电子签名旋转并合并图片的是实现过程
昨天产品提了个需求,在操作流程上需要添加上用户签名,并且添加到图片上对应的位置.
下面说一下自己思路:
首先想到的就是canvas,因为之前的程序中已经使用过,所以签名很好搞,
首先是样式 html
<view class="signa">
<view class="btn">
<view class="cancel-btn" @click="clear">重写</view>
<view class="save-btn" @click="save">保存</view>
<view class="cancel-bth" @click="colse">关闭</view>
</view>
<canvas class="canvas" disable-scroll="true" :style="{ width: width + 'px', height: height + 'px' }" canvas-id="designature" @touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
</view>
css样式:此样式采用全屏暂时,需要的执行修改里面的height以及三个标签对应的margin-top
.signa { position: relative; overflow: hidden; background-color: #f1efef; height: 96vh; width: 100vw; .canvas { background-color: #ffffff; position: absolute; z-index: 9999; left: 50px; top: 6px; border: 1px solid #d6d6d6; } .btn { height: 96vh; position: absolute; font-size: 32rpx; .cancel-btn { width: 10vh; border: 1rpx solid #a9a1a1; transform: rotate(90deg); color: #666; margin-left: -2vh; margin-top: 10vh; height: 65rpx; line-height: 65rpx; border-radius: 3px; text-align: center; justify-content: center; } .save-btn { margin-top: 31vh; margin-left: -2vh; transform: rotate(90deg); background: #007aff; width: 10vh; border-radius: 3px; border: 1rpx solid #007aff; color: #fff; height: 65rpx; line-height: 65rpx; text-align: center; } .cancel-bth { background: #de7f7f; text-align: center; color: #fff; width: 10vh; height: 65rpx; line-height: 65rpx; transform: rotate(90deg); margin-top: 35vh; border-radius: 3px; border: 1rpx solid #de7f7f; margin-left: -2vh; } } }
接下来就是重要的js了,我采用的是uni-app进行编写的,其它的应该也差不多(这里不多说)
<script> export default { components: {}, data() { return { dom: null, line: [], radius: 0, width: 0, height: 0 }; }, onLoad() {}, computed: {}, created() { uni.getSystemInfo({ success: res => { this.width = res.windowWidth-60; console.log(this.width) this.height = res.windowHeight+100; console.log(this.height) } }); this.dom = uni.createCanvasContext('designature', this); }, onShow() {}, methods: { end(e) {}, distance(a, b) { let x = b.x - a.x; let y = b.y - a.y; return Math.sqrt(x * x + y * y); }, // 开始 starts(e) { this.line.push({ points: [ { time: new Date().getTime(), x: e.touches[0].x, y: e.touches[0].y, dis: 0 } ] }); let currentPoint = { x: e.touches[0].x, y: e.touches[0].y }; this.currentPoint = currentPoint; this.drawer(this.line[this.line.length - 1]); }, // 滑动 moves(e) { let point = { x: e.touches[0].x, y: e.touches[0].y }; (this.lastPoint = this.currentPoint), (this.currentPoint = point); this.line[this.line.length - 1].points.push({ time: new Date().getTime(), x: e.touches[0].x, y: e.touches[0].y, dis: this.distance(this.currentPoint, this.lastPoint) }); this.drawer(this.line[this.line.length - 1]); }, // 书写 drawer(item) { let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5, x, y; var time = 0; if (item.points.length > 2) { let lines = item.points[item.points.length - 3]; let line = item.points[item.points.length - 2]; let end = item.points[item.points.length - 1]; x = line.x; y = line.y; x1 = lines.x; y1 = lines.y; x2 = end.x; y2 = end.y; var dis = 0; time = line.time - lines.time + (end.time - line.time); dis = line.dis + lines.dis + end.dis; var dom = this.dom; var or = Math.min((time / dis) * this.linePressure + this.lineMin, this.lineMax); cx = (x - Math.pow(1 - t, 2) * x1 - Math.pow(t, 2) * x2) / (2 * t * (1 - t)); cy = (y - Math.pow(1 - t, 2) * y1 - Math.pow(t, 2) * y2) / (2 * t * (1 - t)); dom.setLineCap('round'); dom.beginPath(); dom.setStrokeStyle('black'); dom.setLineWidth(5); dom.moveTo(x1, y1); dom.quadraticCurveTo(cx, cy, x2, y2); dom.stroke(); dom.draw(true); } }, // 清除 clear() { this.dom.clearRect(0, 0, 1000, 1000); this.dom.draw(); }, //关闭 colse(e) { this.$emit('colse', false); }, // 保存图片 save() { var t = this; uni.canvasToTempFilePath( { canvasId: 'designature', fileType: 'png', quality: 1, //图片质量 success: function(res) { t.$emit('getImg',res.tempFilePath); // uni.navigateBack({ // delta:1 // }) }, fail(e) { console.log(e); } }, this ); }, } }; </script>
上面就是签名的实现了.需要了直接封装成组件就好;
最后拿到的效果就是这样的:
最后保存的样式
结果这样的不是产品要的结果,产品需要的是竖屏签字,横屏显示,直接原地裂开,
由于签名已经好了 懒得改,所以就产生了第二个canvas用来进行图片的旋转.上代码:
首先是html,更改后的代码如下
<view class="signa">
<view class="btn">
<view class="cancel-btn" @click="clear">重写</view>
<view class="save-btn" @click="save">保存</view>
<view class="cancel-bth" @click="colse">关闭</view>
</view>
<canvas class="canvas" disable-scroll="true" :style="{ width: width + 'px', height: height + 'px' }" canvas-id="designature" @touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
<canvas canvas-id="camCacnvs" :style="{ width: height + 'px', height: width + 'px' }" class="canvsborder"></canvas>
</view>
因为图片旋转不需要用户看到,所以想到了定位到屏幕外面,添加css
.canvsborder { border: 1rpx solid #333; position: fixed; top: 0; left: 10000rpx; }
接下来就是旋转保存了
next(path) { console.log(8888,path) const that = this; const ctx = uni.createCanvasContext('camCacnvs', that); ctx.translate(that.width/2, that.height/2.5);//设置旋转点 ctx.rotate((-90 * Math.PI) / 180);//旋转角度 ctx.drawImage(path, 0, 0);//画图片 ctx.draw(); setTimeout(() => { uni.canvasToTempFilePath({ canvasId: 'camCacnvs', success: function(res) { var tempFilePath = res.tempFilePath; console.log(6666,tempFilePath) that.$emit('getImg', tempFilePath); }, fail: err => { console.log('fail', err); uni.showToast({ title:'签名图片生成失败!', duration:2000 }) uni.hideLoading() } },this); }, 200); }
这里就是旋转的逻辑,需要注意的一点是,上面的有个地方需要改一下,需要把save里面的t.$emit()修改为t.next(res.tempFilePath)
然后我门再试一下,结果发现图片旋转了,终于达到了要求
到此 签名以及旋转就结束了.
图片合并在下一篇
完整代码如下:
<template>
<!--
签名组件
LYH
横屏组件
-->
<view class="signa">
<view class="btn">
<view class="cancel-btn" @click="clear">重写</view>
<view class="save-btn" @click="save">保存</view>
<view class="cancel-bth" @click="colse">关闭</view>
</view>
<canvas class="canvas" disable-scroll="true" :style="{ width: width + 'px', height: height + 'px' }" canvas-id="designature" @touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
<canvas canvas-id="camCacnvs" :style="{ width: height + 'px', height: width + 'px' }" class="canvsborder"></canvas>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
dom: null,
line: [],
radius: 0,
width: 0,
height: 0
};
},
onLoad() {},
computed: {},
created() {
uni.getSystemInfo({
success: res => {
this.width = res.windowWidth-60;
console.log(this.width)
this.height = res.windowHeight+100;
console.log(this.height)
}
});
this.dom = uni.createCanvasContext('designature', this);
},
onShow() {},
methods: {
end(e) {},
distance(a, b) {
let x = b.x - a.x;
let y = b.y - a.y;
return Math.sqrt(x * x + y * y);
},
// 开始
starts(e) {
this.line.push({
points: [
{
time: new Date().getTime(),
x: e.touches[0].x,
y: e.touches[0].y,
dis: 0
}
]
});
let currentPoint = {
x: e.touches[0].x,
y: e.touches[0].y
};
this.currentPoint = currentPoint;
this.drawer(this.line[this.line.length - 1]);
},
// 滑动
moves(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
};
(this.lastPoint = this.currentPoint), (this.currentPoint = point);
this.line[this.line.length - 1].points.push({
time: new Date().getTime(),
x: e.touches[0].x,
y: e.touches[0].y,
dis: this.distance(this.currentPoint, this.lastPoint)
});
this.drawer(this.line[this.line.length - 1]);
},
// 书写
drawer(item) {
let x1,
x2,
y1,
y2,
len,
radius,
r,
cx,
cy,
t = 0.5,
x,
y;
var time = 0;
if (item.points.length > 2) {
let lines = item.points[item.points.length - 3];
let line = item.points[item.points.length - 2];
let end = item.points[item.points.length - 1];
x = line.x;
y = line.y;
x1 = lines.x;
y1 = lines.y;
x2 = end.x;
y2 = end.y;
var dis = 0;
time = line.time - lines.time + (end.time - line.time);
dis = line.dis + lines.dis + end.dis;
var dom = this.dom;
var or = Math.min((time / dis) * this.linePressure + this.lineMin, this.lineMax);
cx = (x - Math.pow(1 - t, 2) * x1 - Math.pow(t, 2) * x2) / (2 * t * (1 - t));
cy = (y - Math.pow(1 - t, 2) * y1 - Math.pow(t, 2) * y2) / (2 * t * (1 - t));
dom.setLineCap('round');
dom.beginPath();
dom.setStrokeStyle('black');
dom.setLineWidth(5);
dom.moveTo(x1, y1);
dom.quadraticCurveTo(cx, cy, x2, y2);
dom.stroke();
dom.draw(true);
}
},
// 清除
clear() {
this.dom.clearRect(0, 0, 1000, 1000);
this.dom.draw();
},
//关闭
colse(e) {
console.log(88888)
this.$emit('Back');
},
// 保存图片
save() {
uni.showLoading({
title:'图片生成中...'
})
var t = this;
uni.canvasToTempFilePath(
{
canvasId: 'designature',
fileType: 'png',
quality: 1, //图片质量
success: function(res) {
t.next(res.tempFilePath);
// uni.navigateBack({
// delta:1
// })
},
fail(e) {
console.log(e);
uni.showToast({
title:'签名图片生成失败!',
duration:2000
})
uni.hideLoading()
}
},
this
);
},
next(path) {
console.log(8888,path)
const that = this;
const ctx = uni.createCanvasContext('camCacnvs', that);
ctx.translate(that.width/2, that.height/2.5);
ctx.rotate((-90 * Math.PI) / 180);
ctx.drawImage(path, 0, 0);
ctx.draw();
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'camCacnvs',
success: function(res) {
var tempFilePath = res.tempFilePath;
console.log(6666,tempFilePath)
that.$emit('getImg', tempFilePath);
},
fail: err => {
console.log('fail', err);
uni.showToast({
title:'签名图片生成失败!',
duration:2000
})
uni.hideLoading()
}
},this);
}, 200);
}
}
};
</script>
<style scoped lang="less">
.signa {
position: relative;
overflow: hidden;
background-color: #f1efef;
height: 96vh;
width: 100vw;
.canvsborder {
border: 1rpx solid #333;
position: fixed;
top: 0;
left: 10000rpx;
}
.canvas {
background-color: #ffffff;
position: absolute;
z-index: 9999;
left: 50px;
top: 6px;
border: 1px solid #d6d6d6;
}
.btn {
height: 96vh;
position: absolute;
font-size: 32rpx;
.cancel-btn {
width: 10vh;
border: 1rpx solid #a9a1a1;
transform: rotate(90deg);
color: #666;
margin-left: -2vh;
margin-top: 10vh;
height: 65rpx;
line-height: 65rpx;
border-radius: 3px;
text-align: center;
justify-content: center;
}
.save-btn {
margin-top: 31vh;
margin-left: -2vh;
transform: rotate(90deg);
background: #007aff;
width: 10vh;
border-radius: 3px;
border: 1rpx solid #007aff;
color: #fff;
height: 65rpx;
line-height: 65rpx;
text-align: center;
}
.cancel-bth {
background: #de7f7f;
text-align: center;
color: #fff;
width: 10vh;
height: 65rpx;
line-height: 65rpx;
transform: rotate(90deg);
margin-top: 35vh;
border-radius: 3px;
border: 1rpx solid #de7f7f;
margin-left: -2vh;
}
}
}
</style>
上面采用组件形式:调用如下:
<QM @getImg="getImg" @Back="Back"></QM>
import QM from "@/components/auto.vue"
components:{
QM
},
getImg(e){ //这里是图片的临时路径 可以用来上传 console.log(e) }, Back(e){ uni.navigateBack({ url:1 }) }
到此结束.
