原文: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.      function createSealEx2(){
  32.         var dw = document.getElementById("dw");
  33.         var edw = document.getElementById("edw");
  34.         var mdtext = document.getElementById("mdtext");
  35.         var tuzhangdiv = document.getElementById("tuzhangdiv");
  36.         tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
  37.         createSeal11('canvas',dw.value,mdtext.value);
  38.  
  39.      }
  40.  
  41.      function createSeal11(id,company,name){
  42.  
  43.      var canvas = document.getElementById(id);
  44.      var context = canvas.getContext('2d');
  45.  
  46.      // 绘制印章边框
  47.      var width=canvas.width/2;
  48.      var height=canvas.height/2;
  49.      context.lineWidth=2;
  50.      context.strokeStyle="#f00";
  51.      context.beginPath();
  52.      context.arc(width,height,78,0,Math.PI*2);
  53.      context.stroke();
  54.      context.save(); 
  55.  
  56.      context.lineWidth=1;
  57.      context.strokeStyle="#f00";
  58.      context.beginPath();
  59.      context.arc(width,height,75,0,Math.PI*2);
  60.      context.stroke();
  61.      context.save(); 
  62.  
  63.      //画五角星
  64.      create5star(context,width,height,25,"#f00",0);
  65.  
  66.      // 绘制印章名称
  67.      context.font = '18px Helvetica';
  68.      context.textBaseline = 'middle';//设置文本的垂直对齐方式
  69.      context.textAlign = 'center'; //设置文本的水平对对齐方式
  70.      context.lineWidth=1;
  71.      context.fillStyle = '#f00';
  72.      context.fillText(name,width,height+53);
  73.  
  74.      // 绘制印章单位
  75.      context.translate(width,height);// 平移到此位置,
  76.      context.font = '20px Helvetica'
  77.      var count = company.length;// 字数
  78.      var angle = 4*Math.PI/(3*(count - 1));// 字间角度
  79.      var chars = company.split("");
  80.      var c;
  81.      for (var i = 0; i < count; i++){
  82.          c = chars[i];// 需要绘制的字符
  83.          if(i==0)
  84.              context.rotate(5*Math.PI/6);
  85.          else
  86.            context.rotate(angle);
  87.          context.save();
  88.          context.translate(64, 0);// 平移到此位置,此时字和x轴垂直
  89.          context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴
  90.          context.fillText(c,0, 5);// 此点为字的中心点
  91.          context.restore();
  92.      }
  93.  
  94.  }
  95.  
  96.     function createSeal(id,company,ecompany,name){
  97.          var canvas = document.getElementById(id);
  98.          var context = canvas.getContext('2d');
  99.          context.translate(0,0);//移动坐标原点
  100.          // 绘制印章边框
  101.          var width=canvas.width/2;
  102.          var height=canvas.height/2;
  103.          //边框1
  104.          context.lineWidth=2;
  105.          context.strokeStyle="#f00";
  106.          context.beginPath();
  107.          context.arc(width,height,78,0,Math.PI*2);
  108.          context.stroke();
  109.          context.save(); 
  110.  
  111.          //边框2
  112.          context.lineWidth=1;
  113.          context.strokeStyle="#f00";
  114.          context.beginPath();
  115.          context.arc(width,height,63,0,Math.PI*2);
  116.          context.stroke();
  117.          context.save();
  118.  
  119.          //画五角星
  120.          create5star(context,width,height,20,"#f00",0);
  121.  
  122.          // 绘制印章类型
  123.          context.font = 'bolder 15px SimSun';
  124.          context.textBaseline = 'middle';//设置文本的垂直对齐方式
  125.          context.textAlign = 'center'; //设置文本的水平对对齐方式
  126.          context.lineWidth=1;
  127.          context.fillStyle = '#f00';
  128.          context.fillText(name,width,height+50);
  129.  
  130.          // 绘制印章中文单位
  131.          context.translate(width,height);// 平移到此位置,
  132.          context.font = 'bolder 18px SimSun'
  133.          var count = company.length;// 字数
  134.          var angle = 4*Math.PI/(3*(count-1));// 字间角度
  135.          var chars = company.split("");
  136.          var c;
  137.          for (var i = 0; i < count; i++){
  138.              c = chars[i];// 需要绘制的字符
  139.              if(i==0)
  140.                  context.rotate(5*Math.PI/6);
  141.              else
  142.                context.rotate(angle);
  143.              context.save();
  144.              // 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近
  145.              context.translate(52, 0);
  146.              context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴
  147.              context.fillText(c,0, 5);// 此点为字的中心点
  148.              context.restore();
  149.          }
  150.          //绘制印章英文单位
  151.          context.translate(width-80,height-80);// 平移到此位置,
  152.          context.font = 'bolder 10px SimSun';
  153.          var ecount = ecompany.length;// 字数
  154.          var eangle = (5*Math.PI)/(3*(ecount));// 字间角度
  155.          var echars = ecompany.split("");
  156.          var ec;
  157.          for (var j = 0; j < ecount; j++){
  158.              ec = echars[j];// 需要绘制的字符
  159.              if(j==0)
  160.                  context.rotate(6*Math.PI/7-1);
  161.              else
  162.                context.rotate(eangle);
  163.              context.save();
  164.              // 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近
  165.              context.translate(74, 0);
  166.              context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴
  167.              context.fillText(ec,0, 4.8);// 此点为字的中心点
  168.              context.restore();
  169.          }
  170.  
  171.  } 
  172.  
  173.   //绘制五角星
  174.     function create5star(context,sx,sy,radius,color,rotato){
  175.          context.save();
  176.          context.fillStyle=color;
  177.          context.translate(sx,sy);//移动坐标原点
  178.          context.rotate(Math.PI+rotato);//旋转
  179.          context.beginPath();//创建路径
  180.          var x = Math.sin(0);
  181.          var y= Math.cos(0);
  182.          var dig = Math.PI/5 *4;
  183.          for(var i = 0;i< 5;i++){//画五角星的五条边
  184.           var x = Math.sin(i*dig);
  185.           var y = Math.cos(i*dig);
  186.           context.lineTo(x*radius,y*radius);
  187.          }
  188.          context.closePath();
  189.          context.stroke();
  190.          context.fill();
  191.          context.restore();
  192.      }
  193.  
  194.  </html>

椭圆

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>椭圆</title>
  6.  
  7. </head>
  8. <body>
  9.         输入单位（支持最多14位，多了自己调）：<input id="dw" width="50" type="text" value='测试印章椭圆科技有限公司公司'/>
  10.         <br>
  11.          输入单位(英文)：<input id="edw" width="50" type="text" value='EASTPORTCOMPANY'/>
  12.          <br>
  13.         章下面文字：<input id="mdtext" width="50" type="text" value='公司章'/>
  14.  
  15.         <div id="sealdiv" >
  16.             <canvas id="canvas" width="165" height="165"></canvas>
  17.         </div>
  18.         </div>
  19.         <input type="button" onclick="javascript:createSealEx();" value="生成中文公章"/>
  20.         <input type="button" onclick="javascript:createSealEx2();" value="生成中英公章"/>
  21.  
  22. <script>
  23.  
  24.     function createSealEx(){
  25.        var dw = document.getElementById("dw");
  26.        var edw = document.getElementById("edw");
  27.        var mdtext = document.getElementById("mdtext");
  28.        var sealdiv = document.getElementById("sealdiv");
  29.        sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
  30.        createSeal2('canvas',dw.value,mdtext.value);
  31.     }
  32.     function createSealEx2(){
  33.        var dw = document.getElementById("dw");
  34.        var edw = document.getElementById("edw");
  35.        var mdtext = document.getElementById("mdtext");
  36.        var sealdiv = document.getElementById("sealdiv");
  37.        sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
  38.        createSeal1('canvas',dw.value,edw.value,mdtext.value);
  39.     }
  40.  
  41.     function createSeal1(id,company,ecompany,name){
  42.         var canvas = document.getElementById("canvas");
  43.         var context = canvas.getContext("2d");
  44.         context.strokeStyle="red";//设置边框颜色
  45.         context.textBaseline = 'middle';//设置文本的垂直对齐方式
  46.         context.textAlign = 'center'; //设置文本的水平对对齐方式
  47.         context.lineWidth = 2;//椭圆1宽度
  48.         //3个参数： 左边距 上边据 宽度 椭圆扁度
  49.         BezierEllipse4(context, 85, 79, 79, 55); //椭圆1
  50.         context.lineWidth = 1;
  51.         BezierEllipse4(context, 85, 79, 76, 52); //椭圆2
  52.         context.lineWidth = 2;
  53.         BezierEllipse4(context, 85, 79, 63, 39); //椭圆3
  54.         // 绘制印章类型
  55.         context.font = 'bolder 10px SimSun';//设置字体大小 样式
  56.         context.fillStyle = 'red';//设置字体颜色
  57.         context.fillText(name,canvas.width/2+3,canvas.height/2+25);
  58.         context.save(); //保存上述操作
  59.         //绘制英文
  60.         var circle={
  61.             x:canvas.width/2,
  62.             y:canvas.height/2,
  63.             radius:58
  64.         };
  65.         var startAngle=220;//控制字符起始位置度数
  66.         var endAngle =-40;//首位字符相隔度数
  67.         var radius=circle.radius //圆的半径
  68.         var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//每个字母占的弧度
  69.         context.font="bolder 10px SimSun"
  70.         context.lineWidth=1;//设置字体胖瘦
  71.         var ratioX = 70 / circle.radius; //横轴缩放比率
  72.         var ratioY = 45 / circle.radius; //纵轴缩放比率
  73.         //进行缩放（均匀压缩） 重点
  74.         context.scale(ratioX, ratioY);
  75.         var index=0;
  76.         for(var index=0;index<ecompany.length;index++){
  77.             //保存之前的设置开始绘画
  78.             context.save();
  79.             context.beginPath();
  80.             context.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19)//绘制点 +-微调
  81.             context.rotate((Math.PI/2)-(Math.PI/180)*startAngle) ;  //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
  82.             context.fillText(ecompany.charAt(index),0,0);
  83.             context.strokeText(ecompany.charAt(index),0,0);
  84.             startAngle-=angleDecrement;
  85.             context.restore();
  86.         }
  87.  
  88.         // 绘制印章类型
  89.         context.font = 'bolder 14px SimSun';
  90.         context.lineWidth=1;
  91.         context.fillStyle = '#f00';
  92.         context.fillText(company.substring(0,6),canvas.width/2-11,canvas.height/2+6);
  93.         context.save();
  94.         context.font = 'bolder 14px SimSun';
  95.         context.lineWidth=1;
  96.         context.fillStyle = '#f00';
  97.         context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25);
  98.         context.save();
  99.         context.font = 'bolder 14px SimSun';
  100.         context.lineWidth=1;
  101.         context.fillStyle = '#f00';
  102.         context.fillText(company.substring(12,company.length),canvas.width/2-12,canvas.height/2+40);
  103.         context.save();
  104.  
  105.     }
  106.     function createSeal2(id,company,name){
  107.         var canvas = document.getElementById("canvas");
  108.         var context = canvas.getContext("2d");
  109.         context.strokeStyle="red";//设置文本颜色
  110.         context.textBaseline = 'middle';//设置文本的垂直对齐方式
  111.         context.textAlign = 'center'; //设置文本的水平对对齐方式
  112.         context.lineWidth = 2;//椭圆1宽度
  113.         //3个参数： 左边距 上边据 宽度 椭圆扁度
  114.         BezierEllipse4(context, 85, 79, 79, 55); //椭圆1
  115.         context.lineWidth = 1;
  116.         BezierEllipse4(context, 85, 79, 76, 52); //椭圆2
  117.  
  118.         // 绘制印章类型
  119.         context.font = 'bolder 15px SimSun';
  120.         context.lineWidth=1;
  121.         context.fillStyle = '#f00';
  122.         context.fillText(name,canvas.width/2+3,canvas.height/2+10);
  123.         context.save(); 
  124.  
  125.         //绘制中文
  126.         var ccircle={
  127.             x:canvas.width/2,
  128.             y:canvas.height/2,
  129.             radius:59
  130.         };
  131.         var cstartAngle=170;//控制字符起始位置度数
  132.         var cendAngle =15;//首位字符相隔度数
  133.         var cradius=ccircle.radius //圆的半径
  134.         var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//每个字母占的弧度
  135.         context.font="12px SimSun"
  136.         var cratioX = 66 / ccircle.radius; //横轴缩放比率
  137.         var cratioY = 57 / ccircle.radius; //纵轴缩放比率
  138.         //进行缩放（均匀压缩）
  139.         context.scale(cratioX, cratioY);
  140.         var cindex=0;
  141.         for(var cindex=0;cindex<company.length;cindex++){
  142.             context.save()
  143.             context.beginPath()
  144.             //绘制点
  145.             context.translate(ccircle.x+Math.cos((Math.PI/180)*cstartAngle)*cradius-6,ccircle.y-Math.sin((Math.PI/180)*cstartAngle)*cradius+14)
  146.             context.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle)   //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
  147.             context.fillText(company.charAt(cindex),0,0)
  148.             context.strokeText(company.charAt(cindex),0,0)
  149.             cstartAngle-=cangleDecrement
  150.             context.restore()
  151.         }
  152.  
  153.     }
  154.     function BezierEllipse4(ctx, x, y, a, b){
  155.         var k = .5522848,
  156.         ox = a * k, // 水平控制点偏移量
  157.         oy = b * k; // 垂直控制点偏移量</p> <p>
  158.         ctx.beginPath();
  159.         //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
  160.         ctx.moveTo(x - a, y);
  161.         ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
  162.         ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
  163.         ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
  164.         ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
  165.         ctx.closePath();
  166.         ctx.stroke();
  167.     };
  168.  
  169. </script>
  170. </body>
  171. </html>

HTML5印章绘制电子签章图片，中文英文椭圆章、中文英文椭圆印章的更多相关文章

  1. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  2. ofd文件电子签章实现方法

    前言 文档处理一般经过三个环节:流.版.签:流式软件负责编辑,如:office.wps等.版式软件负责文档定型,保证显示样式不跑偏:版式文件格式有两种:pdf.ofd.签章软件负责对版式文档签章.签章 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 【电子签章】HTML格式合同转化成PDF文件

    代码地址如下:http://www.demodashi.com/demo/12476.html 一.主要思路 通过itextpdf 生成想要的pdf 文件 通过itextpdf 中 XMLWorker ...

  5. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  6. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  7. [ubuntu]中文用户目录路径改英文

    ubuntu中文版home文件夹里用目录的"桌面"."图片"."视频"虽然对于中文使用者看起来舒适直观,但是对于bash使用来说简直是障碍. ...

  8. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  9. 【图片识别】Java中使用tess4J进行图片文字识别（支持中文）（转）

    http://blog.csdn.net/wsk1103/article/details/54173282 java中识别文字比较简单,使用的软件是tesseractocr(使用的版本是3.02,3以 ...

随机推荐

  1. MTT：任意模数NTT

    MTT:任意模数NTT 概述 有时我们用FFT处理的数据很大,而模数可以分解为\(a\cdot 2^k+1\)的形式.次数用FFT精度不够,用NTT又找不到足够大的模数,于是MTT就应运而生了. MT ...

  2. FZU - 2295 Human life:网络流-最大权闭合子图-二进制优化-第九届福建省大学生程序设计竞赛

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 http://acm.fzu.edu.cn/problem.php?pid=2295 htt ...

  3. P2004 领地选择

    P2004 领地选择 题目描述 作为在虚拟世界里统帅千军万马的领袖,小Z认为天时.地利.人和三者是缺一不可的,所以,谨慎地选择首都的位置对于小T来说是非常重要的. 首都被认为是一个占地C*C的正方形. ...

  4. 修改ActiveProcessLinks链表隐藏进程

    在Windows内核中有一个活动进程链表AcvtivePeorecssList.它是一个双向链表,保存着系统中所有进程的EPROCESS结构.特别地,进程的EPROCESS结构包含一个具有指针成员FL ...

  5. linux mysql udf 提权

    连接远程数据库 查看插件库路径 show variables like '%plugin%'; 写入udf库到插件目录: 32位: select unhex('7F454C46020101000000 ...

  6. HTTPS客户端的java实现

    目录 https客户端 指定ssl算法套 浏览器可以作为客户端向服务器发送Http请求,当需要访问后台或第三方Restful接口时,也可以用java实现客户端直接发get/post请求,获取数据. h ...

  7. USACO2005 Cow Acrobats /// 前缀和 oj23402

    题目大意: N (1 ≤ N ≤ 50,000)头牛叠罗汉 找到最优排序使所有牛的风险值总和最小 每头牛重量 (1 ≤ Wi ≤ 10,000) 力量 (1 ≤ Si ≤ 1,000,000,000) ...

  8. ThreadPoolTaskExecutor的配置使用

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ft305977550/article/de ...

  9. iOS 工程实现native 跳转指定的Flutter 页面

    概要 在前一篇文章中我们提到,iOS跳转到Flutter工程指定页面时(多个),Flutter只有单例,设置setInitialRouter 无效,如下 let flutterViewControll ...

  10. xx市xx项目运维工作方案

    注:提供给各位正在做项目,或准备做项目的朋友,仅供参考,用于后期运维提供的方案模板.仅供参考. 因为直接从word复制,会有一些排版的问题.可以留邮箱. xx市xx项目运维工作方案 xx有限公司 20 ...