Electronic signature picture collection
There are two complementary ways to collect seal images:
Method 1: Generate a seal image online, but this method has a drawback. There is a limit on the number of words in the company name in the seal. The more words, the more likely it is that it will be ruined.
Method 2: Upload the scanned copy of the seal, and the system will process the scanned image and extract the seal image from the scanned copy.
This article introduces method 1. Method 2 will be released later. Method 1 originally wanted to use Java to generate seal images. Although there are many ready-made codes on the Internet, the size of the seal image needs to be adjusted to meet the specifications. Seal size: circular seal size 43mm*43mm (error Allowable range 2-3mm), oval seal 43mm*26mm (allowable error range 2-3mm) is closer to the real seal. I thought it would be more difficult to debug Java, so I switched to HTML5 for implementation.
Ideas for implementing round seals and elliptical seals in html5:The HTML5 <canvas> tag is used to draw images (through scripts, usually JavaScript), canvas is used for seal painting, and then the seal image is generated through canvas and then converted into a base64 image.
difficulty:The curved text of the oval seal is more difficult to produce. Although there is JQ js on the Internet that can directly generate the curved character arrangement, it cannot be converted into canvas.
solve:First arrange the text in a circle, and then scale (evenly compress) the text circle.
First, the renderings:
Round Chinese and English round seal Chinese round seal Oval Chinese and English seal Oval Chinese seal
Hard goodsCode:
round
<!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Round official seal</title> </HEAD> <body> <BR> Input unit (14 digits, adjust by yourself if necessary): <input id=dw width=50 type=text value='The Human Resources Department of a certain unit'/> <br> Input unit (English): <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> Text below the chapter: <input id=mdtext width=50 type=text value='Special Chapter'/> <div id=sealdiv > <canvas id=canvas width=250 height=250></canvas> </div> <input type=button onclick=javascript:createSealEx(); value=Generate Chinese and English official seal/> <input type=button onclick=javascript:createSealEx2(); value=Generate Chinese official seal/> </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'); // Draw the seal border 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(); //Draw a five-pointed star create5star(context,width,height,25,#f00,0 ); // Draw the seal name context.font = '18px Helvetica'; context.textBaseline = 'middle'; // Set the vertical alignment of the text context.textAlign = 'center'; //Set the horizontal alignment of the text context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+53); // Draw the seal unit context.translate( width,height);//Translate to this position, context.font = '20px Helvetica' var count = company.length;//Number of words var angle = 4*Math.PI/(3*(count - 1));//Angle between words var chars = company.split(); var c; for (var i = 0; i < count; i++){ c = chars [i];//Characters to be drawn if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle); context.save(); context.translate(64, 0);//Translate to this position, when the word is perpendicular to the x-axis context.rotate(Math.PI/2);//Rotate 90 degrees, so that the word is parallel to the x-axis context.fillText(c,0, 5) ;//This point is the center point of the word context.restore(); } } function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.translate(0,0);//Move the coordinate origin//Draw the seal border var width=canvas.width/2; var height=canvas.height/2; //Border 1 context.lineWidth=2; context.strokeStyle=#f00; context.beginPath(); context.arc(width,height,78,0,Math.PI*2); context.stroke(); context.save(); //Border 2 context.lineWidth=1; context.strokeStyle=#f00; context. beginPath(); context.arc(width,height,63,0,Math.PI*2); context.stroke(); context.save(); //Draw a five-pointed star create5star(context,width,height,20,#f00,0); //Draw the seal type context.font = 'bolder 15px SimSun'; context.textBaseline = 'middle'; //Set the verticality of the text Alignment context.textAlign = 'center'; //Set the horizontal alignment of text context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+50); // Draw the Chinese unit of the seal context.translate(width,height); // Translate to this position, context.font = 'bolder 18px SimSun' var count = company.length ;//Number of words var angle = 4*Math.PI/(3*(count-1));//Angle between words var chars = company.split(); var c; for (var i = 0; i < count; i++){ c = chars[i];//Characters to be drawn if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle); context.save(); // Translate to this position. At this time, the word is perpendicular to the x-axis. The first parameter is the distance from the outside of the circle. The larger the distance, the closer context.translate(52, 0); context.rotate(Math.PI/2);// Rotate 90 degrees to make the word parallel to the x-axis context.fillText(c,0, 5);//This point is the center point of the word context.restore(); } //Draw the English unit of the seal context.translate(width-80,height-80);//Translate to this position, context.font = 'bolder 10px SimSun'; var ecount = ecompany.length;//Number of words var eangle = (5*Math.PI)/(3*(ecount));//Angle between words var echars = ecompany.split(); var ec; for (var j = 0; j < ecount; j++){ ec = echars[j];//Characters to be drawn if(j==0) context.rotate(6*Math.PI/7-1); else context.rotate(eangle); context.save(); // Translate to this position. At this time, the word is perpendicular to the x-axis. The first parameter is the distance from the outside of the circle. The larger the distance, the closer context.translate(74, 0); context.rotate(Math.PI/2);// Rotate 90 degrees so that the text is parallel to the x-axis context.fillText(ec,0, 4.8);// This point is the center point of the word context.restore(); } } //Draw a five-pointed star function create5star(context,sx,sy,radius,color,rotato){ context.save(); context.fillStyle=color; context. translate(sx,sy);//Move the coordinate origin context.rotate(Math.PI+rotato);//Rotate context.beginPath();//Create a path var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; for(var i = 0;i< 5;i++){//Draw the five sides of the five-pointed star 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>oval
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Ellipse</title> </head><body> Input unit (Supports up to 14 digits, adjust by yourself): <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> Input unit (English): <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> Text below the chapter: <input id=mdtext width=50 type=text value='Company Chapter'/> <div id=sealdiv > <canvas id=canvas width=165 height=165></canvas> </div> </div> <input type=button onclick=javascript:createSealEx(); value=Generate Chinese official seal/> <input type=button onclick=javascript:createSealEx2(); value=Generate Chinese and English official seal/> <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;//Set the border color context.textBaseline = 'middle ';//Set the vertical alignment of text context.textAlign = 'center'; //Set the horizontal alignment of text context.lineWidth = 2;//Width of ellipse 1//3 parameters: left margin top edge width ellipse flatness BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; BezierEllipse4(context, 85, 79, 76, 52); //Ellipse 2 context.lineWidth = 2; BezierEllipse4(context, 85, 79, 63, 39); //Ellipse 3 //Draw the seal type context.font = 'bolder 10px SimSun';//Set the font size style context.fillStyle = 'red';//Set the font color context.fillText (name,canvas.width/2+3,canvas.height/2+25); context.save(); //Save the above operation//Draw English var circle={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//Control the degree of the starting position of the character var endAngle =-40;//The degree of the first character var radius=circle .radius //The radius of the circle var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//The arc occupied by each letter context.font=bolder 10px SimSun context.lineWidth=1; //Set the font fat and thin var ratioX = 70 / circle.radius; //Horizontal axis scaling ratio var ratioY = 45 / circle.radius; //Vertical axis scaling ratio // Scale (uniformly Compression) Key points context.scale(ratioX, ratioY); var index=0; for(var index=0;index<ecompany.length;index++){ //Save the previous settings and start painting 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) //Draw point +- fine-tune context.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 is the rotation of 90 degrees Math.PI/180*X is the degree of rotation context.fillText(ecompany.charAt(index),0,0); context.strokeText(ecompany.charAt(index),0 ,0); startAngle-=angleDecrement; context.restore(); } // Drawing seal type 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; //Set the text color context.textBaseline = 'middle'; //Set the vertical alignment of the text context.textAlign = 'center'; //Set the horizontal alignment of the text context.lineWidth = 2; //Width of Ellipse 1 //3 parameters: left margin, top edge, width, flatness of ellipse BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; BezierEllipse4(context, 85, 79, 76, 52); //Ellipse 2 //Drawing seal type context.font = 'bolder 15px SimSun'; context.lineWidth=1; context.fillStyle = '# f00'; context.fillText(name,canvas.width/2+3,canvas.height/2+10); context.save(); //Draw Chinese var ccircle={ x:canvas.width/2, y:canvas.height/2, radius:59 }; var cstartAngle=170;//Control the starting position of the character var cendAngle =15;//The degree of separation between the first characters var cradius=ccircle.radius //The radius of the circle var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//The arc occupied by each letter context.font=12px SimSun var cratioX = 66 / ccircle.radius; //Horizontal axis scaling ratio var cratioY = 57 / ccircle .radius; //vertical axis scaling ratio//scaling (uniform compression) context.scale(cratioX, cratioY); var cindex=0; for(var cindex=0;cindex<company.length;cindex++){ context.save() context.beginPath() //Draw point 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 is the rotation of 90 degrees Math.PI/180*X is the degree of rotation 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, // Horizontal control point offset oy = b * k; // Vertical control point offset</p> <p> ctx.beginPath(); //From the left end of the ellipse Draw four cubic Bezier curves clockwise starting from the point 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>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.