Comment utiliser le plug-in jSignature pour créer un bloc de signature et l'enregistrer sous forme d'image-js tutoriel-php.cn

Comment utiliser le plug-in jSignature pour créer un bloc de signature et l'enregistrer sous forme d'image

韦小宝

Libérer： 2018-03-19 17:41:08

original

4481 Les gens l'ont consulté

Ce dont nous allons parler aujourd'hui, c'est d'utiliser le plug-in jquery jSignature pour créer une fonction de signature de bloc d'écriture manuscrite et enregistrer l'écriture manuscrite sous forme d'image. Ce qui suit est un cas pratique pour suivre l'éditeur. jetez un oeil.

La première étape : la préparation de l'environnement

jquery, jSignature

La deuxième étape : l'écriture de la démo

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

Copier après la connexion

Étape 3 : Test
Après le test, réussi !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!