首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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>

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

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

- Author -

24ks

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5边玩边学（1）画布实现方法
Sep 21 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5中的autofocus（自动聚焦）属性介绍
Apr 23 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
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
接收函(23) 答谢词(97) 事迹材料(636) 方案(1080) 制度(225) 教学反思(909) 广播稿(323) 感言(394) 计划书(118) 证明书(326)
You might like
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
理解JavaScript中的事件
2006/09/23 Javascript
关于文本限制字数的js代码
2007/04/02 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JQuery 自定义CircleAnimation，Animate方法学习笔记
2011/07/10 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
javascript实现数独解法
2015/03/14 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
草莓巧克力：Shari’s Berries
2017/02/07 全球购物
瑞典网上购买现代和复古家具：Reforma
2019/10/21 全球购物
Kiwi.com中国：找到特价机票并发现新目的地
2019/10/27 全球购物
应届硕士毕业生自荐信
2014/05/26 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
2014年平安夜寄语
2014/12/08 职场文书
投资意向协议书
2015/01/29 职场文书
python执行js代码的方法
2021/05/13 Python