Coleção de imagens de assinatura eletrônica
Existem duas formas complementares de coletar imagens de focas:
Método 1: Gere uma imagem de selo online, mas este método tem uma desvantagem: há um limite para o número de palavras do nome da empresa no selo.
Método 2: Carregue a cópia digitalizada do selo e o sistema processará a imagem digitalizada e extrairá a imagem do selo da cópia digitalizada.
Este artigo apresenta o método 1. O método 2 será lançado posteriormente. O método 1 originalmente pretendia usar Java para gerar imagens de selo. Embora existam muitos códigos prontos na Internet, o tamanho da imagem do selo precisa ser ajustado para atender aos requisitos. Especificações Tamanho do selo: tamanho do selo circular 43 mm * 43 mm (faixa de erro permitida 2-3 mm), vedação oval 43 mm * 26 mm (faixa de erro permitida 2-3 mm) está mais próxima da vedação real. Achei que seria mais difícil depurar Java, então mudei para HTML5 para implementação.
Ideias para implementar selos redondos e elípticos em HTML5:A tag HTML5 <canvas> é usada para desenhar imagens (através de scripts, geralmente JavaScript), o canvas é usado para pintura de selos e, em seguida, a imagem do selo é gerada através do canvas e depois convertida em uma imagem base64.
dificuldade:O texto curvo do selo oval é mais difícil de produzir. Embora exista JQ js na Internet que possa gerar diretamente o arranjo de caracteres curvos, ele não pode ser convertido em tela.
resolver:Primeiro, organize o texto em um círculo e, em seguida, dimensione (comprima uniformemente) o círculo do texto.
Primeiro, as renderizações:
Selo redondo chinês e inglês selo redondo chinês selo oval selo chinês e inglês selo oval chinês
Bens durosCódigo:
redondo
<!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Selo oficial redondo</title> </HEAD> <body> <BR> Unidade de entrada (14 dígitos, ajuste você mesmo se necessário): <input id=dw width=50 type=text value='O Departamento de Recursos Humanos de uma determinada unidade'/> <br> Unidade de entrada (inglês): <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> Texto abaixo do capítulo: <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=Gerar selo oficial chinês e inglês/> <input type=button onclick=javascript:createSealEx2() value=Gerar selo oficial chinês/> </body> <SCRIPT LANGUAGE=javascript> function; createSealEx() { var dw = document.getElementById(dw); mdtext = document.getElementById(mdtext); var tuzhangdiv = document.getElementById(tuzhangdiv.innerHTML =<canvas id='canvas' width='160' height='160'></canvas>; ',dw.value,edw.value,mdtext.value } função createSealEx2(){ var dw = document.getElementById(dw); var edw = document.getElementById(edw); 'largura='160' height='160'></canvas>; createSeal11('canvas',dw.value,mdtext.value } function createSeal11(id,company,name){ var canvas = document.getElementById(id); canvas.getContext('2d'); // Desenha a borda do selo var width=canvas.width/2; context.lineWidth=2; context.strokeStyle=#f00; context.beginPath(); context.lineWidth=1; context.strokeStyle=#f00; context.arc(width,height,75,0,Math.PI*2); context.stroke(); context.save(); f00,0 ); // Desenha o nome do selo context.font = '18px Helvetica'; context.textBaseline = 'middle'; 'center'; //Definir o alinhamento horizontal do texto context.lineWidth=1; context.fillStyle = '#f00'; (largura,altura);//Traduzir para esta posição, context.font = '20px Helvetica' var count = company.length;//Número de palavras var angle = 4*Math.PI/(3*(count - 1));//Ângulo entre palavras var chars = company.split(); [i];//Caracteres a serem desenhados if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle); 0);//Traduzir para esta posição, quando a palavra for perpendicular ao eixo x context.rotate(Math.PI/2);//Girar 90 graus, para que a palavra fique paralela ao contexto do eixo x. fillText(c,0, 5) ;//Este ponto é o ponto central da palavra context.restore(); function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); contexto var = canvas.getContext('2d'); context.translate(0,0);//Mover a origem da coordenada//Desenhar a borda do selo var width=canvas.width/2; /Borda 1 context.lineWidth=2; context.strokeStyle=#f00; context.arc(largura,altura,78,0,Math.PI*2); context.stroke(); //Borda 2 context.lineWidth=1; startPath(); context.arc(largura,altura,63,0,Math.PI*2); //Desenhe uma estrela de cinco pontas create5star(context,width,height,20,#f00,0); //Desenhe o selo type context.font = 'bolder 15px SimSun'; Defina a verticalidade do texto Alinhamento context.textAlign = 'center' //Defina o alinhamento horizontal do texto context.lineWidth=1; context.fillText(name,width,height+50); // Desenha a unidade chinesa do selo context.translate(width,height); // Traduza para esta posição, context.font = 'bolder 18px SimSun' var count = company.length ;//Número de palavras var angle = 4*Math.PI/(3*(count-1));//Ângulo entre palavras var chars = company.split(); c; for (var i = 0; i < count; i++){ c = chars[i];//Caracteres a serem desenhados if(i==0) context.rotate(5*Math.PI/6); context.rotate(angle); context.save(); // Traduza para esta posição, quanto maior for o eixo x. distância, mais próximo context.translate(52, 0); context.rotate(Math.PI/2);// Gire 90 graus para tornar a palavra paralela ao eixo x context.fillText(c,0, 5); //Este ponto é o ponto central da palavra context. restore(); } //Desenhe a unidade inglesa do selo context.translate(width-80,height-80);//Traduza para esta posição, context.font = 'bolder 10px SimSun'; ecompany.length;//Número de palavras var eangle = (5*Math.PI)/(3*(ecount));//Ângulo entre palavras var echars = ecompany.split(); 0; j < ecount; j++){ ec = echars[j];//Caracteres a serem desenhados if(j==0) context.rotate(6*Math.PI/7-1); context.rotate(eangle); context.save(); // Traduza para esta posição, a palavra é perpendicular ao eixo x. distância, quanto mais próximo context.translate(74, 0); context.rotate(Math.PI/2);// Gira 90 graus para que o texto fique paralelo ao eixo x context.fillText(ec,0, 4.8) ;// Este ponto é o ponto central da palavra context.restore(); //Desenhe uma estrela de cinco pontas function create5star(context,sx,sy,radius,color,rotato){ context.save(); =cor contexto.translate(sx,sy);//Mover a origem da coordenada context.rotate(Math.PI+rotato);//Girar context.beginPath();//Cria um caminho var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; estrela de cinco pontas var x = Math.sin(i*dig var y = Math.cos(i*dig) context.lineTo(x*radius,y*radius } context.closePath()); context.stroke(); context.fill();oval
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Ellipse</title> </head><body> Unidade de entrada (Suporta até 14 dígitos, ajuste você mesmo): <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> Unidade de entrada (inglês): <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> Texto abaixo do capítulo: <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=Gerar selo oficial chinês/> <input type=button onclick=javascript:createSealEx2(); value=Gerar selo oficial chinês e inglês/> <script> function createSealEx(){ var dw = document.getElementById(dw); edw = documento .getElementById(edw); document.getElementById(sealdiv); sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'></canvas>; função createSealEx2(){ var dw = document.getElementById(dw); document.getElementById(edw); /canvas>; createSeal1('tela',dw.valor,edw.valor,mdtext.valor); } function createSeal1(id,company,ecompany,name){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Definir a cor da borda context.textBaseline = ' middle ';//Definir o alinhamento vertical do texto context.textAlign = 'center' //Definir o alinhamento horizontal do texto context.lineWidth = 2;//Largura da elipse 1//3 parâmetros: margem esquerda largura da borda superior elipse nivelamento BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; , 76, 52); //Elipse 2 context.lineWidth = 2; 85, 79, 63, 39); //Elipse 3 //Desenhe o tipo de selo context.font = 'bolder 10px SimSun';//Defina o estilo do tamanho da fonte context.fillStyle = 'red';//Defina a cor da fonte context.fillText (name,canvas.width/2+3,canvas.height/2+25); //Salvar a operação acima//Desenhar inglês var circle={; x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//Controla o grau da posição inicial do caracter var endAngle =-40;//O grau do primeiro caractere var radius=circle .radius //O raio do círculo var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//O arco ocupado por cada letra context.font=bolder 10px SimSun context.lineWidth=1; //Definir a fonte fat e thin var ratioX = 70 / Circle.radius; //Proporção de escala do eixo horizontal var ratioY = 45 / Circle.radius; Compressão uniforme) Pontos-chave context.scale(ratioX, ratioY); //Salve as configurações anteriores e comece a pintar context.save(); context.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19) //Desenhar ponto +- ajustar context.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 é a rotação de 90 graus Math.PI/180*X é o grau de rotação context.fillText(ecompany.charAt(index),0,0 context.strokeText(ecompany.charAt(index); ),0 ,0); startAngle-=angleDecrement; context.restore(); // Tipo de selo de desenho 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 = '14px SimSun mais ousado'; context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25); context.save(); 1;contexto.fillStyle = '#f00'; context.fillText(company.substring(12,company.length),canvas.width/2-12,canvas.height/2+40); tela = document.getElementById(canvas var context = canvas.getContext(2d); context.strokeStyle=red; //Definir a cor do texto context.textBaseline = 'middle' //Definir o alinhamento vertical do texto context.textAlign = 'center'; 2; //Largura da Elipse 1 //3 parâmetros: margem esquerda, borda superior, largura, planicidade da elipse BezierEllipse4(context, 85, 79, 79, 55); context.lineWidth = 1; f00';context.fillText(nome,canvas.width/2+3,canvas.height/2+10); context.save(); //Desenha chinês var ccircle={ x:canvas.width/2, y:canvas.height/2, radius:59 }; cendAngle =15;//O grau de separação entre os primeiros caracteres var cradius=ccircle.radius //O raio do círculo var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//O arco ocupado por cada letra context.font=12px SimSun var cratioX = 66 / ccircle.radius; //Proporção de escala do eixo horizontal var cratioY = 57 / ccircle; .radius; //taxa de escala do eixo vertical//escala (compressão uniforme) context.scale(cratioX, cratioY); cindex=0; for(var cindex=0;cindex<company.length;cindex++){ context.save() context.beginPath() //Desenhar ponto 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 é a rotação de 90 graus Math.PI/180*X é o grau de rotação context.fillText(company.charAt(cindex),0,0) context.strokeText(company.charAt(cindex) ,0, 0) cstartAngle-=cangleDecrement context.restore() } } função BezierEllipse4(ctx, x, y, a, b){ var k = .5522848, ox = a * k, // Deslocamento do ponto de controle horizontal oy = b * k; // Deslocamento do ponto de controle vertical</p> <p> ctx.beginPath(); quatro curvas cúbicas de Bézier no sentido horário começando no ponto ctx.moveTo(x - a, y); b, x, y - b); boi, y + b, x, y + b); ctx.bezierCurveTo(x - boi, y + b, x - a, y); + oy, x - a, y); ctx.closePath();O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.