电子签章图片采集

印章图片的采集两种互补方式

      方式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。

解决:

    先把文字圆形排列,然后文字圆进行缩放(均匀压缩)。

先上效果图:

             圆形中英文圆形印章        中文圆形印章          椭圆中英文印章             椭圆中文印章

        HTML5印章绘制电子签章图片,中文英文椭圆章、中文英文椭圆印章-LMLPHP             HTML5印章绘制电子签章图片,中文英文椭圆章、中文英文椭圆印章-LMLPHP          HTML5印章绘制电子签章图片,中文英文椭圆章、中文英文椭圆印章-LMLPHP    HTML5印章绘制电子签章图片,中文英文椭圆章、中文英文椭圆印章-LMLPHP

硬货

代码:

圆形

  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>
06-03 15:33