Vue实现在线签名(微信端内强制横屏/手机浏览器横竖屏支持)实现

源码下载： https://github.com/gch116620/Jquery_Signature_Demo

1、如何实现横屏功能

微信端：
由于微信端默认不开启横屏模式，且在安卓手机上，就算开启了手机自带的屏幕旋转，微信也需要手动开启横屏模式才可以让微信横屏显示。
而且大多数用户都不会开启，因为太不方便了，所以要在微信上实现横向签名，就需要一点小技巧。
以全屏横屏签名为例：
1.1 首先屏幕不能横过来，我们可以利用css让元素横过来，比如一个按钮 button，我们可以为它设置css
transform: rotate(90deg); ，然后按钮在屏幕上就横过来了，此时横着手机看这个按钮就是正着的。

1.2 其次，签名所用的画布canvas是不能通过transform来旋转的，因为会导致笔画显示区域异常，这里也不好解释，你只要记住画布尽量不能旋转就可以了。

1.3 用户进入页面后，可以看到没被旋转的画布，因为画布没有区分方向，还有横过来的按钮，所以视觉上，这就是横屏的，实际上这只是个横屏障眼法。

移动浏览器端：
1.4 移动浏览器可以通过设置手机内置的屏幕旋转来达到横屏和竖屏的目的，不像微信一样做了绝对禁止。所以我们的解决方案就不能和微信一样。

1.5 根据横屏和竖屏各出一套css方案，然后正常布局即可。

1.6 css如下：

/* portrait */
@media screen and (orientation:portrait) {
/* 竖屏情况下 */
/* portrait-specific styles */
 
}
 
/* landscape */
/* 横屏情况下 */
@media screen and (orientation:landscape) {
 
/* landscape-specific styles */

2、插件

大家可以使用我个人开发的插件 vue-fast-signature来实现签名功能，git地址如下：
https://github.com/gch116620/vue-fast-signature

大家可以通过 npm install --save vue-fast-signature来安装。

3、获取数据

浏览器下，可通过

getBase64PNG()

来获取数据，
微信中由于是假横屏，所以可以通过

getHorizontal(function(value) {
      console.log(value)
})

来获取数据

同时大家可以根据API文档获取file 或者blob对象。

使用该插件的示例代码如下，请阅读后在复制，并针对自己项目情况修改

<template>
    <div style="height: 100vh;overflow: hidden">
        <signature ref="signature"></signature>
        <div id="btns">
            <button id="reset" @click="reset">
                重置
            </button>
            <button id="get" @click="getData">
                获取数据
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "sign-in",
        methods:{
            reset(){
                this.$refs['signature'].reset()
            },
            getData(){
                console.log(this.$refs['signature'].getBase64())
            }
        }
    }
</script>

<style scoped>
    #btns  {
        position: absolute;
        top: 113px;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        right: -50px;
    }

    button {
        height: 40px;
        width: 100px;
    }
</style>