search

Home >Web Front-end >JS Tutorial >How to use the jSignature plug-in to make a signature pad and save it as a picture

How to use the jSignature plug-in to make a signature pad and save it as a picture

韦小宝
韦小宝Original
2018-03-19 17:41:084474browse

What we are going to talk about today is to use the jquery plug-in jSignature to create a handwriting pad signature function and save the signature handwriting as a picture. The following is a practical case. Follow the editor to take a look.

The first step: environment preparation

jquery, jSignature

The second step: demo writing

<!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>


Step Three: Test
After testing, it was successful!

The above is the detailed content of How to use the jSignature plug-in to make a signature pad and save it as a picture. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of js anonymous self-executing function examplesNext article：Detailed explanation of js anonymous self-executing function examples

Related articles

See more