webapp实现横屏签名

插件：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