HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)


Posted in HTML / CSS onJune 03, 2019

电子签章图片采集

印章图片的采集两种互补方式:

方式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。

解决:

先把文字圆形排列,然后文字圆进行缩放(均匀压缩)。

先上效果图:

圆形中英文圆形印章

  中文圆形印章

椭圆中英文印章

椭圆中文印章

HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)

硬货

代码:

圆形

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 #HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 #HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 #HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 #HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 #HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 #HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 #HTML / CSS
You might like
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
preg_match_all使用心得分享
2014/01/31 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php无限级分类实现方法分析
2016/10/19 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
在Python中实现字典反转案例
2020/12/05 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
警示教育片观后感
2015/06/17 职场文书