Vueに手書き署名機能を実装するにはどうすればよいですか?

Vue で手書き署名機能を実装するにはどうすればよいですか?

電子商取引やデジタル時代の到来により、電子文書で署名を完了する必要がある企業や個人が増えていますが、Vue に手書き署名機能が実装できれば、多くのメリットが得られます。ユーザーにとって非常に便利です。

この記事では、Vue といくつかのサードパーティ ライブラリを使用して手書き署名機能を実装する方法を紹介します。

1. 準備

開始する前に、次のツールを準備する必要があります:

1. Vue.js

Vue。 js は、Angular と React の設計アイデアを活用した軽量のフロントエンド MVVM フレームワークで、Web ページの保守性とスケーラビリティを向上させるのに非常に役立ちます。

2. Signature Pad

Signature Pad は、手書き署名の作成と署名の画像形式への変換をサポートする軽量の JavaScript ライブラリです。

3. Axios

Axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP クライアントで、さまざまなリクエスト メソッドとインターセプターをサポートしています。

2. 署名パッドの統合

1. npm を使用して署名パッドをインストールする

npm を使用して、プロジェクトに署名パッド ライブラリをインストールします。

npm install signature_pad --save

2. 署名パッドの紹介

Vue では、import キーワードを使用して署名パッドを導入できます。

import SignaturePad from 'signature_pad';

3. 署名パッドを使用して描画領域を作成する

ユーザーが署名できるように、Vue テンプレートに canvas 要素を作成します。

<template>
  <div>
    <canvas ref="canvas" :width="width" :height="height"></canvas>
  </div>
</template>

Vue の script で、mounted メソッドを使用して canvas 要素への参照を取得し、それを署名パッドに渡します。

import SignaturePad from 'signature_pad';

export default {
  name: 'Signature',
  data() {
    return {
      width: 500,
      height: 300
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    this.signaturePad = new SignaturePad(canvas);
  }
};

4. 署名機能の実装

署名パッドは、描画領域のクリア、前の操作の取り消し、署名関連の操作を処理するための一連のメソッドを提供します。署名画像をエクスポートしています。お待ちください。

export default {
  name: 'Signature',
  ...
  methods: {
    // 清空绘制区域
    clear() {
      this.signaturePad.clear();
    },
    // 撤销上一步操作
    undo() {
      const data = this.signaturePad.toData();
      if (data) {
        data.pop();
        this.signaturePad.fromData(data);
      }
    },
    // 判断绘图区域是否为空
    isEmpty() {
      return this.signaturePad.isEmpty();
    },
    // 获取签名图像的base64编码
    getDataUrl() {
      return this.signaturePad.toDataURL();
    }
  }
};

3. 署名画像のエクスポート

Vue では、Axios ライブラリを使用して署名画像をサーバーにアップロードするか、フォーム送信を使用して署名画像を送信できます。 。

1. 署名画像をローカルに保存する

署名画像をローカル ファイルに保存するには、次の <a> タグを使用します。 HTML5 download 属性はダウンロード機能を実装します。

export default {
  name: 'Signature',
  ...
  methods: {
    ...
    // 下载签名图像
    download() {
      const link = document.createElement('a');
      link.href = this.getDataUrl();
      link.download = 'signature.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};

2. 署名画像をサーバーにアップロード

Axios ライブラリを使用して、署名画像をサーバーにアップロードできます。

import axios from 'axios';

export default {
  name: 'Signature',
  ...
  methods: {
    ...
    // 将签名图像上传到服务器
    upload() {
      const dataUrl = this.getDataUrl();
      const blob = this.dataURItoBlob(dataUrl);
      const formData = new FormData();
      formData.append('file', blob, 'signature.png');

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      });
    },
    ...
  }
};

4. 概要

この記事では、Vue に Signature Pad ライブラリを統合して手書き署名の機能を実現する方法と、署名画像をローカルにエクスポートまたはアップロードする方法を紹介します。サーバー。

上記の方法により、Vue アプリケーションに手書き署名機能を簡単に実装することができ、ユーザーは署名操作をより便利に行うことができます。

以上がVueに手書き署名機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。