jSignature在線簽字板保存爲圖片

時間 2019-12-13

標籤 jsignature 在線簽字保存圖片简体版

原文原文鏈接

<!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>
    <div id="signature"></div>
    <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"/>
    <div id="someelement"></div>
    <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 $sigdiv = $("#signature");
            $sigdiv.jSignature(); // 初始化jSignature插件.
            $("#yes").click(function(){
                //將畫布內容轉換爲圖片
                var datapair = $sigdiv.jSignature("getData", "image");
                var i = new Image();
                i.src = "data:" + datapair[0] + "," + datapair[1];
                $(i).appendTo($("#someelement")); // append the image (SVG) to DOM.

                 //var data = $sigdiv.jSignature('getData', 'default')   
                  //console.log(data);  這個和上面獲得的結果同樣
                  
            });
            //datapair = $sigdiv.jSignature("getData","base30");
            //$sigdiv.jSignature("setData", "data:" + datapair.join(","));
            $("#download").click(function(){
                downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
            });
            $("#reset").click(function(){
                $sigdiv.jSignature("reset"); //重置畫布，能夠進行從新做畫.
                $("#someelement").html("");
            });
        });
        function downloadFile(fileName, blob){
            var aLink = document.createElement('a');
            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(',')[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 : 'image/png'});
        }
    </script>
 
</body>
</html>

手寫簽字板另外一個參考用（跟代碼無關）html

方法詳解jquery

jSignature 是一個經過捕捉筆畫的矢量輪廓輸出多種格式數據的jQuery插件，經過該插件咱們能夠實現繪畫板、手寫簽名等功能。chrome

使用該插件須要引入jQuery和jSignature.js，首先初始化jSignature：canvas

 var $signature = $("#signature").jSignature();

接下來便可使用插件提供的一些常見的操做：api

（1）、重置畫布app

 $signature.jSignature('reset')

（2）、獲取數據並展現ui

 //獲取數據 
 var data = $signature.jSignature('getData', 'default')    
 //圖片展現
 var img = new Image()
 img.src = data
 $(img).appendTo($('#signimg'))
 //將數據顯示在文本框
 $('#text').val(data)

（3）、撤銷上一步(引入jSignature.UndoButton.js)this

//初始化時傳入參數 {'UndoButton':true}
$("#signature").jSignature({'UndoButton':true});

（4）、繪畫板，例如設置筆觸的顏色url

//加入方法setColor
 'setColor' : function(color) {
     // 獲取 context 對象
     var context2D = this.find('canvas.'+apinamespace)
                     .add(this.filter('canvas.'+apinamespace))
                     .data(apinamespace+'.this').canvasContext
     //設置陰影的顏色
     context2D.shadowColor = 'transparent' 
     //設置筆觸顏色
     context2D.strokeStyle = color
     return 
 }