主頁 > 知識(shí)庫 > HTML5印章繪制電子簽章圖片(中文英文橢圓章、中文英文橢圓印章)

HTML5印章繪制電子簽章圖片(中文英文橢圓章、中文英文橢圓印章)

熱門標(biāo)簽:地圖標(biāo)注自己去過的地方 搜狗星級(jí)酒店地圖標(biāo)注 電銷機(jī)器人視頻 高德地圖標(biāo)注錯(cuò)誤怎么修改 平頂山電子地圖標(biāo)注怎么修改 會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果 標(biāo)準(zhǔn)智能外呼系統(tǒng) 洛陽市伊川縣地圖標(biāo)注中心官網(wǎng) 江蘇高頻外呼系統(tǒng)線路

電子簽章圖片采集

印章圖片的采集兩種互補(bǔ)方式:

      方式1:在線生成印章圖片方式,但是這種方式有個(gè)弊端,對(duì)印章中公司名稱字?jǐn)?shù)有限制,字?jǐn)?shù)越多可能就完蛋了。

      方式2:上傳印章掃描件,系統(tǒng)來對(duì)掃描圖片進(jìn)行處理,提取掃描件中的印章圖片。

本文介紹方式1,方式2待后續(xù)發(fā)布,方式1本來想用java實(shí)現(xiàn)印章圖片生成,雖然網(wǎng)上有很多現(xiàn)成代碼,但需要調(diào)整印章圖片大小達(dá)到規(guī)范,印章大?。簣A形印章尺寸43mm*43mm(誤差允許范圍2-3mm),橢圓印章43mm*26mm(誤差允許范圍2-3mm)比較接近真實(shí)印章。想到j(luò)ava調(diào)試起來比較費(fèi)勁,所以改用html5實(shí)現(xiàn)。

html5實(shí)現(xiàn)圓章,橢圓章思路:

HTML5 <canvas> 標(biāo)簽用于繪制圖像(通過腳本,通常是 JavaScript),canvas進(jìn)行印章繪畫,然后通過canvas生成印章圖片然后轉(zhuǎn)成base64圖片。

難點(diǎn):

橢圓章的曲線文字比較難搞,雖然網(wǎng)上有JQ的js可以直接生成曲線字符排列,但是卻無法轉(zhuǎn)換成canvas。

解決:

先把文字圓形排列,然后文字圓進(jìn)行縮放(均勻壓縮)。

先上效果圖:

圓形中英文圓形印章        中文圓形印章          橢圓中英文印章       橢圓中文印章

硬貨

代碼:

圓形

<!DOCTYPE HTML>
  <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>圓形公章</title>
    </HEAD>
    <body>
        <BR>
        輸入單位(14位,多了自己調(diào)):<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';//設(shè)置文本的垂直對(duì)齊方式
    context.textAlign = 'center'; //設(shè)置文本的水平對(duì)對(duì)齊方式
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(name,width,height+53);

    // 繪制印章單位   
    context.translate(width,height);// 平移到此位置,
    context.font = '20px Helvetica'
    var count = company.length;// 字?jǐn)?shù)   
    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);// 平移到此位置,此時(shí)字和x軸垂直   
        context.rotate(Math.PI/2);// 旋轉(zhuǎn)90度,讓字平行于x軸   
        context.fillText(c,0, 5);// 此點(diǎn)為字的中心點(diǎn)   
        context.restore();             
    }

    
}

    
   function createSeal(id,company,ecompany,name){
        var canvas = document.getElementById(id); 
        var context = canvas.getContext('2d');    
        context.translate(0,0);//移動(dòng)坐標(biāo)原點(diǎn) 
        // 繪制印章邊框   
        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';//設(shè)置文本的垂直對(duì)齊方式
        context.textAlign = 'center'; //設(shè)置文本的水平對(duì)對(duì)齊方式
        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;// 字?jǐn)?shù)   
        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(); 
            // 平移到此位置,此時(shí)字和x軸垂直,第一個(gè)參數(shù)是與圓外邊的距離,越大距離越近   
            context.translate(52, 0);
            context.rotate(Math.PI/2);// 旋轉(zhuǎn)90度,讓字平行于x軸   
            context.fillText(c,0, 5);// 此點(diǎn)為字的中心點(diǎn)   
            context.restore();             
        }
        //繪制印章英文單位
        context.translate(width-80,height-80);// 平移到此位置,
        context.font = 'bolder 10px SimSun';
        var ecount = ecompany.length;// 字?jǐn)?shù)   
        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(); 
            // 平移到此位置,此時(shí)字和x軸垂直,第一個(gè)參數(shù)是與圓外邊的距離,越大距離越近   
            context.translate(74, 0);
            context.rotate(Math.PI/2);// 旋轉(zhuǎn)90度,讓字平行于x軸   
            context.fillText(ec,0, 4.8);// 此點(diǎn)為字的中心點(diǎn)   
            context.restore();             
        }
    
 
} 

 //繪制五角星  
   function create5star(context,sx,sy,radius,color,rotato){
        context.save();  
        context.fillStyle=color;  
        context.translate(sx,sy);//移動(dòng)坐標(biāo)原點(diǎn)  
        context.rotate(Math.PI+rotato);//旋轉(zhuǎn)  
        context.beginPath();//創(chuàng)建路徑  
        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位,多了自己調(diào)):<input id="dw" width="50" type="text" value='測(cè)試印章橢圓科技有限公司公司'/>
        <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";//設(shè)置邊框顏色
        context.textBaseline = 'middle';//設(shè)置文本的垂直對(duì)齊方式
        context.textAlign = 'center'; //設(shè)置文本的水平對(duì)對(duì)齊方式
        context.lineWidth = 2;//橢圓1寬度
        //3個(gè)參數(shù): 左邊距 上邊據(jù) 寬度 橢圓扁度
        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';//設(shè)置字體大小 樣式
        context.fillStyle = 'red';//設(shè)置字體顏色
        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;//控制字符起始位置度數(shù)
        var endAngle =-40;//首位字符相隔度數(shù)
        var radius=circle.radius //圓的半徑
        var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//每個(gè)字母占的弧度
        context.font="bolder 10px SimSun"
        context.lineWidth=1;//設(shè)置字體胖瘦
        var ratioX = 70 / circle.radius; //橫軸縮放比率
        var ratioY = 45 / circle.radius; //縱軸縮放比率
        //進(jìn)行縮放(均勻壓縮) 重點(diǎn)
        context.scale(ratioX, ratioY);
        var index=0;
        for(var index=0;index<ecompany.length;index++){
            //保存之前的設(shè)置開始繪畫
            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)//繪制點(diǎn) +-微調(diào)
            context.rotate((Math.PI/2)-(Math.PI/180)*startAngle) ;  //Math.PI/2為旋轉(zhuǎn)90度  Math.PI/180*X為旋轉(zhuǎn)多少度
            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";//設(shè)置文本顏色
        context.textBaseline = 'middle';//設(shè)置文本的垂直對(duì)齊方式
        context.textAlign = 'center'; //設(shè)置文本的水平對(duì)對(duì)齊方式
        context.lineWidth = 2;//橢圓1寬度
        //3個(gè)參數(shù): 左邊距 上邊據(jù) 寬度 橢圓扁度
        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;//控制字符起始位置度數(shù)
        var cendAngle =15;//首位字符相隔度數(shù)
        var cradius=ccircle.radius //圓的半徑
        var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//每個(gè)字母占的弧度
        context.font="12px SimSun"
        var cratioX = 66 / ccircle.radius; //橫軸縮放比率
        var cratioY = 57 / ccircle.radius; //縱軸縮放比率
        //進(jìn)行縮放(均勻壓縮)
        context.scale(cratioX, cratioY);
        var cindex=0;
        for(var cindex=0;cindex<company.length;cindex++){
            context.save()
            context.beginPath()
            //繪制點(diǎn)
            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為旋轉(zhuǎn)90度  Math.PI/180*X為旋轉(zhuǎn)多少度
            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, // 水平控制點(diǎn)偏移量
        oy = b * k; // 垂直控制點(diǎn)偏移量</p> <p> 
        ctx.beginPath();
        //從橢圓的左端點(diǎn)開始順時(shí)針繪制四條三次貝塞爾曲線
        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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:廣東 鄂爾多斯 廣西 常德 果洛 松原 蚌埠 阿克蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5印章繪制電子簽章圖片(中文英文橢圓章、中文英文橢圓印章)》,本文關(guān)鍵詞  HTML5,印章,繪制,電子,簽章,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5印章繪制電子簽章圖片(中文英文橢圓章、中文英文橢圓印章)》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML5印章繪制電子簽章圖片(中文英文橢圓章、中文英文橢圓印章)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章