Vue実現オンライン署名(微信端末内強制横画面/携帯電話ブラウザ横縦画面サポート)実現過程

ソースのダウンロード:https://github.com/gch116620/Jquery_Signature_Demo
1、クロススクリーン機能の実現方法
微信端:微信端はデフォルトで横画面モードをオンにしないため、アンドロイドの携帯電話では、携帯電話が持っている画面の回転をオンにしても、微信は手動で横画面モードをオンにしてこそ、微信の横画面を表示することができる.また、ほとんどのユーザーは開かないので、不便なので、微信で横署名を実現するには、ちょっとしたテクニックが必要です.全画面横画面署名を例にとると、1.1まず画面を横にすることはできません.cssを利用して要素を横にすることができます.例えば、ボタンbuttonを利用して、css transform:rotate(90 deg)を設定することができます.そしてボタンがスクリーンに横になってきたので、携帯電話を横にしてこのボタンを見ているとまっすぐになっています.
1.2次に、署名に使用するキャンバスcanvasはtransformで回転できません.筆画表示領域が異常になるため、ここでも説明しにくいので、キャンバスができるだけ回転できないことを覚えておけばいいのです.
1.3ユーザーがページに入ると、回転されていないキャンバスが見えます.キャンバスには方向が区別されていないし、横から来たボタンもあるので、視覚的には横画面ですが、実際には横画面の目障りにすぎません.
モバイルブラウザ側:1.4モバイルブラウザは、携帯電話に内蔵された画面の回転を設定することで、横画面と縦画面の目的を達成することができ、微信のように絶対禁止されていない.だから、私たちの解決策は微信と同じではありません.
1.5横スクリーンと縦スクリーンに基づいてcssスキームを1セットずつ出し、正常にレイアウトすればよい.
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オブジェクトを取得できます.
このプラグインを使用するコードの例は、以下のとおりです.読んでからコピーし、自分のプロジェクトの状況に合わせて変更してください.

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