مجموعة صور التوقيع الإلكتروني
هناك طريقتان متكاملتان لجمع صور الختم:
الطريقة الأولى: إنشاء صورة ختم عبر الإنترنت، ولكن هناك عيبًا في هذه الطريقة، حيث يوجد حد لعدد الكلمات الموجودة في اسم الشركة في الختم.
الطريقة الثانية: قم بتحميل نسخة الختم الممسوحة ضوئيًا، وسيقوم النظام بمعالجة الصورة الممسوحة ضوئيًا واستخراج صورة الختم من النسخة الممسوحة ضوئيًا.
تقدم هذه المقالة الطريقة الأولى. سيتم إصدار الطريقة الثانية لاحقًا. أرادت الطريقة الأولى في الأصل استخدام 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='قسم الموارد البشرية لوحدة معينة'/> <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); 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 'العرض='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.strokeStyle=#f00; context.beginPath(); context.lineWidth=1; context.strokeStyle=#f00; context.arc(width,height,75,0,Math.PI*2); context.stroke(); // ارسم نجمة خماسية create5star(context,width,height,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*(count - 1));// الزاوية بين الكلمات var chars =company.split(); 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);// ترجم إلى هذا الموضع، عندما تكون الكلمة متعامدة مع المحور السيني context.rotate(Math.PI/2);// تدوير 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; /Border 1 context.lineWidth=2; context.strokeStyle=#f00; context.arc(width,height,78,0,Math.PI*2); context.save(); // الحدود 2 context.lineWidth=1; context.strokeStyle=#f00; beginPath(); context.arc(width,height,63,0,Math.PI*2); context.stroke(); // ارسم نجمة خماسية create5star(context,width,height,20,#f00,0); // ارسم نوع الختم context.font = 'bolder 15px SimSun'; ضبط عمودي محاذاة النص 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. المعلمة الأولى هي المسافة من خارج الدائرة المسافة، السياق الأقرب.translate(52, 0); context.rotate(Math.PI/2);// تدوير 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(); var ec; 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 درجة بحيث يكون النص موازيًا للمحور السيني context.fillText(ec,0, 4.8) ;// هذه النقطة هي النقطة المركزية للكلمة context.restore(); } } // ارسم وظيفة نجمة خماسية create5star(context,sx,sy,radius,color,rotato){ context.save(); =color; context.translator(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.stroke(); context.fill();بيضاوي
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Ellipse</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 > < معرف قماش = عرض قماش = 165 ارتفاع = 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 = document .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); /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;// تعيين لون الحدود context.textBaseline = ' middle ';// تعيين المحاذاة العمودية للنص context.textAlign = 'center'; // تعيين المحاذاة الأفقية للنص context.lineWidth = 2;// عرض القطع الناقص 1 // 3 المعلمات: عرض الحافة العلوية للهامش الأيسر BezierEllipse4(context, 85, 79, 79, 55); // Ellipse 1 context.lineWidth = 1; , 76, 52); //القطع الناقص 2 context.lineWidth = 2; 85، 79، 63، 39)؛ // القطع الناقص 3 // ارسم نوع الختم context.font = 'bolder 10px SimSun';// تعيين نمط حجم الخط context.fillStyle = 'red';// تعيين لون الخط context.fillText (name,canvas.width/2+3,canvas.height/2+25); 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نسبةX = 70 /circle.radius; //نسبة قياس المحور الأفقي varنسبةY = 45/circle.radius; ضغط موحد) النقاط الرئيسية context.scale(ratioX, نسبةY var Index=0; for(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) //رسم النقطة +- ضبط السياق.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 هي درجة الدوران 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 = '14 بكسل 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 = 'bolder 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 Canvas = 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); context.lineWidth = 1; BezierEllipse4(context, 85, 79, 76, 52); // Ellipse 2 // نوع ختم الرسم context.font = 'bolder 15px SimSun'; f00'; context.fillText(name,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 cadius=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)* نصف القطر+14) context.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle) //Math.PI/2 هي درجة الدوران 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(); أربعة منحنيات بيزير مكعبة في اتجاه عقارب الساعة بدءًا من النقطة ctx.moveTo(x - a, y) 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); ctx, y + b, x, y + b); ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y); ctx. ClosePath(); ctx.stroke() };ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.