HTML5印章如何绘制电子签章图片

这篇文章给大家分享的是有关HTML5印章如何绘制电子签章图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专注于南和网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供南和营销型网站建设，南和网站制作、南和网页设计、南和网站官网定制、微信小程序定制开发服务，打造南和网络公司原创品牌,更为您提供南和网站排名全网营销落地服务。

电子签章图片采集

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

方式1：在线生成印章图片方式，但是这种方式有个弊端，对印章中公司名称字数有限制，字数越多可能就完蛋了。

方式2：上传印章扫描件，系统来对扫描图片进行处理，提取扫描件中的印章图片。

本文介绍方式1，方式2待后续发布，方式1本来想用java实现印章图片生成，虽然网上有很多现成代码，但需要调整印章图片大小达到规范，印章大小：圆形印章尺寸43mm*43mm(误差允许范围2-3mm),椭圆印章43mm*26mm(误差允许范围2-3mm)比较接近真实印章。想到java调试起来比较费劲，所以改用html5实现。

html5实现圆章，椭圆章思路:

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript），canvas进行印章绘画，然后通过canvas生成印章图片然后转成base64图片。

难点：

椭圆章的曲线文字比较难搞，虽然网上有JQ的js可以直接生成曲线字符排列，但是却无法转换成canvas。

解决：

先把文字圆形排列，然后文字圆进行缩放（均匀压缩）。

先上效果图：

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

HTML5印章如何绘制电子签章图片 HTML5印章如何绘制电子签章图片 HTML5印章如何绘制电子签章图片 HTML5印章如何绘制电子签章图片

硬货

代码：

圆形


  
    
        圆形公章
    
    
        

        输入单位（14位，多了自己调）：
        

         输入单位(英文)：
         

        章下面文字：
        
            
        
                                          function createSealEx(){        var dw = document.getElementById("dw");        var edw = document.getElementById("edw");        var mdtext = document.getElementById("mdtext");          var tuzhangdiv = document.getElementById("tuzhangdiv");         tuzhangdiv.innerHTML ="";        createSeal('canvas',dw.value,edw.value,mdtext.value);                     }     function createSealEx2(){        var dw = document.getElementById("dw");        var edw = document.getElementById("edw");        var mdtext = document.getElementById("mdtext");          var tuzhangdiv = document.getElementById("tuzhangdiv");         tuzhangdiv.innerHTML ="";        createSeal11('canvas',dw.value,mdtext.value);             }          function createSeal11(id,company,name){          var canvas = document.getElementById(id);       var context = canvas.getContext('2d');          // 绘制印章边框        var width=canvas.width/2;     var height=canvas.height/2;     context.lineWidth=2;     context.strokeStyle="#f00";     context.beginPath();     context.arc(width,height,78,0,Math.PI*2);     context.stroke();     context.save();           context.lineWidth=1;     context.strokeStyle="#f00";     context.beginPath();     context.arc(width,height,75,0,Math.PI*2);     context.stroke();     context.save();      //画五角星     create5star(context,width,height,25,"#f00",0);     // 绘制印章名称        context.font = '18px Helvetica';     context.textBaseline = 'middle';//设置文本的垂直对齐方式     context.textAlign = 'center'; //设置文本的水平对对齐方式     context.lineWidth=1;     context.fillStyle = '#f00';     context.fillText(name,width,height+53);     // 绘制印章单位        context.translate(width,height);// 平移到此位置,     context.font = '20px Helvetica'     var count = company.length;// 字数        var angle = 4*Math.PI/(3*(count - 1));// 字间角度        var chars = company.split("");        var c;     for (var i = 0; i < count; i++){         c = chars[i];// 需要绘制的字符            if(i==0)             context.rotate(5*Math.PI/6);         else           context.rotate(angle);         context.save();          context.translate(64, 0);// 平移到此位置,此时字和x轴垂直            context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴            context.fillText(c,0, 5);// 此点为字的中心点            context.restore();                  }      }         function createSeal(id,company,ecompany,name){         var canvas = document.getElementById(id);          var context = canvas.getContext('2d');             context.translate(0,0);//移动坐标原点          // 绘制印章边框            var width=canvas.width/2;         var height=canvas.height/2;         //边框1         context.lineWidth=2;         context.strokeStyle="#f00";         context.beginPath();         context.arc(width,height,78,0,Math.PI*2);         context.stroke();         context.save();                   //边框2         context.lineWidth=1;         context.strokeStyle="#f00";         context.beginPath();         context.arc(width,height,63,0,Math.PI*2);         context.stroke();         context.save();                   //画五角星         create5star(context,width,height,20,"#f00",0);                  // 绘制印章类型         context.font = 'bolder 15px SimSun';         context.textBaseline = 'middle';//设置文本的垂直对齐方式         context.textAlign = 'center'; //设置文本的水平对对齐方式         context.lineWidth=1;         context.fillStyle = '#f00';         context.fillText(name,width,height+50);                           // 绘制印章中文单位            context.translate(width,height);// 平移到此位置,          context.font = 'bolder 18px SimSun'         var count = company.length;// 字数            var angle = 4*Math.PI/(3*(count-1));// 字间角度            var chars = company.split("");            var c;         for (var i = 0; i < count; i++){             c = chars[i];// 需要绘制的字符                if(i==0)                 context.rotate(5*Math.PI/6);             else               context.rotate(angle);             context.save();              // 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近                context.translate(52, 0);             context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴                context.fillText(c,0, 5);// 此点为字的中心点                context.restore();                      }         //绘制印章英文单位         context.translate(width-80,height-80);// 平移到此位置,         context.font = 'bolder 10px SimSun';         var ecount = ecompany.length;// 字数            var eangle = (5*Math.PI)/(3*(ecount));// 字间角度            var echars = ecompany.split("");            var ec;         for (var j = 0; j < ecount; j++){             ec = echars[j];// 需要绘制的字符                if(j==0)                 context.rotate(6*Math.PI/7-1);             else               context.rotate(eangle);             context.save();              // 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近                context.translate(74, 0);             context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴                context.fillText(ec,0, 4.8);// 此点为字的中心点                context.restore();                      }        }   //绘制五角星      function create5star(context,sx,sy,radius,color,rotato){         context.save();           context.fillStyle=color;           context.translate(sx,sy);//移动坐标原点           context.rotate(Math.PI+rotato);//旋转           context.beginPath();//创建路径           var x = Math.sin(0);           var y= Math.cos(0);           var dig = Math.PI/5 *4;           for(var i = 0;i< 5;i++){//画五角星的五条边            var x = Math.sin(i*dig);            var y = Math.cos(i*dig);            context.lineTo(x*radius,y*radius);           }            context.closePath();           context.stroke();           context.fill();           context.restore();       }         

椭圆




    
    椭圆
    


        输入单位（支持最多14位，多了自己调）：
        

         输入单位(英文)：
         

        章下面文字：
    
        
            
        
        
                          

感谢各位的阅读！关于“HTML5印章如何绘制电子签章图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


分享名称：HTML5印章如何绘制电子签章图片
当前URL：http://scjbc.cn/article/igeeop.html

其他资讯

联系小谭

企业微信号
友情链接： 南部网站建设   网站建设   香港虚拟主机   中晴建设   简阳做网站   成都保温材料   画册设计制作   乐山轻质隔墙   什邡做网站   蓬安网站建设   

123ABC 成都网站建设，成都定制网站建设——全心全意建网站公司