전자서명 사진집
물개 이미지를 수집하는 두 가지 보완적인 방법이 있습니다.
방법 1: 온라인으로 인감 이미지를 생성하지만 이 방법에는 인감에 들어가는 회사 이름의 단어 수에 제한이 있습니다.
방법 2: 인감 스캔 사본을 업로드하면 시스템이 스캔 이미지를 처리하고 스캔 사본에서 인감 이미지를 추출합니다.
이 기사에서는 방법 1을 소개합니다. 방법 2는 나중에 공개될 예정입니다. 방법 1은 원래 Java를 사용하여 인감 이미지를 생성하려고 했지만 인터넷에 기성 코드가 많이 있지만 이에 맞게 인감 이미지의 크기를 조정해야 합니다. 사양 씰 크기: 원형 씰 크기 43mm*43mm(오류 허용 범위 2-3mm), 타원형 씰 43mm*26mm(허용 오류 범위 2-3mm)가 실제 씰에 더 가깝습니다. Java 디버깅이 더 어려울 것 같아 구현을 HTML5로 전환했습니다.
HTML5에서 원형 씰과 타원형 씰을 구현하기 위한 아이디어:HTML5 <canvas> 태그는 이미지를 그리는 데 사용되며(스크립트, 일반적으로 JavaScript를 통해) 인장 페인팅에는 캔버스가 사용되며 캔버스를 통해 인장 이미지가 생성된 후 base64 이미지로 변환됩니다.
어려움:타원형 인감의 곡선 텍스트는 제작하기가 더 어렵습니다. 인터넷에 곡선 문자 배열을 직접 생성할 수 있는 JQ js가 있지만 캔버스로 변환할 수는 없습니다.
해결하다:먼저 텍스트를 원으로 정렬한 다음 텍스트 원의 크기를 조정(균등하게 압축)합니다.
먼저 렌더링은 다음과 같습니다.
원형 중국어 및 영어 원형 인감 중국어 원형 인감 타원형 중국어 및 영어 인감 타원형 중국어 인감
생활용품암호:
둥근
<!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html /> <title>둥근 공식 인장</title> </HEAD> <body> <BR> 입력 단위(14자리, 필요한 경우 직접 조정): <input id=dw width=50 type=text value='특정 단위의 인사부'/> <br> 입력 단위(영문): <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> 장 아래 텍스트: <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=중국어 및 영어 공식 인장 생성/> <input type=button onclick=javascript:createSealEx2() value=중국 공식 인장 생성/> </body> <SCRIPT LANGUAGE=javascript> 함수 createSealEx() { var dw = document.getElementById(dw) var edw = document.getElementById(edw); mdtext = document.getElementById(mdtext); var tuzhangdiv = document.getElementById(tuzhangdiv); tuzhangdiv.innerHTML =<canvas id='canvas' width='160' height='160'></canvas>; ',dw.value,edw.value,mdtext.value) } 함수 createSealEx2(){ var dw = document.getElementById(dw); var edw = document.getElementById(edw); var mdtext = document.getElementById(mdtext); var tuzhangdiv = document.getElementById(tuzhangdiv)HTML =<canvas id='canvas '너비='160' height='160'></canvas>; createSeal11('canvas',dw.value,mdtext.value) } function createSeal11(id,company,name){ var canvas = document.getElementById(id); canvas.getContext('2d'); // 봉인 테두리 그리기 var width=canvas.width/2; context.lineWidth=2; context.스트로크스타일=#f00; 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(); context.save(); //다섯개 별을 그립니다. create5star(context,width,height,25,# f00,0 ); // 인장 이름 그리기 context.font = '18px Helvetica'; context.textBaseline = 'middle'; // 텍스트의 수직 정렬을 설정합니다. 'center'; //텍스트의 가로 정렬 설정 context.lineWidth=1; context.fillStyle = '#f00'; // 봉인 단위 그리기 context.translate ( 너비, 높이);//이 위치로 번역, context.font = '20px Helvetica' var count = company.length;//단어 수 var angle = 4*Math.PI/(3*(count - 1));//단어 사이의 각도 var chars = company.split() var c for (var i = 0; i < count; i++){ c = chars [i];//그릴 문자 if(i==0) context.rotate(5*Math.PI/6); else context.rotate(angle); context.translate(64, 0);//단어가 x축 컨텍스트에 수직일 때 이 위치로 번역합니다.rotate(Math.PI/2);//단어가 x축 컨텍스트와 평행하도록 90도 회전합니다. fillText(c,0, 5) ;//이 지점은 단어 context.restore()의 중심점입니다. } } function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); 변수 컨텍스트 = canvas.getContext('2d'); context.translate(0,0);//좌표 원점 이동//인장 테두리 그리기 var width=canvas.width/2; /테두리 1 context.lineWidth=2; context.StrokeStyle=#f00; context.beginPath(); context.arc(width,height,78,0,Math.PI*2); context.strove(); //테두리 2 context.lineWidth=1; startPath(); context.arc(width,height,63,0,Math.PI*2); context.strove(); //다섯개 별을 그립니다. create5star(context,width,height,20,#f00,0); //인장 유형을 그립니다. context.font = 'bolder 15px SimSun' context.textBaseline = 'middle'; 텍스트의 수직 정렬을 설정합니다. context.textAlign = 'center'; //텍스트의 수평 정렬을 설정합니다. context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+50); // 봉인의 중국어 단위를 그립니다. context.translate(width,height); // 이 위치로 번역합니다. context.font = 'bolder 18px SimSun' var count = company.length ;//단어 수 var angle = 4*Math.PI/(3*(count-1));//단어 사이의 각도 var chars = company.split(); c; for (var i = 0; i < count; i++){ c = chars[i];//그리는 문자 if(i==0) context.rotate(5*Math.PI/6); context.rotate(angle); context.save(); // 이때 단어는 x축에 수직입니다. 거리가 멀수록 가까울수록 context.translate(52, 0); context.rotate(Math.PI/2);// 단어를 x축과 평행하게 만들기 위해 90도 회전 context.fillText(c,0, 5);//이 지점은 단어 컨텍스트의 중심점입니다. Restore(); } //인감의 영문 단위를 그립니다. context.translate(width-80,height-80);//이 위치로 번역합니다. context.font = 'bolder 10px SimSun'; ecompany.length;//단어 수 var eangle = (5*Math.PI)/(3*(ecount));//단어 사이의 각도 var echars = ecompany.split() for (var j = 0; j < ecount; j++){ ec = echars[j];//그리는 문자 if(j==0) context.rotate(6*Math.PI/7-1); context.rotate(eangle); context.save(); // 이때 단어는 x축에 수직입니다. 거리가 가까울수록 context.translate(74, 0); context.rotate(Math.PI/2);// 텍스트가 x축과 평행하도록 90도 회전 context.fillText(ec,0, 4.8) ;// 이 지점은 context.restore()라는 단어의 중심점입니다. } } //다섯개의 별을 그립니다. create5star(context,sx,sy,radius,color,rotato){ context.save(); =color; context.translate(sx,sy);//좌표 원점 이동 context.rotate(Math.PI+rotato);//Rotate context.beginPath();//경로 생성 var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; for(var i = 0;i< 5;i++){//5개의 변을 그립니다. 다섯개 별 var x = Math.sin(i*dig); var y = Math.cos(i*dig); context.lineTo(x*radius,y*radius); context.Stroke(); context.fill(); } </html>타원형
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html /> <title>타원</title> </head><body> 입력 단위 (14자리까지 지원, 직접 조정) : <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> 입력단위(영문) : <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> 장 아래 텍스트: <input id=mdtext width=50 type=text value='회사 장'/> <div id=sealdiv > < canvas id=canvas width=165 height=165></canvas> </div> </div> <input type=button onclick=javascript:createSealEx(); value=중국 공식 인장 생성/> <input type=button onclick=javascript:createSealEx2(); value=중국 및 영어 공식 인감 생성/> <script> function createSealEx(){ var dw = document.getElementById(dw); edw = 문서 .getElementById(edw); var mdtext = document.getElementById(mdtext); 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); document.getElementById(edw); var mdtext = document.getElementById(mdtext); var sealdiv = document.getElementById(sealdiv); sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'>< /캔버스>; createSeal1('캔버스',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;//테두리 색상 설정 context.textBaseline = ' middle ';//텍스트의 수직 정렬을 설정합니다 context.textAlign = 'center' //텍스트의 수평 정렬을 설정합니다 context.lineWidth = 2;//타원의 너비 1//3 매개변수: 왼쪽 여백 위쪽 가장자리 너비 ellipse flatness BezierEllipse4(context, 85, 79, 79, 55) //Ellipse 1 context.lineWidth = 1; , 76, 52); //타원 2 context.lineWidth = 2(context, 85, 79, 63, 39); //타원 3 //인장 유형 그리기 context.font = 'bolder 10px SimSun';//글꼴 크기 스타일 설정 context.fillStyle = 'red';//글꼴 색상 설정 context.fillText (name,canvas.width/2+3,canvas.height/2+25); context.save(); //위 작업 저장//영문 그리기 var Circle={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//문자의 시작 위치 각도를 제어합니다. var endAngle =-40;// 첫 번째 문자 var radius=circle .radius //원의 반경 var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//각 문자가 차지하는 호 context.font=bolder 10px SimSun context.lineWidth=1; //굵고 얇은 글꼴 설정 var ratioX = 70 / Circle.radius; //가로축 배율 비율 var ratioY = 45 / Circle.radius //세로축 배율 비율( 균등 압축) 핵심 사항 context.scale(ratioX, ratioY); var index=0;index<ecompany.length;index++){ //이전 설정을 저장하고 페인팅을 시작합니다. context.save(); context.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19) //점 그리기 +- 미세 조정 context.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2는 90도 회전입니다. Math.PI/180*X는 회전 각도입니다. context.fillText(ecompany.charAt(index),0,0) context.StrokeText(ecompany.charAt(index) ),0 ,0); startAngle-=angleDecrement; context.restore() } // 그림 씰 유형 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'; context.lineWidth=1; context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25); context.save(); context.font = '굵게 14px SimSun'; 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 캔버스 = document.getElementById(canvas); var context = canvas.getContext(2d); context.StrokeStyle=red; //텍스트 색상 설정 context.textBaseline = 'middle'; //텍스트의 수직 정렬 설정 context.textAlign = 'center' //텍스트의 수평 정렬 설정 context.lineWidth = 2; //타원의 너비 1 //3 매개변수: 왼쪽 여백, 위쪽 가장자리, 너비, 타원의 평면도 BezierEllipse4(context, 85, 79, 79, 55) //타원 1 context.lineWidth = 1; BezierEllipse4(context, 85, 79, 76, 52); //타원 2 //드로잉 씰 유형 context.font = 'bolder 15px SimSun' context.lineWidth=1; f00'; context.fillText(이름,canvas.width/2+3,canvas.height/2+10); context.save(); //중국어 그리기 var ccircle={ x:canvas.width/2, y:canvas.height/2, radius:59 }; var cstartAngle=170;//문자 시작 위치 제어 var cendAngle =15;//첫 번째 문자 사이의 분리 정도 var cradius=ccircle.radius //원의 반경 var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//각 문자가 차지하는 호 context.font=12px SimSun var cratioX = 66 / ccircle.radius //수평축 배율 비율 var cratioY = 57 / ccircle; .radius; //세로축 스케일링 비율//스케일링(균일 압축) context.scale(cratioX, cratioY); cindex=0; for(var cindex=0;cindex<company.length;cindex++){ context.save() context.beginPath() //점 그리기 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는 90도 회전입니다. Math.PI/180*X는 회전 각도입니다. 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, // 수평 제어점 오프셋 oy = b * k; // 수직 제어점 오프셋</p> <p> ctx.beginPath() //타원의 왼쪽 끝에서 그리기 점에서 시작하여 시계 방향으로 4개의 3차 베지어 곡선 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); ox, y + b, x, y + b) ctx.bezierCurveTo(x - ox, y + b, x - a, y + ctx.closePath() </script></body></html>위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.