Gambar segel HTML5 gambar tanda tangan elektronik (segel oval Cina dan Inggris, segel oval Cina dan Inggris)

Penulis：Eve Cole Waktu Pembaruan：2025-02-17 02:12:02

Koleksi gambar tanda tangan elektronik

Ada dua cara yang saling melengkapi untuk mengumpulkan gambar segel:

Cara 1: Buat gambar stempel secara online, namun cara ini memiliki kekurangan. Terdapat batasan jumlah kata pada nama perusahaan pada stempel.

Metode 2: Unggah salinan pindaian segel, dan sistem akan memproses gambar pindaian dan mengekstrak gambar segel dari salinan pindaian.

Artikel ini memperkenalkan metode 1. Metode 2 akan dirilis nanti. Metode 1 awalnya ingin menggunakan Java untuk menghasilkan gambar segel. Meskipun ada banyak kode siap pakai di Internet, ukuran gambar segel perlu disesuaikan agar sesuai Spesifikasi ukuran segel: ukuran segel melingkar 43mm*43mm (kisaran kesalahan yang diijinkan 2-3mm), segel oval 43mm*26mm (kisaran kesalahan yang diijinkan 2-3mm) lebih dekat dengan segel asli. Saya pikir akan lebih sulit untuk men-debug Java, jadi saya beralih ke HTML5 untuk implementasi.

Ide untuk menerapkan segel bulat dan segel elips di html5:

Tag HTML5 <canvas> digunakan untuk menggambar gambar (melalui skrip, biasanya JavaScript), kanvas digunakan untuk melukis segel, dan kemudian gambar segel dihasilkan melalui kanvas dan kemudian diubah menjadi gambar base64.

kesulitan:

Teks melengkung pada segel oval lebih sulit untuk diproduksi. Meskipun ada JQ js di Internet yang dapat langsung menghasilkan susunan karakter melengkung, namun tidak dapat diubah menjadi kanvas.

menyelesaikan:

Pertama susun teks dalam lingkaran, lalu skalakan (kompres secara merata) lingkaran teks.

Pertama, renderingnya:

Segel bulat Cina dan Inggris Segel bulat Cina Segel Cina dan Inggris oval Segel Cina oval

Barang keras

Kode:

bulat

 <!DOCTYPE HTML> <HEAD> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Segel resmi bulat</title> </HEAD> <body> <BR> Unit input (14 digit, sesuaikan sendiri jika perlu): <input id=dw width=50 type=text value='Departemen Sumber Daya Manusia unit tertentu'/> <br> Unit masukan (Bahasa Inggris): <input id=edw width=50 type=text value='WTYRBCHFBBDHCBFVBDDD'/> <br> Teks di bawah bab: <input id=mdtext width=50 type=text value='Special Chapter'/ > <div id=sealdiv > <kanvas id=lebar kanvas=250 tinggi=250></canvas> </div> <tipe masukan=tombol onclick=javascript:createSealEx(); value=Buat stempel resmi berbahasa Mandarin dan Inggris/> <input type=button onclick=javascript:createSealEx2(); createSealEx() { var dw = dokumen.getElementById(dw); var edw = dokumen.getElementById(edw); mdtext = document.getElementById(mdtext); var tuzhangdiv = document.getElementById(tuzhangdiv.innerHTML =<canvas id='canvas' width='160' height='160'></canvas>; ',dw.nilai,edw.nilai,mdteks.nilai } fungsi createSealEx2(){ var dw = dokumen.getElementById(dw); var edw = dokumen.getElementById(edw); var mdtext = dokumen.getElementById(mdtext); var tuzhangdiv = dokumen.getElementById(tuzhangdiv); 'lebar='160' height='160'></canvas>; createSeal11('canvas',dw.value,mdtext.value); } fungsi createSeal11(id,perusahaan,nama){ var canvas = document.getElementById(id); canvas.getContext('2d'); // Gambarkan batas segel var width=canvas.width/2; konteks.lebar garis=2; konteks.strokeStyle=#f00; konteks.beginPath(); konteks.arc(lebar,tinggi,78,0,Math.PI*2); konteks.lineWidth=1; konteks.strokeStyle=#f00; konteks.beginPath(); konteks.arc(lebar,tinggi,75,0,Math.PI*2); konteks.stroke(); konteks.save(); //Gambarlah bintang berujung lima create5star(konteks,lebar,tinggi,25,# f00,0 ); // Gambarkan nama segel konteks.font = '18px Helvetica'; konteks.textBaseline = 'tengah'; // Atur perataan vertikal teks konteks.textAlign = 'center'; //Mengatur perataan horizontal teks konteks.lineWidth=1; konteks.fillStyle = '#f00'; konteks.fillText(nama,lebar,tinggi+53); ( lebar, tinggi);//Terjemahkan ke posisi ini, konteks.font = '20px Helvetica' var count = perusahaan.panjang;//Jumlah kata var angle = 4*Math.PI/(3*(count - 1));//Sudut antar kata var chars = company.split(); for (var i = 0; i < count; i++){ c = chars [i];//Karakter yang akan digambar if(i==0) konteks.putar(5*Math.PI/6); lain konteks.putar(sudut); konteks.simpan(); 0);//Terjemahkan ke posisi ini, ketika kata tersebut tegak lurus dengan konteks sumbu x.rotate(Math.PI/2);//Putar 90 derajat, sehingga kata tersebut sejajar dengan konteks sumbu x. fillText(c,0, 5) ;//Titik ini merupakan titik tengah dari kata konteks.restore(); } } function createSeal(id,company,ecompany,name){ var canvas = document.getElementById(id); konteks var = canvas.getContext('2d'); konteks.translate(0,0);//Pindahkan koordinat asal//Gambar batas segel var width=canvas.width/2; /Perbatasan 1 konteks.lineWidth=2; konteks.strokeStyle=#f00; konteks.arc(lebar,tinggi,78,0,Math.PI*2); konteks.stroke(); konteks.save(); //Perbatasan 2 konteks.lineWidth=1; konteks.strokeStyle=#f00; mulaiPath(); konteks.arc(lebar,tinggi,63,0,Matematika.PI*2); //Gambarlah bintang berujung lima create5star(context,width,height,20,#f00,0); //Gambarlah jenis segel konteks.font = 'bolder 15px SimSun'; Mengatur vertikalitas teks Penyelarasan konteks.textAlign = 'center'; //Mengatur perataan horizontal teks konteks.lineWidth=1; konteks.fillText(nama,lebar,tinggi+50); // Gambarkan satuan bahasa Mandarin dari segel konteks.translate(lebar,tinggi); // Terjemahkan ke posisi ini, konteks.font = 'bolder 18px SimSun' var count = company.length ;//Jumlah kata var angle = 4*Math.PI/(3*(count-1));//Sudut antar kata var chars = company.split(); c; for (var i = 0; i < count; i++){ c = chars[i];//Karakter yang akan digambar if(i==0) konteks.rotate(5*Math.PI/6); konteks.putar(sudut); konteks.save(); // Terjemahkan ke posisi ini, kata tersebut tegak lurus terhadap sumbu x jarak, semakin dekat konteksnya.translate(52, 0); konteks.rotate(Math.PI/2);// Putar 90 derajat untuk membuat kata sejajar dengan sumbu x konteks.fillText(c,0, 5);//Titik ini adalah titik tengah konteks kata. memulihkan(); } //Gambarkan unit bahasa Inggris dari segel konteks.translate(lebar-80,tinggi-80);//Terjemahkan ke posisi ini, konteks.font = 'bolder 10px SimSun'; ecompany.length;//Jumlah kata var eangle = (5*Math.PI)/(3*(ecount));//Sudut antar kata var echars = ecompany.split(); 0; j < ecount; j++){ ec = echars[j];//Karakter yang akan diambil if(j==0) konteks.rotate(6*Math.PI/7-1); konteks.rotate(eangle); konteks.save(); // Terjemahkan ke posisi ini, kata tersebut tegak lurus terhadap sumbu x jarak, semakin dekat konteks.translate(74, 0); konteks.rotate(Math.PI/2);// Putar 90 derajat sehingga teks sejajar dengan sumbu x konteks.fillText(ec,0, 4.8) ;// Titik ini merupakan titik tengah dari kata konteks.restore(); //Gambarlah fungsi bintang berujung lima create5star(context,sx,sy,radius,color,rotato){ konteks.save(); =warna; konteks.translate(sx,sy);//Pindahkan konteks asal koordinat.rotate(Math.PI+rotato);//Putar konteks.beginPath();//Buat jalur var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; for(var i = 0;i< 5;i++){//Gambarlah lima sisinya bintang berujung lima var x = Math.sin(i*dig); var y = Math.cos(i*dig); konteks.lineTo(x*radius,y*radius } konteks.closePath(); konteks.stroke(); konteks.isi(); konteks.pemulihan();

bulat telur

 <!DOCTYPE html><html><head> <meta http-equiv=Jenis Konten content=text/html; charset=UTF-8 /> <title>Ellipse</title> </head><body> Unit masukan (Mendukung hingga 14 digit, sesuaikan sendiri): <input id=dw width=50 type=text value='Test Seal Elliptical Technology Co., Ltd.'/> <br> Unit input (Bahasa Inggris): <input id=edw width=50 type=text value='EASTPORTCOMPANY'/> <br> Teks di bawah bab: <input id=mdtext width=50 type=text value='Company Chapter'/> <div id=sealdiv > < kanvas id=lebar kanvas=165 tinggi=165></kanvas> </div> </div> <input type=button onclick=javascript:createSealEx(); value=Buat stempel resmi berbahasa Mandarin/> <input type=button onclick=javascript:createSealEx2(); value=Buat stempel resmi berbahasa Mandarin dan Inggris/> <script> function createSealEx(){ var dw = document.getElementById(dw); edw = dokumen .getElementById(edw); var mdtext = dokumen.getElementById(mdtext); dokumen.getElementById(sealdiv); sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'></canvas>; fungsi createSealEx2(){ var dw = dokumen.getElementById(dw); dokumen.getElementById(edw); var mdtext = dokumen.getElementById(mdtext); var sealdiv = dokumen.getElementById(sealdiv.innerHTML =<kanvas id='kanvas' lebar='165' tinggi='165'>< /kanvas>; createSeal1('kanvas',dw.nilai,edw.nilai,mdteks.nilai); } function createSeal1(id,company,ecompany,name){ var canvas = document.getElementById(canvas); var konteks = canvas.getContext(2d); middle ';//Mengatur perataan vertikal teks konteks.textAlign = 'center'; //Mengatur perataan horizontal teks konteks.lineWidth = 2;//Lebar elips 1//3 parameter: margin kiri lebar tepi atas elips kerataan BezierEllipse4(konteks, 85, 79, 79, 55); //Ellipse 1 konteks.lineWidth = 1; , 76, 52); //Ellipse 2 konteks.lineWidth = 2; 85, 79, 63, 39); //Ellipse 3 //Gambar tipe segel konteks.font = 'bolder 10px SimSun';//Atur gaya ukuran font konteks.fillStyle = 'merah';//Atur warna font konteks.fillText (nama,kanvas.lebar/2+3,kanvas.tinggi/2+25); konteks.save(); //Simpan operasi di atas//Gambar Bahasa Inggris var lingkaran={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//Kontrol derajat posisi awal karakter var endAngle =-40;//Derajat karakter pertama var radius=lingkaran .radius //Radius lingkaran var angleDeclinement=(startAngle-endAngle)/(ecompany.length-1)//Busur yang ditempati setiap huruf konteks.font=bolder 10px SimSun konteks.lineWidth=1; //Mengatur font gemuk dan tipis var rasioX = 70 / lingkaran.radius; //Rasio penskalaan sumbu horizontal var rasioY = 45 / lingkaran.radius; Kompresi seragam) Poin-poin penting konteks.skala(ratioX, rasioY); var indeks=0; for(var indeks=0;indeks<ecompany.length;index++){ //Simpan pengaturan sebelumnya dan mulai melukis konteks.save(); konteks.beginPath(); konteks.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19) //Gambar titik +- menyempurnakan konteks.rotate((Math.PI/2)-(Math.PI/180)*startAngle); //Math.PI/2 adalah rotasi 90 derajat Math.PI/180*X adalah derajat rotasi konteks.fillText(ecompany.charAt(index),0,0); ),0 ,0); startAngle-=angleDecrement; konteks.restore(); // Menggambar tipe segel konteks.font = 'bolder 14px SimSun'; konteks.lineWidth=1; konteks.fillStyle = '#f00'; konteks.fillText(perusahaan.substring(0,6),kanvas.lebar/2-11,kanvas.tinggi/2+6); ; konteks.font = 'lebih tebal 14px SimSun'; konteks.lineWidth=1; konteks.fillText(perusahaan.substring(6,12),kanvas.lebar/2-12,kanvas.tinggi/2+25); konteks.save(); konteks.font = 'lebih tebal 14px SimSun'; 1; konteks.fillStyle = '#f00'; konteks.fillText(perusahaan.substring(12,perusahaan.panjang),kanvas.lebar/2-12,kanvas.tinggi/2+40); konteks.save(); } fungsi createSeal2(id,perusahaan,nama){ var kanvas = dokumen.getElementById(kanvas); var konteks = kanvas.getContext(2d); konteks.strokeStyle=merah; //Mengatur warna teks konteks.textBaseline = 'tengah'; //Mengatur perataan vertikal teks konteks.textAlign = 'tengah'; //Mengatur perataan horizontal teks konteks.lineWidth = 2; //Lebar Ellipse 1 //3 parameter: margin kiri, tepi atas, lebar, kerataan elips BezierEllipse4(konteks, 85, 79, 79, 55); konteks.lineWidth = 1; BezierEllipse4(konteks, 85, 79, 76, 52); //Ellipse 2 //Menggambar jenis segel konteks.font = 'lebih tebal 15px SimSun'; f00'; konteks.fillText(nama,kanvas.lebar/2+3,kanvas.tinggi/2+10); konteks.save(); //Gambar Cina var ccircle={ x:canvas.width/2, y:canvas.height/2, radius:59 }; var cstartAngle=170;//Kontrol posisi awal karakter var cendAngle =15;//Derajat jarak antar karakter pertama var cradius=ccircle.radius //Jari-jari lingkaran var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//Busur yang ditempati oleh setiap huruf konteks.font=12px SimSun var cratioX = 66 / ccircle.radius; //Rasio penskalaan sumbu horizontal var cratioY = 57 / ccircle .radius; //rasio penskalaan sumbu vertikal//penskalaan (kompresi seragam) konteks.skala(cratioX, var cindex=0; untuk(var cindex=0;cindex<perusahaan.panjang;cindex++){ konteks.simpan() konteks.beginPath() //Gambar titik konteks.translate(ccircle.x+Math.cos((Math.PI/180)*cstartAngle)*cradius-6,ccircle.y-Math.sin((Math.PI/180)*cstartAngle)* cradius+14) konteks.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle) //Math.PI/2 adalah putaran 90 derajat Math.PI/180*X adalah derajat putaran konteks.fillText(perusahaan.charAt(cindex),0,0) konteks.strokeText(perusahaan.charAt(cindex) ,0, 0) cstartAngle-=cangleDecrement konteks.restore() } } fungsi BezierEllipse4(ctx, x, y, a, b){ var k = .5522848, ox = a * k, // Offset titik kontrol horizontal oy = b * k; // Offset titik kontrol vertikal</p> <p> ctx.beginPath(); //Dari ujung kiri Gambar elips empat kurva Bezier kubik searah jarum jam dimulai dari titik ctx.moveTo(x - a, y); ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b); ctx.bezierCurveTo(x + lembu, y - b, x + a, y - oy, x + a, y); lembu, y + b, x, y + b); ctx.bezierCurveTo(x - lembu, y + b, x - a, y + oy, x - a, y); ctx.closePath(); ctx.stroke();

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.