Коллекция изображений электронной подписи
Существует два взаимодополняющих способа сбора изображений тюленей:
Способ 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='Отдел кадров определенного подразделения'/> <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.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); 'ширина = '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; var height=canvas.height/2; context.lineWidth=2; context.strokeStyle=#f00; context.beginPath(); context.arc(width,height,78,0,Math.stroke(); context.save(); 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' // Установите вертикальное выравнивание текста 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 angular = 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);//Перевести в это положение, когда слово перпендикулярно оси X context.rotate(Math.PI/2);//Повернуть на 90 градусов, чтобы слово было параллельно контексту оси X. 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; var height=canvas.height/2; /Border 1 context.lineWidth=2; context.strokeStyle=#f00; context.beginPath(); context.arc(width,height,78,0,Math.PI*2); context.stroke(); context.save(); //Граница 2 context.lineWidth=1; context.strokeStyle=#f00; BeginPath(); context.arc(width,height,63,0,Math.PI*2); context.stroke(); context.save(); //Нарисуем пятиконечную звезду create5star(context,width,height,20,#f00,0 //Нарисуем печать типа context.font = 'bolder 15px SimSun'; context.textBaseline = 'middle'; Устанавливаем вертикальность текста. Alignment 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 angular = 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); // Перевести в это положение. В этот момент слово перпендикулярно оси X. Первый параметр — это расстояние от внешней стороны круга. расстояние, тем ближе context.translate(52, 0); context.rotate(Math.PI/2);// Поверните на 90 градусов, чтобы сделать слово параллельным оси X context.fillText(c,0, 5);//Эта точка является центральной точкой контекста слова. restre(); } //Рисуем английскую единицу печати 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); // Перевести в это положение. В этот момент слово перпендикулярно оси X. Первый параметр — это расстояние от внешней стороны круга. расстояние, тем ближе context.translate(74, 0); context.rotate(Math.PI/2);// Поворот на 90 градусов, чтобы текст был параллелен оси X 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();//Создать путь 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); context.stroke(); context.fill(); context.restore() } </html>;овал
<!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 = document.getElementById(edw); var mdtext = document.getElementById(mdtext); document.getElementById(sealdiv.innerHTML =<canvas id='canvas' width='165' height='165'></canvas>; createSeal2('canvas',dw.value,mdtext.value }); функция createSealEx2() { var dw = document.getElementById(dw); document.getElementById(edw); var mdtext = document.getElementById(mdtext); var seadiv = document.getElementById(sealdiv.innerHTML =<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.strokeStyle=red;//Установим цвет границы context.textBaseline = ' middle ';//Установим вертикальное выравнивание текста context.textAlign = 'center' //Установим горизонтальное выравнивание текста context.lineWidth = 2;//Ширина эллипса 1//3 параметры: ширина верхнего края левого края, плоскостность эллипса BezierEllipse4(context, 85, 79, 79, 55); //Ellipse 1 context.lineWidth = 1; BezierEllipse4(context, 85, 79); , 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); context.save(); //Сохраняем вышеуказанную операцию//Рисуем английский varcircle={ x:canvas.width/2, y:canvas.height/2, radius:58 }; var startAngle=220;//Управляем степенью начальной позиции персонажа var endAngle =-40;//Градус первый символ var radius=circle .radius //Радиус круга var angularDecrement=(startAngle-endAngle)/(ecompany.length-1)//Дуга, занимаемая каждой буквой context.font=bolder 10px SimSun context.lineWidth=1; //Установите жирный и тонкий шрифт var коэффициент X = 70 / Circle.radius; //Коэффициент масштабирования по горизонтальной оси var RatioY = 45 / Circle.radius; //Коэффициент масштабирования по вертикальной оси // Масштаб ( равномерное сжатие) Ключевые моменты context.scale(ratioX, RatioYY); for(var index=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); 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 = 'более 14 пикселей SimSun'; context.lineWidth= 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(холст вар контекст = холст.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; 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 }; //Управляем начальной позицией символа 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(); //От левого конца эллипса Draw; четыре кубические кривые Безье по часовой стрелке, начиная с точки 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.bezierCurveTo(x + a, y + oy, x +); ox, y + b, x, y + b); ctx.bezierCurveTo(x - ox, y + b, x - a, y); + ой, х - а, y); ctx.closePath(); ctx.stroke() };Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.