HTML5印章绘制电子签章图片，中文英文椭圆章、中文英文椭圆印章
原文: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 = document.getElementById("dw");
var edw = document.getElementById("edw");
var mdtext = document.getElementById("mdtext");
var tuzhangdiv = document.getElementById("tuzhangdiv");
tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
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 ="<canvas id='canvas' width='160' height='160'></canvas>";
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();
} </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>
HTML5印章绘制电子签章图片，中文英文椭圆章、中文英文椭圆印章的更多相关文章
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- ofd文件电子签章实现方法
前言 文档处理一般经过三个环节:流.版.签:流式软件负责编辑,如:office.wps等.版式软件负责文档定型,保证显示样式不跑偏:版式文件格式有两种:pdf.ofd.签章软件负责对版式文档签章.签章 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 【电子签章】HTML格式合同转化成PDF文件
代码地址如下:http://www.demodashi.com/demo/12476.html 一.主要思路 通过itextpdf 生成想要的pdf 文件 通过itextpdf 中 XMLWorker ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- [ubuntu]中文用户目录路径改英文
ubuntu中文版home文件夹里用目录的"桌面"."图片"."视频"虽然对于中文使用者看起来舒适直观,但是对于bash使用来说简直是障碍. ...
- 【项目1-1】使用HTML5+CSS3绘制HTML5的logo
作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...
- 【图片识别】Java中使用tess4J进行图片文字识别（支持中文）（转）
http://blog.csdn.net/wsk1103/article/details/54173282 java中识别文字比较简单,使用的软件是tesseractocr(使用的版本是3.02,3以 ...
随机推荐
- 2017-3-8 html基础标签
<head></head>头标签 <title>页面标签</title> <body>文档的内容可在浏览器中显视的</body> ...
- Try running RemoteDll as Administrator
在使用RemoteDll注入动态库的时候发现注入有的动态库会提示下面的错误, LoadLibrary on remote process [1968 - Explorer.exe] failed. T ...
- centos7.5下coredns+etcd搭建DNS服务器
coredns简介 安装etcd 安装coredns 设置域名解析 A记录 AAAA记录 CNAME记录 SRV记录 TXT记录 coredns简介 CoreDNS是一个DNS服务器,和Caddy S ...
- JAVA IntelliJ IDEA for mac/jdk的安装及环境配置、运行
现在配置完之后再回头看看,其实挺简单, 但我还是弄了好几个小时才配置出来, 不过好在是自己配置出来的, 每天都在慢慢进步. 安装及配置步骤如下: JAVA的IDE的话去jetbrains的官网上对应下 ...
- python中oop
转自 http://www.cnblogs.com/BeginMan/p/3510786.html 本文旨在Python复习和总结: 1.如何创建类和实例? # 创建类 class ClassNam ...
- 第一周课堂笔记1th
1. 计算机基本组成 CPU:中央处理器,人的大脑 内存:临时存储数据 (特点:断电即消失,容量小12G 24G) 硬盘:永久存储数据(特点:断电不消失容量大,500G 1T) ...
- ThreadPoolTaskExecutor的配置使用
版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ft305977550/article/de ...
- 在linux 或docker中使用 system.drawing.common
在dockerfile 中添加 FROM microsoft/dotnet:2.1-aspnetcore-runtime RUN apt-get update RUN apt-get install ...
- Activiti学习笔记9 — UserTask共有任务的使用
1.创建流程引擎对象 private ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine(); 2.发布一个流程 ...
- MySQL中查询所有数据库占用磁盘空间大小
查询所有数据库占用磁盘空间大小的SQL语句: 复制代码 代码如下:select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2), ...