jSignature プラグインを使用して署名パッドを作成し、画像として保存する方法-jsチュートリアル-php.cn

jSignature プラグインを使用して署名パッドを作成し、画像として保存する方法

韦小宝

リリース： 2018-03-19 17:41:08

オリジナル

4458 人が閲覧しました

今日は、jquery プラグイン jSignature を使用して、手書きパッドの署名機能を作成し、署名の手書きを画像として保存する方法について説明します。以下は、エディターに従ってご覧ください。

ステップ 1: 環境の準備

jquery、jSignature

ステップ 2: デモの作成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>手写板签名demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
    <p id="signature"></p>
    <p style="text-align: center">
        <b style="color: red">请按着鼠标写字签名。</b>
    </p>
    <input type="button" value="保存" id="yes"/>
    <input type="button" value="下载" id="download"/>
    <input type="button" value="重写" id="reset"/>
    <p id="someelement"></p>
    <script src="jquery-2.0.3.min.js"></script>
    <!--[if lt IE 9]>
        <script src="jSignature/flashcanvas.js"></script>
    <![endif]-->
    <script src="jSignature/jSignature.min.js"></script>
    <script>
        $(function() {
            var $sigp = $("#signature");
            $sigp.jSignature(); // 初始化jSignature插件.
            $("#yes").click(function(){
                //将画布内容转换为图片
                var datapair = $sigp.jSignature("getData", "image");
                var i = new Image();
                i.src = "data:" + datapair[0] + "," + datapair[1];
                $(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
            });
            //datapair = $sigp.jSignature("getData","base30");
            //$sigp.jSignature("setData", "data:" + datapair.join(","));
            $("#download").click(function(){
                downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
            });
            $("#reset").click(function(){
                $sigp.jSignature("reset"); //重置画布，可以进行重新作画.
                $("#someelement").html("");
            });
        });
        function downloadFile(fileName, blob){
            var aLink = document.createElement(&#39;a&#39;);
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(evt);
        }
        /**
         * 将以base64的图片url数据转换为Blob
         * @param urlData
         *            用url方式表示的base64图片数据
         */
        function convertBase64UrlToBlob(urlData){
             
            var bytes=window.atob(urlData.split(&#39;,&#39;)[1]);        //去掉url的头，并转换为byte
             
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
 
            return new Blob( [ab] , {type : &#39;image/png&#39;});
        }
    </script>
 
</body>
</html>

ログイン後にコピー

ステップ 3: テスト
テスト後、成功!

以上がjSignature プラグインを使用して署名パッドを作成し、画像として保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。