คอลเลกชันรูปภาพลายเซ็นอิเล็กทรอนิกส์
มีสองวิธีเสริมในการรวบรวมภาพตราประทับ:
วิธีที่ 1: สร้างภาพตราประทับออนไลน์ แต่วิธีนี้มีข้อเสียเปรียบคือมีการจำกัดจำนวนคำในชื่อบริษัทในตราประทับ
วิธีที่ 2: อัปโหลดสำเนาสแกนของซีล จากนั้นระบบจะประมวลผลรูปภาพที่สแกนและแยกรูปภาพซีลออกจากสำเนาที่สแกน
บทความนี้จะแนะนำวิธีที่ 1 วิธีที่ 2 จะออกในภายหลัง วิธีที่ 1 เดิมต้องการใช้ Java เพื่อสร้างอิมเมจซีล แม้ว่าจะมีโค้ดสำเร็จรูปมากมายบนอินเทอร์เน็ต แต่ขนาดของรูปภาพซีลจำเป็นต้องได้รับการปรับขนาดให้ตรงตาม ข้อมูลจำเพาะ ขนาดซีล: ซีลวงกลมขนาด 43 มม.* 43 มม. (ข้อผิดพลาดที่อนุญาตช่วง 2-3 มม.), ซีลรูปไข่ 43 มม.* 26 มม. (ช่วงข้อผิดพลาดที่อนุญาต 2-3 มม.) ใกล้กับซีลจริงมากขึ้น ฉันคิดว่าการดีบัก Java คงยากกว่านี้ ดังนั้นฉันจึงเปลี่ยนไปใช้ HTML5 เพื่อนำไปใช้งาน
แนวคิดในการใช้ซีลทรงกลมและซีลรูปไข่ใน html5:แท็ก HTML5 <canvas> ใช้ในการวาดภาพ (ผ่านสคริปต์ ซึ่งมักจะเป็น JavaScript) แคนวาสใช้สำหรับการวาดภาพซีล จากนั้นภาพซีลจะถูกสร้างขึ้นผ่านแคนวาส จากนั้นแปลงเป็นอิมเมจ base64
ความยาก:ข้อความโค้งของตราประทับวงรีนั้นสร้างได้ยากกว่า แม้ว่าจะมี JQ js บนอินเทอร์เน็ตที่สามารถสร้างการจัดเรียงอักขระโค้งได้โดยตรง แต่ก็ไม่สามารถแปลงเป็นผืนผ้าใบได้
แก้ปัญหา:ขั้นแรกจัดเรียงข้อความเป็นวงกลม จากนั้นปรับขนาด (บีบอัดเท่าๆ กัน) วงกลมข้อความ
ขั้นแรกให้ทำการเรนเดอร์:
ตรากลมจีนและอังกฤษ ตรากลมจีน ตราวงรี ตราจีนและอังกฤษ ตราจีนวงรี
สินค้ายากรหัส:
กลม
<!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>ประทับตราอย่างเป็นทางการแบบกลม</title> </HEAD> <body> <BR> หน่วยอินพุต (14 หลัก ปรับเปลี่ยนได้เองหากจำเป็น): <input id=dw width=50 type=text value='The Human Resources Department of a specific unit'/> <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> <ประเภทอินพุต=ปุ่ม 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.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.innerHTML); 'ความกว้าง='160' height='160'></canvas>; createSeal11('canvas',dw.value,mdtext.value); } ฟังก์ชั่น createSeal11(id,company,name){ var canvas = document.getElementById(id); canvas.getContext('2d'); // วาดเส้นขอบซีล var width=canvas.width/2; var height=canvas.height/2; context.lineWidth=2; context. strokeStyle=#f00; context.beginPath(); context.arc(ความกว้าง,ความสูง,78,0,Math.PI*2); context.save(); context.lineWidth=1; context. strokeStyle=#f00; context.beginPath(); context.arc (ความกว้าง, ความสูง, 75,0, Math.PI * 2); context.save (); // วาดดาวห้าแฉก create5star (บริบท, ความกว้าง, ความสูง, 25, # f00,0 ); // วาดชื่อตราประทับ context.font = '18px Helvetica'; context.textBaseline = 'middle'; // ตั้งค่าการจัดตำแหน่งแนวตั้งของข้อความ context.textAlign = 'center'; //ตั้งค่าการจัดตำแหน่งแนวนอนของข้อความ context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(name,width,height+53); // วาดหน่วยซีล context.translate ( width,height);//แปลเป็นตำแหน่งนี้ context.font = '20px Helvetica' var count = company.length;//จำนวนคำ var angle = 4*Math.PI/(3*(นับ - 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.save(64, 0);//แปลเป็นตำแหน่งนี้ เมื่อคำตั้งฉากกับบริบทของแกน x.rotate(Math.PI/2);//หมุน 90 องศา เพื่อให้คำนั้นขนานกับบริบทของแกน x fillText(c,0, 5) ;//จุดนี้เป็นจุดศูนย์กลางของคำว่า context.restore(); } } ฟังก์ชั่น createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); บริบทที่หลากหลาย = canvas.getContext('2d'); context.translate(0,0);//ย้ายจุดกำเนิดพิกัด//วาดเส้นขอบซีล var width=canvas.width/2; var height=canvas.height/2; /ชายแดน 1 context.lineWidth=2; context. strokeStyle=#f00; context.beginPath(); context.arc(ความกว้าง,ความสูง,78,0,Math.PI*2); context.save(); //Border 2 context.lineWidth=1; context.จังหวะสไตล์=#f00; BeginPath(); context.arc(ความกว้าง,ความสูง,63,0,Math.PI*2); context.จังหวะ(); //วาดดาวห้าแฉก create5star(context,width,height,20,#f00,0); //Draw the seal type 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(); var 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 ระยะทางบริบทที่ใกล้ชิดยิ่งขึ้น แปล (52, 0); context.rotate(Math.PI/2);// หมุน 90 องศาเพื่อให้คำขนานกับบริบทแกน x.fillText(c,0, 5);//จุดนี้เป็นจุดศูนย์กลางของบริบทของคำ Restore(); } //วาดหน่วยภาษาอังกฤษของ seal context.translate(width-80,height-80);//แปลเป็นตำแหน่งนี้, context.font = 'bolder 10px SimSun'; ecompany.length;//จำนวนคำ var eangle = (5*Math.PI)/(3*(ecount));//มุมระหว่างคำ var echars = ecompany.split(); 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); // หมุน 90 องศาเพื่อให้ข้อความขนานกับบริบทแกน x.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);//หมุน 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++){//วาดทั้งห้าด้านของ ดาวห้าแฉก var x = Math.sin(i*dig); var y = Math.cos(i*dig); context.lineTo(x*radius,y*radius); บริบท.จังหวะ(); บริบท.คืนค่า(); } </html>วงรี
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <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='Company Chapter'/> <div id=sealdiv > < canvas id=ความกว้างของผ้าใบ=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); var sealdiv = document.getElementById(sealdiv); sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'></canvas>; createSeal2('canvas',dw.value,mdtext.value } ฟังก์ชัน createSealEx2(){ var dw = document.getElementById(dw); var edw = document.getElementById(edw); var mdtext = document.getElementById(mdtext); var sealdiv = document.getElementById(sealdiv); <canvas id='canvas' width='165' ความสูง='165'>< /canvas>; createSeal1('canvas',dw.value,edw.value,mdtext.value); } ฟังก์ชัน 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 พารามิเตอร์: ความกว้างขอบซ้ายของวงรีความเรียบ BezierEllipse4(บริบท, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; , 76, 52); //วงรี 2 context.lineWidth = 2; 85, 79, 63, 39); //Ellipse 3 //Draw the seal type context.font = 'bolder 10px SimSun';//ตั้งค่ารูปแบบขนาดตัวอักษร context.fillStyle = 'red';//ตั้งค่าสีตัวอักษร context.fillText (ชื่อ,canvas.width/2+3,canvas.height/2+25); context.save(); //บันทึกการดำเนินการข้างต้น//วาดวงกลมภาษาอังกฤษ={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//ควบคุมระดับของตำแหน่งเริ่มต้นของอักขระ var endAngle =-40;//ระดับของ อักขระตัวแรก var radius=circle .radius //รัศมีของวงกลม var angleDecreat=(startAngle-endAngle)/(ecompany.length-1)//ส่วนโค้งที่ถูกครอบครองโดยตัวอักษรแต่ละตัว context.font=bolder 10px SimSun context.lineWidth=1; // ตั้งค่าแบบอักษรให้อ้วนและบาง var ratioX = 70 / วงกลม รัศมี; // อัตราส่วนสเกลแกนนอน var ratioY = 45 / วงกลม.รัศมี; // อัตราส่วนสเกลแกนแนวตั้ง ( การบีบอัดสม่ำเสมอ) ประเด็นสำคัญ context.scale(ratioX, ratioY); var index=0; for(var index=0;index<ecompany.length;index++){ //บันทึกการตั้งค่าก่อนหน้าและเริ่มวาดภาพ context.save(); context.beginPath(); context.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*รัศมี-12,circle.y-Math.sin((Math.PI/180)*startAngle)*รัศมี+19) // วาดจุด +- ปรับแต่งบริบท.หมุน ((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-=angleDecreation; 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.fillStyle = '#f00'; 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(); } ฟังก์ชัน createSeal2(id,บริษัท,ชื่อ){ var canvas = document.getElementById (ผ้าใบ); บริบท var = canvas.getContext (2d); context. strokeStyle=red; // ตั้งค่าสีข้อความ context.textBaseline = 'middle'; // ตั้งค่าการจัดตำแหน่งแนวตั้งของข้อความ context.textAlign = 'center'; // ตั้งค่าการจัดตำแหน่งแนวนอนของข้อความ context.lineWidth = 2; //ความกว้างของวงรี 1 //3 พารามิเตอร์: ขอบซ้าย, ขอบด้านบน, ความกว้าง, ความเรียบของวงรี BezierEllipse4(บริบท, 85, 79, 79, 55); //วงรี 1 context.lineWidth = 1; BezierEllipse4 (บริบท, 85, 79, 76, 52); //Ellipse 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 }; cendAngle =15;//ระดับการแยกระหว่างอักขระตัวแรก var cradius=ccircle.radius //รัศมีของวงกลม var cangleDecreation=(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<บริษัท.ความยาว;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-=cangleDecreation context.restore() } } ฟังก์ชัน BezierEllipse4(ctx, x, y, a, b){ var k = .5522848, ox = a * k, // ชดเชยจุดควบคุมแนวนอน oy = b * k; // ชดเชยจุดควบคุมแนวตั้ง</p> <p> ctx.beginPath(); // จากปลายด้านซ้ายของวงรีวาด เส้นโค้ง Bezier สี่ลูกบาศก์ตามเข็มนาฬิกาเริ่มต้นจากจุด ctx.moveTo(x - a, y); ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b); ctx.bezierCurveTo(x + วัว, y - b, x + a, y - oy, x + a, y); วัว, y + b, x, y + b); ctx.bezierCurveTo(x - วัว, y + b, x - a, y + oy, x - a, y); ctx.closePath(); ctx.จังหวะ(); </script></body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network