Image de signature électronique de dessin de sceau HTML5 (sceau ovale chinois et anglais, sceau ovale chinois et anglais)

Auteur：Eve Cole Date de mise à jour：2025-02-17 02:12:02

Collection d'images de signature électronique

Il existe deux manières complémentaires de collecter des images de phoques :

Méthode 1 : Générez une image de sceau en ligne, mais cette méthode présente un inconvénient. Il y a une limite sur le nombre de mots dans le nom de l'entreprise dans le sceau. Plus il y a de mots, plus il est probable qu'il soit ruiné.

Méthode 2 : Téléchargez la copie numérisée du sceau, et le système traitera l'image numérisée et extraira l'image du sceau de la copie numérisée.

Cet article présente la méthode 1. La méthode 2 sera publiée ultérieurement. La méthode 1 souhaitait à l'origine utiliser Java pour générer des images de sceau. Bien qu'il existe de nombreux codes prêts à l'emploi sur Internet, la taille de l'image du sceau doit être ajustée pour répondre. Spécifications Taille du joint : taille du joint circulaire 43 mm * 43 mm (plage d'erreur autorisée 2-3 mm), joint ovale 43 mm * 26 mm (plage d'erreur autorisée 2-3 mm) est plus proche du joint réel. Je pensais qu'il serait plus difficile de déboguer Java, alors je suis passé à HTML5 pour l'implémentation.

Idées pour implémenter des sceaux ronds et des sceaux elliptiques en HTML5 :

La balise HTML5 <canvas> est utilisée pour dessiner des images (via des scripts, généralement JavaScript), le canevas est utilisé pour la peinture du sceau, puis l'image du sceau est générée via le canevas puis convertie en une image base64.

difficulté:

Le texte incurvé du sceau ovale est plus difficile à produire. Bien qu'il existe des JQ js sur Internet qui puissent générer directement la disposition des caractères incurvés, il ne peut pas être converti en canevas.

résoudre:

Disposez d’abord le texte en cercle, puis redimensionnez (compressez uniformément) le cercle de texte.

Tout d'abord, les rendus :

Sceau rond chinois et anglais Sceau rond chinois Sceau ovale chinois et anglais Sceau chinois ovale

Biens durables

Code:

rond

 <!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Sceau officiel rond</title> </HEAD> <body> <BR> Unité de saisie (14 chiffres, ajustez vous-même si nécessaire) : <input id=dw width=50 type=text value='Le service des ressources humaines d'une certaine unité'/> <br> Unité d'entrée (anglais) : <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> Texte sous le chapitre : <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=Générer le sceau officiel chinois et anglais/> <input type=button onclick=javascript:createSealEx2(); value=Générer le sceau officiel chinois/> </body> <SCRIPT LANGUAGE=javascript> fonction 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>; ',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.innerHTML =<canvas id='canvas); 'largeur='160' height='160'></canvas>; createSeal11('canvas',dw.value,mdtext.value); } function createSeal11(id,company,name){ var canvas = document.getElementById(var context =); canvas.getContext('2d'); // Dessine la bordure du sceau var width=canvas.width/2; var height=canvas.height/2; contexte.lineWidth=2; contexte.StrokeStyle=#f00; contexte.beginPath(); contexte.lineWidth=1; contexte.AVCStyle=#f00; contexte.beginPath(); context.arc(width,height,75,0,Math.PI*2); context.stroke(); context.save(); //Dessine une étoile à cinq branches create5star(context,width,height,25,# f00,0 ); // Dessine le nom du sceau context.font = '18px Helvetica'; context.textBaseline = 'middle'; // Définit l'alignement vertical du texte context.textAlign = 'center'; //Définit l'alignement horizontal du texte context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+53); (largeur, hauteur);//Traduire à cette position, context.font = '20px Helvetica' var count = company.length;//Nombre de mots var angle = 4*Math.PI/(3*(count - 1));//Angle entre les mots var chars = company.split(); var c; for (var i = 0; i < count; i++){ c = chars [i];//Caractères à dessiner if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle context.save(); 0);//Traduire vers cette position, lorsque le mot est perpendiculaire au contexte de l'axe des x.rotate(Math.PI/2);//Tourner de 90 degrés, de sorte que le mot soit parallèle au contexte de l'axe des x. fillText(c,0, 5) ;//Ce point est le point central du mot context.restore(); } } function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); contexte variable = canvas.getContext('2d'); context.translate(0,0);//Déplacer l'origine des coordonnées//Dessiner la bordure du sceau var width=canvas.width/2; var height=canvas.height/2; /Bordure 1 contexte.lineWidth=2; contexte.AVCStyle=#f00; contexte.beginPath(); contexte.arc(largeur,hauteur,78,0,Math.PI*2); contexte.AVC(); contexte.save(); //Bordure 2 contexte.lineWidth=1; beginPath(); contexte.arc(largeur,hauteur,63,0,Math.PI*2); contexte.save(); //Dessinez une étoile à cinq branches create5star(context,width,height,20,#f00,0); //Dessinez le type de sceau context.font = 'bolder 15px SimSun'; context.textBaseline = 'middle'; Définir la verticalité du texte Alignement context.textAlign = 'center'; //Définir l'alignement horizontal du texte context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+50); // Dessine l'unité chinoise du sceau context.translate(width,height); // Traduit à cette position, context.font = 'bolder 18px SimSun' var count = company.length ;//Nombre de mots var angle = 4*Math.PI/(3*(count-1));//Angle entre les mots var chars = company.split(); c; for (var i = 0; i < count; i++){ c = chars[i];//Caractères à dessiner if(i==0) context.rotate(5*Math.PI/6); context.rotate(angle); context.save(); // Traduire vers cette position, plus le mot est perpendiculaire à l'axe des x. plus la distance est proche, plus le contexte.translate(52, 0); context.rotate(Math.PI/2);// Faites pivoter de 90 degrés pour rendre le mot parallèle à l'axe des x context.fillText(c,0, 5);//Ce point est le point central du mot contexte. restaurer(); } //Dessiner l'unité anglaise du sceau context.translate(width-80,height-80);//Traduire à cette position, context.font = 'bolder 10px SimSun'; ecompany.length;//Nombre de mots var eangle = (5*Math.PI)/(3*(ecount));//Angle entre les mots var echars = ecompany.split(); 0; j < ecount; j++){ ec = echars[j];//Caractères à dessiner if(j==0) context.rotate(6*Math.PI/7-1); context.rotate(eangle); context.save(); // Traduire vers cette position, plus le mot est perpendiculaire à l'axe des x. plus la distance est proche, plus context.translate(74, 0); context.rotate(Math.PI/2);// Rotation de 90 degrés pour que le texte soit parallèle à l'axe des x context.fillText(ec,0, 4.8) ;// Ce point est le point central du mot context.restore(); } } //Dessinez une étoile à cinq branches function create5star(context,sx,sy,radius,color,rotato){ context.save(); =color; context.translate(sx,sy);//Déplacer l'origine des coordonnées context.rotate(Math.PI+rotato);//Rotate context.beginPath();//Créer un chemin var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; for(var i = 0;i< 5;i++){//Dessinez les cinq côtés du étoile à cinq branches var x = Math.sin(i*dig); var y = Math.cos(i*dig); context.lineTo(x*radius,y*radius } context.closePath(); contexte.AVC(); contexte.fill(); contexte.restore(); } </html>

ovale

 <!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Ellipse</title> </head><body> Unité d'entrée (Prend en charge jusqu'à 14 chiffres, ajustez vous-même) : <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> Unité d'entrée (anglais) : <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> Texte sous le chapitre : <input id=mdtext width=50 type=text value='Company Chapter'/> <div id=sealdiv > < identifiant de toile=largeur de toile=165 hauteur=165></canvas> </div> </div> <input type=bouton onclick=javascript:createSealEx(); value=Générer le sceau officiel chinois/> <input type=button onclick=javascript:createSealEx2(); value=Générer le sceau officiel chinois et anglais/> <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); 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;//Définir la couleur de la bordure context.textBaseline = ' middle ';//Définir l'alignement vertical du texte context.textAlign = 'center'; //Définir l'alignement horizontal du texte context.lineWidth = 2;//Largeur de l'ellipse 1//3 paramètres : marge gauche largeur du bord supérieur planéité de l'ellipse BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; , 76, 52); //Ellipse 2 contexte.lineWidth = 2; 85, 79, 63, 39); //Ellipse 3 //Dessinez le type de sceau context.font = 'bolder 10px SimSun';//Définissez le style de taille de police context.fillStyle = 'red';//Définissez la couleur de la police context.fillText (name,canvas.width/2+3,canvas.height/2+25); context.save(); //Enregistrer l'opération ci-dessus//Dessiner anglais var circle={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//Contrôler le degré de la position de départ du caractère var endAngle =-40;//Le degré de premier caractère var radius=circle .radius //Le rayon du cercle var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//L'arc occupé par chaque lettre context.font=bolder 10px SimSun context.lineWidth=1; //Définissez la graisse et la finesse de la police var ratioX = 70 / circle.radius; //Rapport de mise à l'échelle de l'axe horizontal var ratioY = 45 / circle.radius; Compression uniforme) Points clés context.scale(ratioX, ratioY); var index=0 for(var index=0;index<ecompany.length;index++){ //Enregistrez les paramètres précédents et commencez à peindre context.save(); context.beginPath(); contexte.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19) //Dessiner un point +- affiner context.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 est la rotation de 90 degrés Math.PI/180*X est le degré de rotation context.fillText(ecompany.charAt(index),0,0); ),0 ,0); startAngle-=angleDecrement; context.restore(); } // Type de sceau de dessin context.font = 'bolder 14px SimSun'; contexte.lineWidth=1; contexte.fillStyle = '#f00'; contexte.fillText(company.substring(0,6),canvas.width/2-11,canvas.height/2+6); ; contexte.font = 'plus gras 14px SimSun'; contexte.lineWidth=1; contexte.fillStyle = '#f00'; context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25); context.save context.font = 'bolder 14px SimSun'; 1 ; contexte.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 toile = document.getElementById(canvas); var contexte = toile.getContext(2d); context.StrokeStyle=red; //Définit la couleur du texte context.textBaseline = 'middle'; //Définit l'alignement vertical du texte context.textAlign = 'center' //Définit l'alignement horizontal du texte context.lineWidth = 2; //Largeur de l'ellipse 1 //3 paramètres : marge gauche, bord supérieur, largeur, planéité de l'ellipse BezierEllipse4(contexte, 85, 79, 79, 55); context.lineWidth = 1; BezierEllipse4(context, 85, 79, 76, 52); //Ellipse 2 //Type de sceau de dessin context.font = 'bolder 15px SimSun'; f00'; contexte.fillText(nom,canvas.width/2+3,canvas.height/2+10); context.save(); //Dessiner le chinois var ccircle={ x:canvas.width/2, y:canvas.height/2, radius:59 }; cendAngle =15;//Le degré de séparation entre les premiers caractères var cradius=ccircle.radius //Le rayon du cercle var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//L'arc occupé par chaque lettre context.font=12px SimSun var cratioX = 66 / ccircle.radius; //Rapport d'échelle de l'axe horizontal var cratioY = 57 / ccircle .radius; //rapport de mise à l'échelle de l'axe vertical//mise à l'échelle (compression uniforme) context.scale(cratioX, cratioY); cindex=0; for(var cindex=0;cindex<company.length;cindex++){ context.save() context.beginPath() //Dessiner le point context.translate(ccircle.x+Math.cos((Math.PI/180)*cstartAngle)*cradius-6,ccircle.y-Math.sin((Math.PI/180)*cstartAngle)* cradius+14) contexte.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle) //Math.PI/2 est la rotation de 90 degrés Math.PI/180*X est le degré de 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, // Décalage du point de contrôle horizontal oy = b * k; // Décalage du point de contrôle vertical</p> <p> ctx.beginPath( //De l'extrémité gauche de l'ellipse Draw quatre courbes de Bézier cubiques dans le sens des aiguilles d'une montre à partir du point ctx.moveTo(x - a, y -) ; b, x, y - b); ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y); bœuf, y + b, x, y + b); ctx.bezierCurveTo(x - bœuf, y + b, x - a, y + oy, x - a, y); ctx.closePath(); ctx.AVC };

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.