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。
解决：
先把⽂字圆形排列，然后⽂字圆进⾏缩放（均匀压缩）。
先上效果图：
圆形中英⽂圆形印章      　中⽂圆形印章          椭圆中英⽂印章      椭圆中⽂印章
硬货
代码：
圆形
<!DOCTYPE HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>圆形公章</title>
</HEAD>
<body>
<BR>
输⼊单位（14位，多了⾃⼰调）：<input id="dw" width="50" type="text" value='某某某某某某某某某单位⼈事部'/>
<br>
输⼊单位(英⽂)：<input id="edw" width="50" type="text" value='WTYRBCHFBBDHCBFVBDDD'/>
<br>
章下⾯⽂字：<input id="mdtext" width="50" type="text" value='专⽤章'/>
<div id="sealdiv" >
<canvas id="canvas" width="250" height="250"></canvas>
</div>
<input type="button" onclick="javascript:createSealEx();" value="⽣成中英公章"/>
<input type="button" onclick="javascript:createSealEx2();" value="⽣成中公章"/>
</body>
<SCRIPT LANGUAGE="javascript">
function createSealEx(){
var dw = ElementById("dw");
var edw = ElementById("edw");
var mdtext = ElementById("mdtext");
var tuzhangdiv = ElementById("tuzhangdiv");
tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";      createSeal('canvas',dw.value,edw.value,mdtext.value);
}
function createSealEx2(){
var dw = ElementById("dw");
var edw = ElementById("edw");
var mdtext = ElementById("mdtext");
var tuzhangdiv = ElementById("tuzhangdiv");
tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";      createSeal11('canvas',dw.value,mdtext.value);
}
function createSeal11(id,company,name){
var canvas = ElementById(id);
var context = Context('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.lineWidth=1;
context.fillStyle = '#f00';
context.fillText(name,width,height+53);
// 绘制印章单位
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)
else
html5轮播图代码效果图ate(angle);
context.save();
context.fillText(c,0, 5);// 此点为字的中⼼点
}
}
function createSeal(id,company,ecompany,name){
var canvas = ElementById(id);
var context = Context('2d');
// 绘制印章边框
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.lineWidth=1;
context.fillStyle = '#f00';
context.fillText(name,width,height+50);
// 绘制印章中⽂单位
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)
else
context.save();
// 平移到此位置，此时字和x轴垂直，第⼀个参数是与圆外边的距离，越⼤距离越近            anslate(52, 0);
context.fillText(c,0, 5);// 此点为字的中⼼点
}
//绘制印章英⽂单位
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)
else
context.save();
// 平移到此位置，此时字和x轴垂直，第⼀个参数是与圆外边的距离，越⼤距离越近            anslate(74, 0);
context.fillText(ec,0, 4.8);// 此点为字的中⼼点
}
}
//绘制五⾓星
function create5star(context,sx,sy,radius,color,rotato){
context.save();
context.fillStyle=color;
context.beginPath();//创建路径
var x = Math.sin(0);
var y= s(0);
var dig = Math.PI/5 *4;
for(var i = 0;i< 5;i++){//画五⾓星的五条边
var x = Math.sin(i*dig);
var y = s(i*dig);
context.lineTo(x*radius,y*radius);
}
context.closePath();
context.stroke();
context.fill();
}
</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 = ElementById("dw");
var edw = ElementById("edw");
var mdtext = ElementById("mdtext");
var sealdiv = ElementById("sealdiv");
sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
createSeal2('canvas',dw.value,mdtext.value);
}
function createSealEx2(){
var dw = ElementById("dw");
var edw = ElementById("edw");
var mdtext = ElementById("mdtext");
var sealdiv = ElementById("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 = ElementById("canvas");
var context = Context("2d");
context.strokeStyle="red";//设置边框颜⾊
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.fillText(ecompany.charAt(index),0,0);
context.strokeText(ecompany.charAt(index),0,0);
startAngle-=angleDecrement;
}
// 绘制印章类型
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 = ElementById("canvas");
var context = Context("2d");
context.strokeStyle="red";//设置⽂本颜⾊
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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。