HTML5-Siegelzeichnung elektronisches Signaturbild (chinesisches und englisches ovales Siegel, chinesisches und englisches ovales Siegel)

Autor：Eve Cole Aktualisierungszeit：2025-02-17 02:12:02

Sammlung elektronischer Signaturbilder

Es gibt zwei komplementäre Möglichkeiten, Robbenbilder zu sammeln:

Methode 1: Erstellen Sie ein Siegelbild online. Diese Methode hat jedoch einen Nachteil. Die Anzahl der Wörter im Firmennamen im Siegel ist begrenzt.

Methode 2: Laden Sie die gescannte Kopie des Siegels hoch. Das System verarbeitet das gescannte Bild und extrahiert das Siegelbild aus der gescannten Kopie.

In diesem Artikel wird Methode 1 vorgestellt. Methode 1 sollte ursprünglich Java zum Generieren von Siegelbildern verwenden. Obwohl es im Internet viele vorgefertigte Codes gibt, muss die Größe des Siegelbilds angepasst werden Spezifikationen. Siegelgröße: Runde Siegelgröße 43 mm x 43 mm (zulässiger Fehlerbereich 2–3 mm), ovale Siegelgröße 43 mm x 26 mm (zulässiger Fehlerbereich 2–3 mm). Ich dachte, es wäre schwieriger, Java zu debuggen, also bin ich zur Implementierung auf HTML5 umgestiegen.

Ideen zur Implementierung runder Siegel und elliptischer Siegel in HTML5:

Das HTML5-Tag <canvas> wird zum Zeichnen von Bildern verwendet (über Skripte, normalerweise JavaScript), Canvas wird zum Malen von Siegeln verwendet, und dann wird das Siegelbild über Canvas generiert und dann in ein Base64-Bild umgewandelt.

Schwierigkeit:

Der geschwungene Text des ovalen Siegels ist schwieriger zu erzeugen. Obwohl es im Internet JQ-JS gibt, die die geschwungene Zeichenanordnung direkt generieren können, kann sie nicht in Leinwand umgewandelt werden.

lösen:

Ordnen Sie den Text zunächst in einem Kreis an und skalieren Sie dann den Textkreis (gleichmäßig komprimieren).

Zuerst die Renderings:

Rundes chinesisches und englisches Rundsiegel. Chinesisches Rundsiegel. Ovales chinesisches und englisches Siegel. Ovales chinesisches Siegel

Hartware

Code:

runden

 <!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Runde offizielle Siegel</title> </HEAD> <body> <BR> Eingabeeinheit (14 Ziffern, ggf. selbst anpassen): <input id=dw width=50 type=text value='The Human Resources Department of a bestimmter Unit'/> <br> Eingabeeinheit (Englisch): <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> Text unter dem Kapitel: <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=Chinesisches und englisches offizielles Siegel generieren/> <input type=button onclick=javascript:createSealEx2(); value=Chinesisches offizielles Siegel generieren/> </body> <SCRIPT LANGUAGE=javascript> Funktion createSealEx() { var dw = document.getElementById(dw); var edw = document.getElementById(edw); mdtext = document.getElementById(mdtext); var tuzhangdiv = document.getElementById(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 mdtext = document.getElementById(mdtext); var tuzhangdiv = document.getElementById(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); canvas.getContext('2d'); // Den Siegelrand zeichnen var width=canvas.width/2; context.lineWidth=2; context.beginPath(); context.arc(width,height,78,0,Math.PI*2); context.lineWidth=1; context.StrokeStyle=#f00; context.beginPath(); context.arc(width,height,75,0,Math.PI*2); context.Stroke(); //Zeichne einen fünfzackigen Stern create5star(context,width,height,25,# f00,0 ); // Den Siegelnamen zeichnen context.font = '18px Helvetica'; context.textBaseline = 'middle'; // Vertikale Ausrichtung des Textes festlegen context.textAlign = 'center'; //Legen Sie die horizontale Ausrichtung des Textes fest context.fillStyle = '#f00'; context.fillText(name,width,height+53); ( width,height);//In diese Position übersetzen, context.font = '20px Helvetica' var count = company.length;//Anzahl der Wörter var angle = 4*Math.PI/(3*(count - 1));//Winkel zwischen Wörtern var chars = company.split(); for (var i = 0; i < count; i++){ c = chars [i];//Zu zeichnende Zeichen if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle); context.save(64, 0);//In diese Position übersetzen, wenn das Wort senkrecht zur x-Achse steht context.rotate(Math.PI/2);//Um 90 Grad drehen, sodass das Wort parallel zum x-Achsen-Kontext steht. fillText(c,0, 5) ;//Dieser Punkt ist der Mittelpunkt des Wortes context.restore(); } } function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); Var-Kontext = canvas.getContext('2d'); context.translate(0,0);//Verschieben Sie den Koordinatenursprung//Zeichnen Sie den Siegelrand var width=canvas.width/2; / /Border 1 context.lineWidth=2; context.StrokeStyle=#f00; context.arc(width,height,78,0,Math.PI*2); context.save(); //Border 2 context.lineWidth=1; context. beginPath(); context.arc(width,height,63,0,Math.PI*2); context.save(); //Zeichne einen fünfzackigen Stern create5star(context,width,height,20,#f00,0); //Zeichne den Siegeltyp context.font = 'bolder 15px SimSun'; context.textBaseline = 'middle'; Legen Sie die Vertikalität des Textes fest context.textAlign = 'center'; //Legen Sie die horizontale Ausrichtung des Textes fest context.lineWidth=1; context.fillText(name,width,height+50); // Zeichne die chinesische Einheit des Siegels context.translate(width,height); // An diese Position übersetzen, context.font = 'bolder 18px SimSun' var count = company.length ;//Anzahl der Wörter var angle = 4*Math.PI/(3*(count-1));//Winkel zwischen Wörtern var chars = company.split(); c; for (var i = 0; i < count; i++){ c = chars[i];//Zu zeichnende Zeichen if(i==0) context.rotate(5*Math.PI/6); context.rotate(angle); context.save(); Zu diesem Zeitpunkt ist das Wort senkrecht zur x-Achse Abstand, desto näher context.translate(52, 0); context.rotate(Math.PI/2);// Um 90 Grad drehen, um das Wort parallel zur x-Achse zu machen context.fillText(c,0, 5);//Dieser Punkt ist der Mittelpunkt des Wortkontexts. restaurieren(); } //Zeichne die englische Einheit des Siegels context.translate(width-80,height-80);//An diese Position übersetzen, context.font = 'bolder 10px SimSun'; var ecount = ecompany.length;//Anzahl der Wörter var eangle = (5*Math.PI)/(3*(ecount));//Winkel zwischen Wörtern var echars = ecompany.split(); var ec; for (var j = 0; j < ecount; j++){ ec = echars[j];//Zu zeichnende Zeichen if(j==0) context.rotate(6*Math.PI/7-1); context.rotate(eangle); context.save(); Zu diesem Zeitpunkt ist das Wort senkrecht zur x-Achse Abstand, desto näher context.translate(74, 0); context.rotate(Math.PI/2);// Um 90 Grad drehen, sodass der Text parallel zur x-Achse ist context.fillText(ec,0, 4.8) ;// Dieser Punkt ist der Mittelpunkt des Wortes context.restore(); } } //Zeichne eine fünfzackige Sternfunktion create5star(context,sx,sy,radius,color,rotato){ context.save(); =color; context.translate(sx,sy);//Verschieben Sie den Koordinatenursprung context.rotate(Math.PI+rotato);//Rotieren Sie context.beginPath();//Erstellen Sie einen Pfad var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; for(var i = 0;i< 5;i++){//Zeichne die fünf Seiten fünfzackiger Stern 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> Eingabeeinheit (Unterstützt bis zu 14 Ziffern, selbst anpassen): <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> Eingabeeinheit (Englisch): <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> Text unter dem Kapitel: <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=Chinesisches offizielles Siegel generieren/> <input type=button onclick=javascript:createSealEx2(); value=Chinesisches und englisches offizielles Siegel generieren/> <script> function createSealEx(){ var dw = document.getElementById(dw); edw = document.getElementById(edw); var mdtext = document.getElementById(mdtext); document.getElementById(sealdiv); sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'></canvas>; function createSealEx2(){ var dw = document.getElementById(dw); document.getElementById(edw); var mdtext = document.getElementById(mdtext); var sealdiv = document.getElementById(sealdiv.innerHTML =<canvas id='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);//Legen Sie die Rahmenfarbe fest context.textBaseline = ' middle ';//Legen Sie die vertikale Ausrichtung des Textes fest context.textAlign = 'center'; //Legen Sie die horizontale Ausrichtung des Textes fest context.lineWidth = 2;//Breite der Ellipse 1//3 Parameter: Breite der oberen Kante des linken Randes BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; , 76, 52); //Ellipse 2 context.lineWidth = 2; 85, 79, 63, 39); //Ellipse 3 //Den Siegeltyp zeichnen context.font = 'bolder 10px SimSun';//Schriftgrößenstil festlegen context.fillStyle = 'red';//Schriftfarbe festlegen context.fillText (name,canvas.width/2+3,canvas.height/2+25); context.save(); //Speichern Sie den obigen Vorgang//Draw English var circle={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//Kontrolliere den Grad der Startposition des Zeichens var endAngle =-40;//Der Grad des erstes Zeichen var radius=circle .radius //Der Radius des Kreises var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//Der von jedem Buchstaben eingenommene Bogen context.font=bolder 10px SimSun context.lineWidth=1; //Legen Sie das Skalierungsverhältnis der horizontalen Achse fest. einheitlich Komprimierung) Wichtige Punkte context.scale(ratioX, ratioY); var index=0;for(var index=0;index<ecompany.length;index++){ //Speichern Sie die vorherigen Einstellungen und beginnen Sie mit dem Malen 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) //Punkt zeichnen +- Feinabstimmung context.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 ist die Drehung um 90 Grad Math.PI/180*X ist der Grad der Drehung context.fillText(ecompany.charAt(index),0,0); context.StrokeText(ecompany.charAt(index ),0 ,0); startAngle-=angleDecrement; context.restore(); // Zeichnungssiegeltyp 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.font = 'bolder 14px SimSun'; context.lineWidth=1; 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; //Legen Sie die Textfarbe fest context.textBaseline = 'middle'; //Legen Sie die vertikale Ausrichtung des Textes fest context.textAlign = 'center'; //Legen Sie die horizontale Ausrichtung des Textes fest context.lineWidth = 2; //Breite von Ellipse 1 //3 Parameter: linker Rand, Oberkante, Breite, Ebenheit der Ellipse BezierEllipse4(context, 85, 79, 79, 55); context.lineWidth = 1; BezierEllipse4(context, 79, 76, 52); //Zeichnungssiegeltyp context.font = 'bolder 15px SimSun'; context.fillStyle = '# f00'; context.fillText(name,canvas.width/2+3,canvas.height/2+10); context.save(); //Chinesisch zeichnen var ccircle={ x:canvas.width/2, y:canvas.height/2, radius:59 }; var cstartAngle=170;//Steuern Sie die Startposition des Zeichens var cendAngle =15;//Der Grad der Trennung zwischen den ersten Zeichen var cradius=ccircle.radius //Der Radius des Kreises var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//Der von jedem Buchstaben eingenommene Bogen context.font=12px SimSun var cratioX = 66 / ccircle.radius; //Skalierungsverhältnis der horizontalen Achse var cratioY = 57 / ccircle .radius; // Skalierungsverhältnis der vertikalen Achse // Skalierung (gleichmäßige Komprimierung) context.scale(cratioX, cratioY); cindex=0; for(var cindex=0;cindex<company.length;cindex++){ context.save() context.beginPath() //Punkt zeichnen 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 ist die Drehung um 90 Grad Math.PI/180*X ist der Grad der Drehung 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, // Horizontaler Kontrollpunktversatz oy = b * k; // Vertikaler Kontrollpunktversatz</p> <p> ctx.beginPath(); //Vom linken Ende der Ellipse aus vier kubische Bezier-Kurven im Uhrzeigersinn ausgehend vom Punkt 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(); </script></body></html>;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.