资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/ddpghp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
遂宁做网站成都免费做网站公司外贸网站设计方案中建建业环保成都水电改造成都小谭网创广告成都门户网站建设彭山网站制作网站制作郫都区消防器材

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图