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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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 smarty 二级分类代码和模版循环例子
2011/06/16 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python绘制热力图示例
2019/09/27 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
幼儿园教研活动方案
2014/01/19 职场文书
快餐公司创业计划书
2014/04/29 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
如何利用python实现Simhash算法
2022/06/28 Python
Vue Element plus使用方法梳理
2022/12/24 Vue.js