Imagen de firma electrónica de dibujo de sello HTML5 (sello ovalado chino e inglés, sello ovalado chino e inglés)

Autor：Eve Cole Fecha de actualización：2025-02-17 02:12:02

Colección de fotografías de firma electrónica.

Hay dos formas complementarias de recopilar imágenes de focas:

Método 1: generar una imagen de sello en línea, pero este método tiene un inconveniente: hay un límite en la cantidad de palabras del nombre de la empresa en el sello.

Método 2: cargue la copia escaneada del sello y el sistema procesará la imagen escaneada y extraerá la imagen del sello de la copia escaneada.

Este artículo presenta el método 1. El método 2 se publicará más adelante. El método 1 originalmente quería usar Java para generar imágenes de sellos. Aunque hay muchos códigos listos para usar en Internet, el tamaño de la imagen del sello debe ajustarse para cumplir con los requisitos. Especificaciones Tamaño del sello: tamaño del sello circular 43 mm * 43 mm (rango de error permitido 2-3 mm), sello ovalado 43 mm * 26 mm (rango de error permitido 2-3 mm) está más cerca del sello real. Pensé que sería más difícil depurar Java, así que cambié a HTML5 para su implementación.

Ideas para implementar sellos redondos y sellos elípticos en html5:

La etiqueta HTML5 <canvas> se usa para dibujar imágenes (a través de scripts, generalmente JavaScript), el lienzo se usa para pintar sellos y luego la imagen del sello se genera a través del lienzo y luego se convierte en una imagen base64.

dificultad:

El texto curvo del sello ovalado es más difícil de producir. Aunque hay JQ js en Internet que pueden generar directamente la disposición de los caracteres curvos, no se puede convertir en lienzo.

resolver:

Primero organice el texto en un círculo y luego escale (comprima uniformemente) el círculo de texto.

Primero, las representaciones:

Sello redondo chino e inglés Sello redondo chino Sello ovalado chino e inglés Sello chino ovalado

Bienes duros

Código:

redondo

 <!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Sello oficial redondo</title> </HEAD> <body> <BR> Unidad de entrada (14 dígitos, ajuste usted mismo si es necesario): <input id=dw width=50 type=text value='El Departamento de Recursos Humanos de una determinada unidad'/> <br> Unidad de entrada (inglés): <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> Texto debajo del capítulo: <input id=mdtext width=50 type=text value='Special Chapter'/ > <div id=sealdiv > <canvas id=canvas ancho=250 alto=250></canvas> </div> <tipo de entrada=botón onclick=javascript:createSealEx(); value=Generar sello oficial en chino e inglés/> <input type=button onclick=javascript:createSealEx2(); value=Generar sello oficial en chino/> </body> <SCRIPT LANGUAGE=javascript> función 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 } función 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); 'ancho='160' altura='160'></canvas>; createSeal11('canvas',dw.value,mdtext.value); } function createSeal11(id,empresa,nombre){ var canvas = document.getElementById(id) canvas.getContext('2d'); // Dibuja el borde del sello var width=canvas.width/2; contexto.lineWidth=2; contexto.strokeStyle=#f00; contexto.beginPath(); contexto.arc(ancho,alto,78,0,Math.PI*2); contexto.lineWidth=1; contexto.strokeStyle=#f00; context.arc(width,height,75,0,Math.PI*2); context.stroke(); context.save(); //Dibuja una estrella de cinco puntas create5star(context,width,height,25,# f00,0 ); // Dibuja el nombre del sello context.font = '18px Helvetica'; context.textBaseline = 'middle' // Establece la alineación vertical del texto context.textAlign = 'center'; //Establece la alineación horizontal del texto context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+53); (ancho,alto);//Traducir a esta posición, context.font = '20px Helvetica' var count = company.length;//Número de palabras var angle = 4*Math.PI/(3*(count - 1));//Ángulo entre palabras var chars = company.split(); var c; [i];//Caracteres a dibujar if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle); 0);//Traducir a esta posición, cuando la palabra sea perpendicular al contexto del eje x context.rotate(Math.PI/2);//Gire 90 grados, de modo que la palabra quede paralela al contexto del eje x. fillText(c,0, 5) ;//Este punto es el punto central de la palabra context.restore(); } } function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); contexto var = canvas.getContext('2d'); context.translate(0,0);//Mover el origen de las coordenadas//Dibujar el borde del sello var width=canvas.width/2; /Borde 1 context.lineWidth=2; context.strokeStyle=#f00; contexto.arc(ancho,alto,78,0,Math.PI*2); contexto.stroke(); contexto.save(); //Borde 2 context.lineWidth=1; comenzarPath(); contexto.arc(ancho,alto,63,0,Math.PI*2 contexto.stroke(); //Dibuja una estrella de cinco puntas create5star(context,width,height,20,#f00,0); //Dibuja el tipo de sello context.font = 'bolder 15px SimSun'; context.textBaseline = 'middle'; Establecer la verticalidad del texto Alineación context.textAlign = 'center'; //Establecer la alineación horizontal del texto context.lineWidth=1 context.fillStyle = '#f00'; context.fillText(name,width,height+50); // Dibujar la unidad china del sello context.translate(width,height); // Traducir a esta posición, context.font = 'bolder 18px SimSun' var count = company.length ;//Número de palabras var angle = 4*Math.PI/(3*(count-1));//Ángulo entre palabras var chars = company.split(); c; for (var i = 0; i < count; i++){ c = chars[i];//Caracteres a dibujar if(i==0) context.rotate(5*Math.PI/6); context.rotate(angle); context.save(); // Traducir a esta posición En este momento, la palabra es perpendicular al eje x. Cuanto mayor es la distancia desde el exterior del círculo. distancia, cuanto más cercano sea context.translate(52, 0); context.rotate(Math.PI/2);// Gira 90 grados para que la palabra sea paralela al eje x context.fillText(c,0, 5);//Este punto es el punto central del contexto de la palabra. restaurar(); } //Dibujar la unidad inglesa del sello context.translate(width-80,height-80);//Traducir a esta posición, context.font = 'bolder 10px SimSun'; ecompany.length;//Número de palabras var eangle = (5*Math.PI)/(3*(ecount));//Ángulo entre palabras var echars = ecompany.split(); 0; j < ecount; j++){ ec = echars[j];//Caracteres a dibujar if(j==0) context.rotate(6*Math.PI/7-1); context.rotate(eangle); context.save(); // Traducir a esta posición En este momento, la palabra es perpendicular al eje x. Cuanto mayor es la distancia desde el exterior del círculo. distancia, cuanto más cerca context.translate(74, 0); context.rotate(Math.PI/2);// Gira 90 grados para que el texto quede paralelo al eje x context.fillText(ec,0, 4.8) ;// Este punto es el punto central de la palabra context.restore(); } } //Dibuja una función de estrella de cinco puntas create5star(context,sx,sy,radius,color,rotato){ context.save(); =color; context. Translate(sx,sy);//Mover el origen de las coordenadas context.rotate(Math.PI+rotato);//Girar context.beginPath();//Crear una ruta var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4 for(var i = 0;i< 5;i++){//Dibuja los cinco lados del estrella de cinco puntas var x = Math.sin(i*dig var y = Math.cos(i*dig context.lineTo(x*radius,y*radius); contexto.stroke(); contexto.fill(); contexto.restaurar();

oval

 <!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Ellipse</title> </head><body> Unidad de entrada (Admite hasta 14 dígitos, ajústelo usted mismo): <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> Unidad de entrada (inglés): <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> Texto debajo del capítulo: <input id=mdtext width=50 type=text value='Company Chapter'/> <div id=sealdiv > < id del lienzo=ancho del lienzo=165 alto=165></canvas> </div> </div> <tipo de entrada=botón onclick=javascript:createSealEx(); value=Generar sello oficial chino/> <tipo de entrada=botón onclick=javascript:createSealEx2(); value=Generar sello oficial chino e inglés/> <script> function createSealEx(){ var dw = document.getElementById(dw); edw = documento .getElementById(edw); var mdtext = document.getElementById(mdtext); document.getElementById(sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'></canvas>; createSeal2('canvas',dw.value,mdtext.value } función createSealEx2(){ var dw = document.getElementById(dw); document.getElementById(edw); var mdtext = document.getElementById(mdtext); var sealdiv = document.getElementById(sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'><); /lienzo>; createSeal1('lienzo',dw.value,edw.value,mdtext.value); } function createSeal1(id,company,ecompany,name){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); // Establece el color del borde context.textBaseline = ' middle ';//Establecer la alineación vertical del texto context.textAlign = 'center'; //Establecer la alineación horizontal del texto context.lineWidth = 2;//Ancho de la elipse 1//3 parámetros: margen izquierdo ancho del borde superior planitud de la elipse BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; , 76, 52); //Elipse 2 contexto.lineWidth = 2; BezierEllipse4(contexto, 85, 79, 63, 39); //Elipse 3 //Dibuja el tipo de sello context.font = 'bolder 10px SimSun';//Establece el estilo del tamaño de fuente context.fillStyle = 'red';//Establece el color de fuente context.fillText (name,canvas.width/2+3,canvas.height/2+25); context.save(); //Guardar la operación anterior//Dibujar inglés var círculo={ x:canvas.width/2, y:canvas.height/2, radio:58 }; var startAngle=220;//Controla el grado de la posición inicial del carácter var endAngle =-40;//El grado de primer carácter var radio=circle .radius //El radio del círculo var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//El arco ocupado por cada letra context.font=bolder 10px SimSun context.lineWidth=1; //Establece la fuente gruesa y delgada var ratioX = 70 / círculo.radius; //Relación de escala del eje horizontal var ratioY = 45 / círculo.radius // Escala del eje vertical ( Compresión uniforme) Puntos clave context.scale(ratioX, ratioY var index=0 for(var index=0;index<ecompany.length;index++){ //Guarda la configuración anterior y comienza a pintar context.save(); contexto.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19) //Dibujar punto +- ajustar context.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 es la rotación de 90 grados Math.PI/180*X es el grado de rotación context.fillText(ecompany.charAt(index),0,0); ),0 ,0); startAngle-=angleDecrement; context.restore() } // Tipo de sello de dibujo context.font = 'bolder 14px SimSun'; contexto.lineWidth=1; contexto.fillStyle = '#f00'; contexto.fillText(empresa.substring(0,6),canvas.width/2-11,canvas.height/2+6); ; context.font = '14px SimSun más negrita'; 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'; 1; contexto.fillStyle = '#f00'; contexto.fillText(empresa.substring(12,empresa.longitud),canvas.width/2-12,canvas.height/2+40); contexto.save() } función createSeal2(id,empresa,nombre){ var; lienzo = document.getElementById(lienzo var contexto = lienzo.getContext(2d); context.strokeStyle=red; //Establece el color del texto context.textBaseline = 'middle'; //Establece la alineación vertical del texto context.textAlign = 'center'; //Establece la alineación horizontal del texto context.lineWidth = 2; //Ancho de la elipse 1 //3 parámetros: margen izquierdo, borde superior, ancho, planitud de la elipse BezierEllipse4(context, 85, 79, 79, 55); context.lineWidth = 1; BezierEllipse4(context, 85, 79, 76, 52); //Elipse 2 //Tipo de sello de dibujo context.font = 'bolder 15px SimSun'; f00'; contexto.fillText(nombre,canvas.width/2+3,canvas.height/2+10); context.save(); //Dibujar chino var ccircle={ x:canvas.width/2, y:canvas.height/2, radio:59 }; cendAngle =15;//El grado de separación entre los primeros caracteres var cradius=ccircle.radius //El radio del círculo var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//El arco ocupado por cada letra context.font=12px SimSun var cratioX = 66 / ccircle.radius; //Relación de escala del eje horizontal var cratioY = 57 / ccircle; .radius; //relación de escala del eje vertical//escala (compresión uniforme) context.scale(cratioX, cratioY); cindex=0; for(var cindex=0;cindex<empresa.length;cindex++){ contexto.save() contexto.beginPath() //Dibujar punto context.translate(ccircle.x+Math.cos((Math.PI/180)*cstartAngle)*cradius-6,ccircle.y-Math.sin((Math.PI/180)*cstartAngle)* cradius+14) contexto.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle) //Math.PI/2 es la rotación de 90 grados Math.PI/180*X es el grado de rotació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, // Desplazamiento del punto de control horizontal oy = b * k; // Desplazamiento del punto de control vertical</p> <p> ctx.beginPath() //Desde el extremo izquierdo de la elipse Dibujar cuatro curvas de Bézier cúbicas en el sentido de las agujas del reloj comenzando desde el punto ctx.moveTo(x - a, y ctx.bezierCurveTo(x - a, y - oy, x - ox, y -); b, x, y - b); ctx.bezierCurveTo(x + buey, y - b, x + a, y - oy, x + a, y); buey, y + b, x, y + b); ctx.bezierCurveTo(x - buey, y + b, x - a, y + oy, x - a, y); ctx.closePath(); ctx.stroke();

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.