源碼下載： https://github.com/gch116620/Jquery_Signature_Demo

1、如何實(shí)現(xiàn)橫屏功能

微信端：
由于微信端默認(rèn)不開(kāi)啟橫屏模式，且在安卓手機(jī)上，就算開(kāi)啟了手機(jī)自帶的屏幕旋轉(zhuǎn)，微信也需要手動(dòng)開(kāi)啟橫屏模式才可以讓微信橫屏顯示。
而且大多數(shù)用戶都不會(huì)開(kāi)啟，因?yàn)樘环奖懔?，所以要在微信上?shí)現(xiàn)橫向簽名，就需要一點(diǎn)小技巧。
以全屏橫屏簽名為例：
1.1 首先屏幕不能橫過(guò)來(lái)，我們可以利用css讓元素橫過(guò)來(lái)，比如一個(gè)按鈕 button，我們可以為它設(shè)置css
transform: rotate(90deg); ，然后按鈕在屏幕上就橫過(guò)來(lái)了，此時(shí)橫著手機(jī)看這個(gè)按鈕就是正著的。

1.2 其次，簽名所用的畫(huà)布canvas是不能通過(guò)transform來(lái)旋轉(zhuǎn)的，因?yàn)闀?huì)導(dǎo)致筆畫(huà)顯示區(qū)域異常，這里也不好解釋?zhuān)阒灰涀‘?huà)布盡量不能旋轉(zhuǎn)就可以了。

1.3 用戶進(jìn)入頁(yè)面后，可以看到?jīng)]被旋轉(zhuǎn)的畫(huà)布，因?yàn)楫?huà)布沒(méi)有區(qū)分方向，還有橫過(guò)來(lái)的按鈕，所以視覺(jué)上，這就是橫屏的，實(shí)際上這只是個(gè)橫屏障眼法。

移動(dòng)瀏覽器端：
1.4 移動(dòng)瀏覽器可以通過(guò)設(shè)置手機(jī)內(nèi)置的屏幕旋轉(zhuǎn)來(lái)達(dá)到橫屏和豎屏的目的，不像微信一樣做了絕對(duì)禁止。所以我們的解決方案就不能和微信一樣。

1.5 根據(jù)橫屏和豎屏各出一套css方案，然后正常布局即可。

1.6 css如下：

/* portrait */
@media screen and (orientation:portrait) {
/* 豎屏情況下 */
/* portrait-specific styles */
 
}
 
/* landscape */
/* 橫屏情況下 */
@media screen and (orientation:landscape) {
 
/* landscape-specific styles */

2、插件

大家可以使用我個(gè)人開(kāi)發(fā)的插件 vue-fast-signature來(lái)實(shí)現(xiàn)簽名功能，git地址如下：
https://github.com/gch116620/vue-fast-signature

大家可以通過(guò) npm install --save vue-fast-signature來(lái)安裝。

3、獲取數(shù)據(jù)

瀏覽器下，可通過(guò)

getBase64PNG()

來(lái)獲取數(shù)據(jù)，
微信中由于是假橫屏，所以可以通過(guò)

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

來(lái)獲取數(shù)據(jù)

同時(shí)大家可以根據(jù)API文檔獲取file 或者blob對(duì)象。

使用該插件的示例代碼如下，請(qǐng)閱讀后在復(fù)制，并針對(duì)自己項(xiàng)目情況修改

<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">
                獲取數(shù)據(jù)
            </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>