1. 程式人生 > >HTML5印章繪製電子簽章圖片,中文英文橢圓章、中文英文橢圓印章

HTML5印章繪製電子簽章圖片,中文英文橢圓章、中文英文橢圓印章

電子簽章圖片採集

印章圖片的採集兩種互補方式:

      方式1:線上生成印章圖片方式,但是這種方式有個弊端,對印章中公司名稱字數有限制,字數越多可能就完蛋了。

      方式2:上傳印章掃描件,系統來對掃描圖片進行處理,提取掃描件中的印章圖片。

本文介紹方式1,方式2待後續釋出,方式1本來想用java實現印章圖片生成,雖然網上有很多現成程式碼,但需要調整印章圖片大小達到規範,印章大小:圓形印章尺寸43mm*43mm(誤差允許範圍2-3mm),橢圓印章43mm*26mm(誤差允許範圍2-3mm)比較接近真實印章。想到java除錯起來比較費勁,所以改用html5實現。

html5實現圓章,橢圓章思路:

   HTML5 <canvas> 標籤用於繪製圖像(通過指令碼,通常是 JavaScript),canvas進行印章繪畫,然後通過canvas生成印章圖片然後轉成base64圖片。

 難點:

   橢圓章的曲線文字比較難搞,雖然網上有JQ的js可以直接生成曲線字元排列,但是卻無法轉換成canvas。

解決:

    先把文字圓形排列,然後文字圓進行縮放(均勻壓縮)。

 

先上效果圖:

             圓形中英文圓形印章        中文圓形印章          橢圓中英文印章             橢圓中文印章

                                   

 

 

硬貨

程式碼:

圓形

  1 <!DOCTYPE HTML>
  2   <HEAD>
  3     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4         <title>圓形公章</title>
  5     </HEAD>
  6     <body>
  7         <BR>
  8         輸入單位(14位,多了自己調):<input id="dw" width="50" type="text" value='某某某某某某某某某單位人事部'/>
  9         <br>
 10          輸入單位(英文):<input id="edw" width="50" type="text" value='WTYRBCHFBBDHCBFVBDDD'/>
 11          <br>
 12         章下面文字:<input id="mdtext" width="50" type="text" value='專用章'/>
 13         <div id="sealdiv" >
 14             <canvas id="canvas" width="250" height="250"></canvas>
 15         </div>
 16         <input type="button" onclick="javascript:createSealEx();" value="生成中英公章"/>
 17         <input type="button" onclick="javascript:createSealEx2();" value="生成中公章"/>
 18     </body>
 19     
 20     <SCRIPT LANGUAGE="javascript">
 21     
 22     function createSealEx(){
 23        var dw = document.getElementById("dw");
 24        var edw = document.getElementById("edw");
 25        var mdtext = document.getElementById("mdtext");  
 26        var tuzhangdiv = document.getElementById("tuzhangdiv"); 
 27        tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
 28        createSeal('canvas',dw.value,edw.value,mdtext.value);
 29        
 30        
 31     }
 32     function createSealEx2(){
 33        var dw = document.getElementById("dw");
 34        var edw = document.getElementById("edw");
 35        var mdtext = document.getElementById("mdtext");  
 36        var tuzhangdiv = document.getElementById("tuzhangdiv"); 
 37        tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
 38        createSeal11('canvas',dw.value,mdtext.value);
 39        
 40     }
 41     
 42     function createSeal11(id,company,name){
 43     
 44     var canvas = document.getElementById(id);  
 45     var context = canvas.getContext('2d');
 46     
 47     // 繪製印章邊框   
 48     var width=canvas.width/2;
 49     var height=canvas.height/2;
 50     context.lineWidth=2;
 51     context.strokeStyle="#f00";
 52     context.beginPath();
 53     context.arc(width,height,78,0,Math.PI*2);
 54     context.stroke();
 55     context.save(); 
 56     
 57     context.lineWidth=1;
 58     context.strokeStyle="#f00";
 59     context.beginPath();
 60     context.arc(width,height,75,0,Math.PI*2);
 61     context.stroke();
 62     context.save(); 
 63 
 64     //畫五角星
 65     create5star(context,width,height,25,"#f00",0);
 66 
 67     // 繪製印章名稱   
 68     context.font = '18px Helvetica';
 69     context.textBaseline = 'middle';//設定文字的垂直對齊方式
 70     context.textAlign = 'center'; //設定文字的水平對對齊方式
 71     context.lineWidth=1;
 72     context.fillStyle = '#f00';
 73     context.fillText(name,width,height+53);
 74 
 75     // 繪製印章單位   
 76     context.translate(width,height);// 平移到此位置,
 77     context.font = '20px Helvetica'
 78     var count = company.length;// 字數   
 79     var angle = 4*Math.PI/(3*(count - 1));// 字間角度   
 80     var chars = company.split("");   
 81     var c;
 82     for (var i = 0; i < count; i++){
 83         c = chars[i];// 需要繪製的字元   
 84         if(i==0)
 85             context.rotate(5*Math.PI/6);
 86         else
 87           context.rotate(angle);
 88         context.save(); 
 89         context.translate(64, 0);// 平移到此位置,此時字和x軸垂直   
 90         context.rotate(Math.PI/2);// 旋轉90度,讓字平行於x軸   
 91         context.fillText(c,0, 5);// 此點為字的中心點   
 92         context.restore();             
 93     }
 94 
 95     
 96 }
 97 
102     
103    function createSeal(id,company,ecompany,name){
104         var canvas = document.getElementById(id); 
105         var context = canvas.getContext('2d');    
106         context.translate(0,0);//移動座標原點 
107         // 繪製印章邊框   
108         var width=canvas.width/2;
109         var height=canvas.height/2;
110         //邊框1
111         context.lineWidth=2;
112         context.strokeStyle="#f00";
113         context.beginPath();
114         context.arc(width,height,78,0,Math.PI*2);
115         context.stroke();
116         context.save(); 
117         
118         //邊框2
119         context.lineWidth=1;
120         context.strokeStyle="#f00";
121         context.beginPath();
122         context.arc(width,height,63,0,Math.PI*2);
123         context.stroke();
124         context.save();
125     
126     
127         //畫五角星
128         create5star(context,width,height,20,"#f00",0);
129         
130         // 繪製印章型別
131         context.font = 'bolder 15px SimSun';
132         context.textBaseline = 'middle';//設定文字的垂直對齊方式
133         context.textAlign = 'center'; //設定文字的水平對對齊方式
134         context.lineWidth=1;
135         context.fillStyle = '#f00';
136         context.fillText(name,width,height+50);
137         
138         
139         // 繪製印章中文單位   
140         context.translate(width,height);// 平移到此位置, 
141         context.font = 'bolder 18px SimSun'
142         var count = company.length;// 字數   
143         var angle = 4*Math.PI/(3*(count-1));// 字間角度   
144         var chars = company.split("");   
145         var c;
146         for (var i = 0; i < count; i++){
147             c = chars[i];// 需要繪製的字元   
148             if(i==0)
149                 context.rotate(5*Math.PI/6);
150             else
151               context.rotate(angle);
152             context.save(); 
153             // 平移到此位置,此時字和x軸垂直,第一個引數是與圓外邊的距離,越大距離越近   
154             context.translate(52, 0);
155             context.rotate(Math.PI/2);// 旋轉90度,讓字平行於x軸   
156             context.fillText(c,0, 5);// 此點為字的中心點   
157             context.restore();             
158         }
159         //繪製印章英文單位
160         context.translate(width-80,height-80);// 平移到此位置,
161         context.font = 'bolder 10px SimSun';
162         var ecount = ecompany.length;// 字數   
163         var eangle = (5*Math.PI)/(3*(ecount));// 字間角度   
164         var echars = ecompany.split("");   
165         var ec;
166         for (var j = 0; j < ecount; j++){
167             ec = echars[j];// 需要繪製的字元   
168             if(j==0)
169                 context.rotate(6*Math.PI/7-1);
170             else
171               context.rotate(eangle);
172             context.save(); 
173             // 平移到此位置,此時字和x軸垂直,第一個引數是與圓外邊的距離,越大距離越近   
174             context.translate(74, 0);
175             context.rotate(Math.PI/2);// 旋轉90度,讓字平行於x軸   
176             context.fillText(ec,0, 4.8);// 此點為字的中心點   
177             context.restore();             
178         }
179     
185  
186 } 
187 
188  //繪製五角星  
189    function create5star(context,sx,sy,radius,color,rotato){
190         context.save();  
191         context.fillStyle=color;  
192         context.translate(sx,sy);//移動座標原點  
193         context.rotate(Math.PI+rotato);//旋轉  
194         context.beginPath();//建立路徑  
195         var x = Math.sin(0);  
196         var y= Math.cos(0);  
197         var dig = Math.PI/5 *4;  
198         for(var i = 0;i< 5;i++){//畫五角星的五條邊  
199          var x = Math.sin(i*dig);  
200          var y = Math.cos(i*dig);  
201          context.lineTo(x*radius,y*radius);  
202         }   
203         context.closePath();  
204         context.stroke();  
205         context.fill();  
206         context.restore();  
207     }
208    
227     
228 </html>

 

橢圓

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>橢圓</title>
    
</head>
<body>
        輸入單位(支援最多14位,多了自己調):<input id="dw" width="50" type="text" value='測試印章橢圓科技有限公司公司'/>
        <br>
         輸入單位(英文):<input id="edw" width="50" type="text" value='EASTPORTCOMPANY'/>
         <br>
        章下面文字:<input id="mdtext" width="50" type="text" value='公司章'/>
    
        <div id="sealdiv" >
            <canvas id="canvas" width="165" height="165"></canvas>
        </div>
        </div>
        <input type="button" onclick="javascript:createSealEx();" value="生成中文公章"/>
        <input type="button" onclick="javascript:createSealEx2();" value="生成中英公章"/>
        
<script>

    function createSealEx(){
       var dw = document.getElementById("dw"); 
       var edw = document.getElementById("edw");
       var mdtext = document.getElementById("mdtext");  
       var sealdiv = document.getElementById("sealdiv"); 
       sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
       createSeal2('canvas',dw.value,mdtext.value);
    }
    function createSealEx2(){
       var dw = document.getElementById("dw"); 
       var edw = document.getElementById("edw");
       var mdtext = document.getElementById("mdtext");  
       var sealdiv = document.getElementById("sealdiv"); 
       sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
       createSeal1('canvas',dw.value,edw.value,mdtext.value);
    }
    
    function createSeal1(id,company,ecompany,name){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.strokeStyle="red";//設定邊框顏色
        context.textBaseline = 'middle';//設定文字的垂直對齊方式
        context.textAlign = 'center'; //設定文字的水平對對齊方式
        context.lineWidth = 2;//橢圓1寬度
        //3個引數: 左邊距 上邊據 寬度 橢圓扁度
        BezierEllipse4(context, 85, 79, 79, 55); //橢圓1
        context.lineWidth = 1;
        BezierEllipse4(context, 85, 79, 76, 52); //橢圓2
        context.lineWidth = 2;
        BezierEllipse4(context, 85, 79, 63, 39); //橢圓3
        // 繪製印章型別
        context.font = 'bolder 10px SimSun';//設定字型大小 樣式
        context.fillStyle = 'red';//設定字型顏色
        context.fillText(name,canvas.width/2+3,canvas.height/2+25);    
        context.save(); //儲存上述操作
        //繪製英文
        var circle={
            x:canvas.width/2,
            y:canvas.height/2,
            radius:58
        };
        var startAngle=220;//控制字元起始位置度數
        var endAngle =-40;//首位字元相隔度數
        var radius=circle.radius //圓的半徑
        var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//每個字母佔的弧度
        context.font="bolder 10px SimSun"
        context.lineWidth=1;//設定字型胖瘦
        var ratioX = 70 / circle.radius; //橫軸縮放比率
        var ratioY = 45 / circle.radius; //縱軸縮放比率
        //進行縮放(均勻壓縮) 重點
        context.scale(ratioX, ratioY);
        var index=0;
        for(var index=0;index<ecompany.length;index++){
            //儲存之前的設定開始繪畫
            context.save();
            context.beginPath();
            context.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19)//繪製點 +-微調
            context.rotate((Math.PI/2)-(Math.PI/180)*startAngle) ;  //Math.PI/2為旋轉90度  Math.PI/180*X為旋轉多少度
            context.fillText(ecompany.charAt(index),0,0);
            context.strokeText(ecompany.charAt(index),0,0);
            startAngle-=angleDecrement;
            context.restore();
        }
        
        // 繪製印章型別
        context.font = 'bolder 14px SimSun';
        context.lineWidth=1;
        context.fillStyle = '#f00';
        context.fillText(company.substring(0,6),canvas.width/2-11,canvas.height/2+6);    
        context.save(); 
        context.font = 'bolder 14px SimSun';
        context.lineWidth=1;
        context.fillStyle = '#f00';
        context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25);    
        context.save();
        context.font = 'bolder 14px SimSun';
        context.lineWidth=1;
        context.fillStyle = '#f00';
        context.fillText(company.substring(12,company.length),canvas.width/2-12,canvas.height/2+40);    
        context.save();

    }
    function createSeal2(id,company,name){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.strokeStyle="red";//設定文字顏色
        context.textBaseline = 'middle';//設定文字的垂直對齊方式
        context.textAlign = 'center'; //設定文字的水平對對齊方式
        context.lineWidth = 2;//橢圓1寬度
        //3個引數: 左邊距 上邊據 寬度 橢圓扁度
        BezierEllipse4(context, 85, 79, 79, 55); //橢圓1
        context.lineWidth = 1;
        BezierEllipse4(context, 85, 79, 76, 52); //橢圓2
        
        // 繪製印章型別
        context.font = 'bolder 15px SimSun';
        context.lineWidth=1;
        context.fillStyle = '#f00';
        context.fillText(name,canvas.width/2+3,canvas.height/2+10);    
        context.save(); 

        //繪製中文
        var ccircle={
            x:canvas.width/2,
            y:canvas.height/2,
            radius:59
        };
        var cstartAngle=170;//控制字元起始位置度數
        var cendAngle =15;//首位字元相隔度數
        var cradius=ccircle.radius //圓的半徑
        var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//每個字母佔的弧度
        context.font="12px SimSun"
        var cratioX = 66 / ccircle.radius; //橫軸縮放比率
        var cratioY = 57 / ccircle.radius; //縱軸縮放比率
        //進行縮放(均勻壓縮)
        context.scale(cratioX, cratioY);
        var cindex=0;
        for(var cindex=0;cindex<company.length;cindex++){
            context.save()
            context.beginPath()
            //繪製點
            context.translate(ccircle.x+Math.cos((Math.PI/180)*cstartAngle)*cradius-6,ccircle.y-Math.sin((Math.PI/180)*cstartAngle)*cradius+14)
            context.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle)   //Math.PI/2為旋轉90度  Math.PI/180*X為旋轉多少度
            context.fillText(company.charAt(cindex),0,0)
            context.strokeText(company.charAt(cindex),0,0)
            cstartAngle-=cangleDecrement
            context.restore()
        }

    }    
    function BezierEllipse4(ctx, x, y, a, b){
        var k = .5522848,
        ox = a * k, // 水平控制點偏移量
        oy = b * k; // 垂直控制點偏移量</p> <p> 
        ctx.beginPath();
        //從橢圓的左端點開始順時針繪製四條三次貝塞爾曲線
        ctx.moveTo(x - a, y);
        ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
        ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
        ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
        ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
        ctx.closePath();
        ctx.stroke();
    };
    
</script>
</body>
</html>

&n