|
电子签章图片采集
印章图片的采集两种互补方式：
方式1：在线生成印章图片方式，但是这种方式有个弊端，对印章中公司名称字数有限制，字数越多可能就完蛋了。
方式2：上传印章扫描件，系统来对扫描图片进行处理，提取扫描件中的印章图片。
方式1：本来想用java实现印章图片生成，虽然网上有很多现成代码，但需要调整印章图片大小达到规范，印章大小：圆形印章尺寸43mm*43mm(误差允许范围2-3mm),椭圆印章43mm*26mm(误差允许范围2-3mm)比较接近真实印章。想到java调试起来比较费劲，所以改用html5实现。
方式2：考虑移植性，方式2也采用html5来实现，支持照片背景一个颜色的印章图片，其余复杂图片不考虑了。
开始
方式1-----系统生成印章图片
先上效果图：
圆形中英文圆形印章 中文圆形印章 椭圆中英文印章 椭圆中文印章    
body > div > div{
border: 1px solid #9e9e9e;
padding: 20px;
}
印章参数
印章长宽
长(毫米)：
宽(毫米)：
印章颜色
红色
蓝色
印章形状
圆形
椭圆
长方形
圆形、椭圆：长宽推荐50*50，内外间距：1
印章内容
单内容
双内容
印章填充：字体大小：
印章填充（外圈）：字体大小：
印章标记：是否显示标记
印章微调
内外间距(毫米)：
预览转换成png图片
展示图：
png图片(右键另存)：![]()
$(function(){
$("input[name='sealShape']").on('click',function(){
var value = $(this).val();
if('3'==value){
$("#sealHiegth").val(20);
$("#sealWidth").val(50);
$("#sealSpacing").val(5);
}else{
$("#sealHiegth").val(50);
$("#sealWidth").val(50);
$("#sealSpacing").val(1);
}
});
$("input[name='sealdanshuang']").on('click',function(){
var value = $(this).val();
if('2'==value){
$("#shuang").show();
}else{
$("#shuang").hide();
}
});
});
function toImage(){
var img = document.getElementById('sealPic');
var data = createSeal().toDataURL( 'image/png', 1 ); //1表示质量(无损压缩)
img.src = data;
}
function createSeal(){
var sealHiegth = $("#sealHiegth").val();
var sealWidth = $("#sealWidth").val();
var sealFontSize = $("#sealFontSize").val()+"px Arial";
var sealFontSize2 = $("#sealFontSize2").val()+"px Arial";
var sealType = $("#sealType").val();
var sealTypeMark = $("input[name='sealTypeMark']:checked").val();
var sealCompany = $("#sealCompany").val();
var sealECompany = $("#sealECompany").val();
var sealColor = $("input[name='sealColor']:checked").val();
var sealShape = $("input[name='sealShape']:checked").val();
var sealSpacing = $("#sealSpacing").val();
var sealdanshuang = $("input[name='sealdanshuang']:checked").val();
//长宽 毫米转px
var height = parseFloat(sealHiegth)*96/25.4;
var width = parseFloat(sealWidth)*96/25.4;
var spacing = parseFloat(sealSpacing)*96/25.4;
$("#sealPicMake").html("");
//印章数据
var sealData={
sealHiegth:height,
sealWidth:width,
sealColor:sealColor,
sealType:sealType,
sealTypeMark:sealTypeMark,
sealCompany:sealCompany,
sealECompany:sealECompany,
sealShape:sealShape,
sealSpacing:spacing,
sealdanshuang:sealdanshuang,
sealFontSize:sealFontSize,
sealFontSize2:sealFontSize2,
};
//html5对象
var canvas = document.getElementById("canvas");;
var context = canvas.getContext('2d');
if(sealData.sealShape=="1"){
//圆形印章
createCircularSeal(context,sealData);
}else if(sealData.sealShape=="2"){
//椭圆印章
createEllipseSeal(context,sealData);
}else if(sealData.sealShape=="3"){
//方形印章
createRectangleSeal(context,sealData);
}else{
alert('刷新页面重试');
}
return canvas;
};
//长方形章
function createRectangleSeal(context,sealData){
//设置文本的垂直对齐方式
context.textBaseline = 'middle';
//设置文本的水平对对齐方式
context.textAlign = 'center';
//设置文本颜色
context.lineWidth = 2;
context.strokeStyle=sealData.sealColor;
context.strokeRect(1,1,canvas.width-5,canvas.height-5);
context.lineWidth = 1;
context.strokeRect(4,4,canvas.width-11,canvas.height-11);
//中文
context.save();
context.font = sealData.sealFontSize;
context.lineWidth=2;
context.fillStyle = sealData.sealColor;
var hideshhh = 1.4;
if(sealData.sealdanshuang=="2"){
hideshhh = 1.6;
}
context.fillText(sealData.sealCompany,canvas.width/2,canvas.height/hideshhh-sealData.sealSpacing);
context.restore();
if(sealData.sealdanshuang=="2"){
//英文
context.save();
context.font = sealData.sealFontSize2;
context.lineWidth=2;
context.fillStyle = sealData.sealColor;
context.fillText(sealData.sealECompany,canvas.width/2,canvas.height-sealData.sealSpacing);
context.restore();
}
if(sealData.sealTypeMark){
// 绘制印章类型
context.save();
context.lineWidth=2;
context.fillStyle = sealData.sealColor;
context.fillText(sealData.sealType,canvas.width/2,canvas.height/2+sealData.sealSpacing);
context.restore();
}
}
//椭圆印章
function createEllipseSeal(context,sealData){
var width=canvas.width/2;
var height=canvas.height/2;
//设置文本颜色
context.strokeStyle=sealData.sealColor;
//设置文本的垂直对齐方式
context.textBaseline = 'middle';
//设置文本的水平对对齐方式
context.textAlign = 'center';
//3个参数：左边距 上边据 宽度 椭圆扁度
//椭圆1
context.lineWidth = 2;
BezierEllipse4(context, width+2, height-1, width-4, height-24);
//椭圆2
context.lineWidth = 1;
BezierEllipse4(context, width+2, height-1, width-6, height-26);
if(sealData.sealdanshuang=="1"){
//绘制英文
var circle={
x:width,
y:height,
radius:width-21
};
//控制字符起始位置度数
var startAngle=190;
//首位字符相隔度数
var endAngle =-10;
//圆的半径
var radius=circle.radius-sealData.sealSpacing
//每个字母占的弧度
var angleDecrement=(startAngle-endAngle)/(sealData.sealCompany.length-1)
context.font=sealData.sealFontSize;
//横轴缩放比率
var ratioX = (width-17) / circle.radius;
//纵轴缩放比率
var ratioY = (height-34) / circle.radius;
//进行缩放（均匀压缩）
context.scale(ratioX, ratioY);
var index=0;
context.lineWidth=1;
for(var index=0;index |