電子署名写真集
アザラシの画像を収集するには、補完的な方法が 2 つあります。
方法 1: シールの画像をオンラインで生成します。この方法には欠点があります。文字数が増えると、シールが崩れる可能性が高くなります。
方法 2: 印鑑のスキャンしたコピーをアップロードすると、システムがスキャンした画像を処理して、スキャンしたコピーから印鑑の画像を抽出します。
この記事では方法 1 を紹介します。方法 2 は後で公開します。方法 1 は当初 Java を使用して印鑑画像を生成する予定でしたが、インターネット上に既製のコードが多数ありますが、印鑑画像のサイズは用途に合わせて調整する必要があります。仕様シールサイズ：円形シールサイズ43mm*43mm（誤差許容範囲2-3mm）、楕円シール43mm*26mm（誤差許容範囲2-3mm）は実際のシールに近いです。 Java のデバッグはより難しいと考えたので、実装のために HTML5 に切り替えました。
html5 で丸いシールと楕円形のシールを実装するためのアイデア:HTML5 の <canvas> タグは、(スクリプト、通常は JavaScript を介して) 画像を描画するために使用され、canvas はアザラシの描画に使用され、アザラシの画像は Canvas を通じて生成されてから、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='特別章'/ > <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(mdtext); var tuzhangdiv = document.getElementById(tuzhangdiv); '幅='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;コンテキスト.lineWidth=2; コンテキスト.ストロークスタイル=#f00; コンテキスト.アーク(幅,高さ,78,0,コンテキスト.ストローク();コンテキスト.lineWidth=1; コンテキスト.ストロークスタイル=#f00; context.arc(width,height,75,0,Math.PI*2); context.blood(); //五芒星の描画 create5star(context,width,height,25,# f00,0 ); // シール名を描画 context.font = '18px Helvetica'; context.textBaseline = 'middle' // テキストの垂直方向の配置を設定します。 'center'; // テキストの水平方向の配置を設定します context.lineWidth=1; context.fillText(name,width,height+53); // シールユニットを描画します( width,height);// この位置に翻訳します。 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.arc(width,height,78,0,Math.PI*2); context.blood(); // 境界線 2 context.drawingStyle=#f00; beginPath(); context.arc(幅,高さ,63,0,Math.PI*2); //五芒星を描画します create5star(context,width,height,20,#f00,0); //シールタイプを描画します context.font = 'bolder 15px SimSun' //テキストの垂直方向の配置を設定します context.textAlign = 'center' //テキストの水平方向の配置を設定します context.lineWidth=1; 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(); // このとき、単語は円の外側からの距離です。距離が近ければ近いほど context.translate(52, 0); context.rotate(Math.PI/2);// 単語を x 軸と平行にするために 90 度回転します context.fillText(c,0, 5);// この点は単語コンテキストの中心点です。 restor(); } //シールの英語単位を描画します 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(); // このとき、単語は円の外側からの距離です。距離が近いほど context.translate(74, 0); context.rotate(Math.PI/2);// テキストが x 軸と平行になるように 90 度回転します context.fillText(ec,0, 4.8) ;//この点は単語の中心点です context.restore(); } } //五芒星を描画します function create5star(context,sx,sy,radius,color,rotato){ context.save(); =color; context.translate(sx,sy);//座標原点を移動 context.rotate(Math.PI+rotato);//回転 context.beginPath();//パスを作成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);コンテキスト.ストローク(); コンテキスト.フィル();楕円形
<!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 > < 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>;関数 createSealEx2(){ var dw = document.getElementById(dw); document.getElementById(edw); var mdtext = document.getElementById(mdtext); var sealdiv = document.getElementById(sealdiv); <canvas id='canvas' width='165' height='165'>< /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.textBaseline = ' middle ';//テキストの垂直方向の配置を設定します context.textAlign = 'center' //テキストの水平方向の配置を設定します context.lineWidth = 2;//楕円の幅 1//3 パラメータ: 左マージン上端の幅楕円の平坦度 BezierEllipse4(context, 85, 79, 79, 55) //楕円 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); //上記の操作を保存します//英語を描画します 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 rateX = 70 /circle.radius; //横軸のスケーリング率 var rateY = 45 /circle.radius; //縦軸のスケーリング率 //均一圧縮) 重要なポイント context.scale(ratioX, rateY); for(varindex=0;index<ecompany.length;index++); //前の設定を保存し、ペイントを開始します context.save(); context.beginPath(); 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); ),0 ,0); startAngle-=angleDecrement; context.restore(); } // 描画シールタイプ context.font = 'bolder 14px SimSun'; context.lineWidth=1; context.fillStyle = '#f00'; context.fillText(company.substring(0,6),canvas.height/2+6); ; context.font = '大胆な 14px SimSun'; context.lineWidth = '#f00'; context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25); context.font = 'bolder 14px SimSun'; 1; context.fillStyle = '#f00'; context.fillText(company.substring(12,company.length),canvas.width/2-12,canvas.height/2+40); } function createSeal2(id,company,name);キャンバス = document.getElementById(canvas); var context = Canvas.getContext(2d); context.bottomline = 'middle'; // テキストの色を設定します 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); //楕円形 2 //描画シールの種類 context.font = 'bolder 15px SimSun' context.fillStyle = '# 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 crradius=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.drawingText(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) から始まる時計回りの 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 + oy, x - a, y); ctx.closePath(); </script></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。