插件：jSignature.js 可以到bootcdn下载
2019年7月11日 10:39:33
本例不再提供源代码。
2020年4月1日09:39:29
需要源码的童鞋比较多，所以我上传了一份到Github，请自取：
https://github.com/gch116620/Jquery_Signature_Demo
最近遇到一个微站需求，用户进入页面后页面元素横过来，用户签名后，将签名转为base64数据传给后台。
如果单纯的实现签名和传输就很简单了，直接初始化jSignature就可以了，可实现过程中，确发现微信默认不开启横屏模式，就算用户打开了手机屏幕旋转，也不管用，必须手动开启横屏模式才可以。
所以用户在微信端打开网页后只能竖屏签名。
在和PM讨论后，决定把页面元素全都旋转90度，示例图如下：（请忽略美观度）
这样的话，用户从微站进入页面就被强制横屏了，而且签名区域也变大了，如果遇到用户五个字的名字也就够签了。
但是又遇到一个问题，div元素旋转简单，可是由jSignature动态生成的画布旋转却不行，旋转后，触摸签名的笔迹的位置也变了，如下：
签完名之后，名字却倒过来显示了，因为对canvas不太了解,所以百思不得其解，最后找到了具体的解决方案。
具体流程如下：
1、title 和 buttons旋转，canvas不旋转，保证签名笔迹位置显示正确。
2、点击确认按钮后，获取当前canvas的内容。
3、新建一个隐藏画布，再旋转90度。
4、把签名重新绘制到旋转后的隐藏画布上。
5、获取隐藏画布的base64
6、成功实现画布不旋转，签名信息旋转功能。
完整代码如下：
//初始化签字插件
$(".g-signatrue-body").jSignature({color: "#000000", lineWidth: 2});
//获取画布外框的宽高，用于绘制隐藏canvas使用。
var hiddenWidth = $(".g-signatrue-body").css('width');
var hiddenHeight = $(".g-signatrue-body").css('height');
/**
* signatureData
* 用于存储用户签名数据
* @type {string}
*/
var signatureData = '';
/**
* isDraw
* 用于判断用户是否已签字，是则true,否则false,默认false.
* @type {boolean}
*/
var isDraw = false;
//用户触摸事件，只要有触摸，isDraw则变为true.
$('body').on('touchmove', '.jSignature', function () {
isDraw = true;
});
//重置按钮点击事件，只要点击重置，isDraw则恢复默认.
$('.u-reset').on('click', function () {
$(".g-signatrue-body").jSignature('reset');
isDraw = false;
});
//用户提交签名
$('.u-submit').on('click', function () {
$(this).attr('disabled','true');
//重置变量并获取未旋转画布上的内容
signatureData = '';
signatureData = $(".g-signatrue-body").jSignature('getData', 'default');
//如果现在有隐藏画布，那就全删掉重新建立，因为怕互相影响。
$('.hide-canvas').remove();
//建立画布，因为要旋转，所以新画布的宽就是原画布的高，新画布的高就是原画布的宽。
$('body').append('');
//重新绘制图像
var ctx = document.querySelector('.hide-canvas').getContext("2d");
//新建img对象
var img = new Image();
//把img的值设置为原画布的base64数据;
img.src = signatureData;
//绘制
img.onload = function (ev) {
//获取新画布的宽高中心点
var width = Math.round($('.jSignature').css('height').replace('px', '') / 2);
var height = Math.round($('.jSignature').css('width').replace('px', '') / 2);
//保存canvas状态
ctx.save();
//把canvas的 0,0（起点位置）设置为中心点
ctx.translate(width, height);
//画布旋转（旋转度数需要用 度数 *Math.PI/180 来计算）
ctx.rotate(-90 * Math.PI / 180)
//绘图
ctx.drawImage(img, -img.width / 2, -img.height / 2);
//恢复canvas状态
ctx.restore();
//判断是否已经签名
if (!isDraw) {
tanwin('您还未签名');
$('.u-submit').removeAttr('disabled');
} else {
//获得旋转后的签名数据
var _signature = document.querySelector('.hide-canvas').toDataURL('image/png');
console.log(_signature)
}
};
});
最终效果：
Vue中实现请阅读我另一篇文章 https://www.jianshu.com/p/6733e548ff16