フロントエンドで電子署名の共通利用を実現（Web、携帯端末）

プログラミング 2023-03-28 20:23:55 訪問数: null

ナゲッツの成長の旅を始めましょう! 「ナゲッツデイリー新プラン・12月アップデートチャレンジ」参加15日目、イベント詳細はこちら

序文

現在の時代の発展では、以前の手書きの署名から、電子署名が徐々に派生しています。電子署名には、紙の手書き署名と同じ法的効力があります。現在、電子署名は主に本人確認が必要な商品リンクや司法関連の商品に使用されています。

一般的な例を挙げると、誰もが DingTalk を使用しており、DingTalk には電子署名があり、誰もがこれを知っているに違いないと思います。

では、電子署名をフロント エンドとして実装するにはどうすればよいでしょうか。実際、html5重要なレベルの補助タグが に登場しましたが、それは何ですか? それがキャンバスです。

とはcanvas

Canvas（画布）Web ページ上でリアルタイムに画像を生成するために使用される の新しいタグでHTML5、画像コンテンツを操作できJavaScriptます位图（bitmap）。CanvasElementCanvasを表すオブジェクト- . HTML独自の動作はありませんが、スクリプト化されたクライアント側の描画操作をサポートする API を定義します。

方言は、canvasその上に描くことができるラベルであり、javaScriptそれが提供するものを通して描かcontext(上下文)れ、Apiその過程でcanvasキャンバスとして機能します。

<canvas></canvas>
复制代码

使い方

canvasラベルにラベルを作成し、ラベルでこのラベルのノードを取得し、それを作成して使用するApiだけです。bodycanvasscriptcanvascontext(上下文)

...
<body>
    <canvas></canvas>
</body>
<script>
    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    canvas.getContext('2d')
</script>
...
复制代码

本題に入る。

電子署名を実装する

幾何学を知っている友人は、線が点で描かれ、面が線で描かれていることを非常に明確にしています。

複数の点は直線を形成し、複数の直線は平面を形成します。

したがって、実際には現在のタッチの座標点を取得して線処理を実行するだけで済みます。

タグをbody追加canvas

在这里我们不仅需要在在body中添加canvas标签，我们还需要添加两个按钮，分别是取消和保存（后面我们会用到）。

<body>
    <canvas></canvas>
    <div>
        <button>取消</button>
        <button>保存</button>
    </div>
</body>
复制代码

添加文件

我这里全程使用js进行样式设置及添加。

// 配置内容
    const config = {
        width: 400, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: 'red', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }
复制代码

获取canvas实例

这里我们使用querySelector获取canvas的dom实例，并设置样式和创建上下文。

    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框，方便我们查看及使用
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = canvas.getContext('2d')
复制代码

基础设置

我们将canvas的填充色为透明，并绘制填充一个矩形，作为我们的画布，如果不设置这个填充背景色，在我们初识渲染的时候是一个黑色背景，这也是它的一个默认色。

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );

复制代码

上次绘制路径保存

这里我们需要声明一个对象，用来记录我们上一次绘制的路径结束坐标点及偏移量。

  • 保存上次坐标点这个我不用说大家都懂；
  • 为啥需要保存偏移量呢，因为鼠标和画布上的距离是存在一定的偏移距离，在我们绘制的过程中需要减去这个偏移量，才是我们实际的绘制坐标。
  • 但我发现chrome中不需要减去这个偏移量，拿到的就是实际的坐标，之前在微信小程序中使用就需要减去偏移量，需要在小程序中使用的朋友需要注意这一点哦。
    // 保存上次绘制的 坐标及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }
复制代码

设备兼容

我们需要它不仅可以在web端使用，还需要在移动端使用，我们需要给它做设备兼容处理。我们通过调用navigator.userAgent获取当前设备信息，进行正则匹配判断。

    // 判断是否为移动端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

复制代码

初始化

这里我们在监听鼠标按下(mousedown)(web端)/触摸开始(touchstart)的时候进行初始化，事件监听采用addEventListener。

    // 创建鼠标/手势按下监听器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)

复制代码

三元判断说明： 这里当mobileStatus为true时则表示为移动端，反之则为web端，后续使用到的三元依旧是这个意思。

声明初始化方法

我们添加一个init方法作为监听鼠标按下/触摸开始的回调方法。

这里我们需要获取到当前鼠标按下/触摸开始的偏移量和坐标，进行起始点绘制。

Tips：web端可以直接通过event中取到，而移动端则需要在event.changedTouches[0]中取到。

这里我们在初始化后再监听鼠标的移动。

    // 初始化
    const init = event => {
        // 获取偏移量及坐标
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 

        // 修改上次的偏移量及坐标
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctx.beginPath()

        // 根据配置文件设置进行相应配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin

        // 设置画线起始点位
        ctx.moveTo(client.endX, client.endY)

        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
复制代码

绘制

这里我们添加绘制draw方法，作为监听鼠标移动/触摸移动的回调方法。

    // 绘制
    const draw = event => {
        // 获取当前坐标点位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最后一次绘制的坐标点
        client.endX = pageX
        client.endY = pageY

        // 根据坐标点位移动添加线条
        ctx.lineTo(pageX , pageY )

        // 绘制
        ctx.stroke()
    }
复制代码

结束绘制

添加了监听鼠标移动/触摸移动我们一定要记得取消监听并结束绘制，不然的话它会一直监听并绘制的。

这里我们创建一个cloaseDraw方法作为鼠标弹起/结束触摸的回调方法来结束绘制并移除鼠标移动/触摸移动的监听。

canvas结束绘制则需要调用closePath()让其结束绘制

    // 结束绘制
    const cloaseDraw = () => {
        // 结束绘制
        ctx.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
    }
复制代码

添加结束回调监听器

    // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
    
复制代码

ok，现在我们的电子签名功能还差一丢丢可以实现完了，现在已经可以正常的签名了。

我们来看一下效果：

291891492291361822022-12-07-11-13-41.gif

取消功能/清空画布

我们在刚开始创建的那两个按钮开始排上用场了。

这里我们创建一个cancel的方法作为取消并清空画布使用

    // 取消-清空画布
    const cancel = () => {
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)
    }
复制代码

然后我们将这个方法和取消按钮进行绑定

     <button onclick="cancel()">取消</button>
复制代码

保存功能

这里我们创建一个save的方法作为保存画布上的内容使用。

キャンバスにコンテンツを保存するには多くの方法があり、この 2 つの解決策图片/文件がより一般的ですが、このバディは強くなく、適応がうまくいきません。したがって、ここではlabel➕スキームを使用して画像を保存およびダウンロードします。blobtoDataURLtoDataURLblobablob

    // 保存-将画布内容保存为图片
    const save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            // 获取当前时间并转成字符串，用来当做文件名
            const date = Date.now().toString()
            // 创建一个 a 标签
            const a = document.createElement('a')
            // 设置 a 标签的下载文件名
            a.download = `${date}.png`
            // 设置 a 标签的跳转路径为 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手动触发 a 标签的点击事件
            a.click()
            // 移除 a 标签
            a.remove()
        })
    }
复制代码

次に、このメソッドを保存按钮バインドします

    <button onclick="save()">保存</button>
复制代码

今描いた内容を保存し、保存ボタンをクリックすると、ダウンロードされて保存されます

画像.png

完全なコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <div>
        <button onclick="cancel()">取消</button>
        <button onclick="save()">保存</button>
    </div>
</body>
<script>
    // 配置内容
    const config = {
        width: 400, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: 'red', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }

    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = canvas.getContext('2d')

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );

    // 保存上次绘制的 坐标及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }

    // 判断是否为移动端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

    // 初始化
    const init = event => {
        // 获取偏移量及坐标
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 

        // 修改上次的偏移量及坐标
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctx.beginPath()
        // 根据配置文件设置相应配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin
        // 设置画线起始点位
        ctx.moveTo(client.endX, client.endY)
        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
    // 绘制
    const draw = event => {
        // 获取当前坐标点位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最后一次绘制的坐标点
        client.endX = pageX
        client.endY = pageY

        // 根据坐标点位移动添加线条
        ctx.lineTo(pageX , pageY )

        // 绘制
        ctx.stroke()
    }
    // 结束绘制
    const cloaseDraw = () => {
        // 结束绘制
        ctx.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
    }
    // 创建鼠标/手势按下监听器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
    // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
    
    // 取消-清空画布
    const cancel = () => {
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)
    }
    // 保存-将画布内容保存为图片
    const save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            // 获取当前时间并转成字符串，用来当做文件名
            const date = Date.now().toString()
            // 创建一个 a 标签
            const a = document.createElement('a')
            // 设置 a 标签的下载文件名
            a.download = `${date}.png`
            // 设置 a 标签的跳转路径为 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手动触发 a 标签的点击事件
            a.click()
            // 移除 a 标签
            a.remove()
        })
    }
</script>
</html>
复制代码

カーネルとブラウザのサポート

Mozilla プログラムは、 Gecko 1.8 ( Firefox 1.5 (en-US) ) からサポートされています <canvas>。これは、OS X ダッシュボードおよび Safari 用に Apple によって最初に導入されました。Internet Explorer は IE9 からサポートされています. 古いバージョンの IE では、Google のExplorer Canvasプロジェクト からスクリプト<canvas> を導入することでページをサポートできます 。Google Chrome と Opera 9+ もサポートされています 。<canvas><canvas>

アプレットでプロンプト

小さなプログラムに実装する必要がある場合は、同じ原則ですが、変更する必要があります。创建实例和上下文小さなApiプログラムにはそのような操作がないため、domそのような操作がないため、この操作はdomどこから来たのですか?操作dom

  • はいの場合、コンテキストの作成にuni.createCanvasContextuni-appを使用する必要があります

  • ネイティブWeChatアプレットの場合、wx.createCanvasContext作成後のライブラリ(2.9.0)は未対応

おすすめ

転載: juejin.im/post/7174251833773752350
おすすめ
TIOBE 5 月リスト: Fortran がトップ 10 に「復活」
GCC 14.1 发布
ランキング
Linuxの一般的なコマンドの緊急対応
FPGAの設計者は、5つの基本的なスキルです
Javaの研究では、2019年6月12日ノート
Golang底层原理剖析之内存逃逸
VIM - Viは、プログラマーのテキストエディタを改善しました
魔法書（MagicTable）入門チュートリアルは、CADの一括転送複数のテーブルExcelをExcelを回し--CAD
mockitoとの望ましくないモック
EVE-NG MPLS L2VPN BGP pw -- スタティック ルート、スタティック mpls lsp
抵抗性タッチスクリーンドライバ（II）
PHP 安装扩展 Api Version 和扩展extensions路径不匹配的问题
アーカイブ
もっと
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)

コードワールド

© 2018 codetd.com