uniapp电子签名盖章实现详解

　　项目开发中用到了电子签名、签好名的图片需要手动实现横竖屏旋转、并将绘制的签名图片放到pdf转换后的base64的图片上，可以手动拖动签名到合适的位置，最后合成签名和合同图片并导出。和以往一样，先发一下效果图。整理总结不易，如需全部代码，请联系我15098950589（微信同号）。

 

 核心代码如下

//保存图片
saveClick: function() {
var that = this;
if (!this.isDraw) {
uni.showToast({
title: '请先签名',
icon: 'none',
duration: 2000
});
return;
}
uni.canvasToTempFilePath({
canvasId: 'sign',
fileType: 'png',
quality: 1, //图片质量
destWidth: 260,
destHeight: 600,
success: function(res) {
let tempFilePaths = res.tempFilePath;
wx.getImageInfo({ // 获取图片的信息
src: tempFilePaths,
success: (msg) => {
console.log('保存图片', tempFilePaths)
let height = msg.height / 2 //图片的高
let width = msg.width / 2
//开始旋转 旋转方向为顺时针 90 180 270
if (width < height) { // 竖变横 左为正底 旋转后 为下为正底
// this.canvasWidth = height,
// this.canvasHeight = width,
console.log('这张图片 是竖的 要变成横屏的')
//绘制canvas 旋转图片
let canvas = wx.createCanvasContext('camCacnvs');
// 逆时针旋转90度
canvas.translate(height / 2, width / 2)
canvas.rotate(270 * Math.PI / 180)
canvas.drawImage(tempFilePaths, -width / 2, -height /
2, width, height);
canvas.draw(false,
() => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
// 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
wx.canvasToTempFilePath({
canvasId: 'camCacnvs',
quality: 1, //图片质量
destWidth: msg.width,
destHeight: 120,
success(vas) {
console.log(vas)
// 存储缓存,方便取出
uni.setStorageSync(
'tempFilePath', vas
.tempFilePath);
console.log('保存图片', vas
.tempFilePath)
setTimeout(() => {
uni
.navigateBack({});
}, 100);
// that.uploadImg(vas.tempFilePath);
// wx.saveImageToPhotosAlbum({
// filePath: vas
// .tempFilePath,
// success(res) {
// wx.showToast({
// title: '已保存到相册',
// duration: 2000
// });
// }
// });
}
}) // 在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件
})
}
}
})
}
});
}