"use strict"; var FXQ = { //签章颜色定义 colors: ['red','blue','#000'], //签章字体定义 fonts: ['SimSun','YouYuan','KaiTi'], baseConf: { color: null, font: null, }, commonMethod: function(cType,fType) { var color = null; color = this.colors[cType]; if (color === undefined || color == 'undefined') { color = this.colors[0]; } var font = this.fonts[fType]; if (font === undefined || font == 'undefined') { font = this.fonts[0]; } this.baseConf.color = color; this.baseConf.font = font; }, /** * * @param company 公司名称 * @param cType 颜色 0.红 1. 蓝色 2.其他 * @param fType 字体 0.宋体 * @param sType 签章类型 0.公章 1.合同专用章 * @param seaNo 这个是签章的序列号 */ companySeal: function (company,cType,fType,sType,seaNo) { //获取canvans doc对象 // var canvas = document.getElementById('canvas'); var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); canvas.width = 300; canvas.height = 300; this.commonMethod(cType,fType); var width = canvas.width/2; var height = canvas.height/2; //画圆方法 drawCircle() draw5Start(30,0) drawTitle(); writeSerNo(seaNo) writeFont(company) //返回图片base64 return canvas.toDataURL(); /** * 画圆的方法 * color : 圆边框的颜色 * lineWidth: 线条宽度 */ function drawCircle() { context.translate(0,0); context.lineWidth = 5; context.strokeStyle=FXQ.baseConf.color; context.beginPath(); context.arc(width,height,110,0,Math.PI*2); context.stroke(); context.save(); var data = canvas.toDataURL("image/jpeg") console.log(canvas); } /** * 绘制五角星 * @param sx * @param sy * @param radius * @param color * @param rotato */ function draw5Start() { context.save(); context.fillStyle=FXQ.baseConf.color; //移动坐标原点 中心点开始绘制 context.translate(width,height); //旋转 context.rotate(Math.PI); context.beginPath(); 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*30,y*30); } context.closePath(); context.stroke(); context.fill(); context.restore(); } /** * 绘制公章标题 */ function drawTitle() { var title = ''; if (sType != 0) { title = '合同专用章'; } // 绘制印章名称 context.font = 'bolder 20px '+FXQ.baseConf.font; context.textBaseline = 'middle';//设置文本的垂直对齐方式 context.textAlign = 'center'; //设置文本的水平对对齐方式 context.lineWidth=1; context.fillStyle = FXQ.baseConf.color; context.fillText(title,width,height+65); } /** * 绘制公司名称 */ function writeFont() { context.font = 'bolder 30px '+FXQ.baseConf.font; var count = company.length;// 字数 var angle = -4*Math.PI/(3*(count - 1));// 字间角度 var chars = company.split(""); var trueChars = chars.reverse(); var c; for (var i = 0; i < count; i++){ c = trueChars[i];// 需要绘制的字符 if(i==0) context.rotate(5*Math.PI/6.1); else context.rotate(angle); context.save(); context.translate(95, 0);// 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近 context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴 context.fillText(c,0, 5);// 此点为字的中心点 context.restore(); } } /** * 绘制签章序列号 * @param serNo */ function writeSerNo(serNo) { context.translate(width, height); context.font = 'bolder 8px '+FXQ.baseConf.font; var count = serNo.length;// 字数 var angle = -2 * Math.PI / (6 * (count - 1));// 字间角度 var chars = serNo.split(""); for (var i = 0; i < count; i++) { var c = chars[i];// 需要绘制的字符 if (i == 0) context.rotate(10 * Math.PI / 5.95); else context.rotate(angle); context.save(); context.translate(-95, 5);// 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近 context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴 context.fillStyle = FXQ.baseConf.color; context.fillText(c, 0, 5);// 此点为字的中心点 context.restore(); } } }, /** * 绘制个人签章 * @param name 姓名 * @param cType 字体颜色 * @param fType 字体 * @param type 类型 */ personal: function (name,cType,fType,type,border) { this.commonMethod(cType,fType); var color = FXQ.baseConf.color; var font = FXQ.baseConf.font; //获取canvans doc对象 //var canvas = document.getElementById('canvas'); var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); canvas.width = 120; canvas.height = 120; var length = name.length; //长方形前面 if (type == 0) { console.log(context.width) //要边框 if (border == 0) { context.rect(5, 5, 100, 50); context.strokeStyle = color; context.lineWidth = 4 context.stroke(); } // 绘制印章名称 context.font = '30px '+font; if (length > 3) { context.font = '24px '+font; } context.textBaseline = 'middle';//设置文本的垂直对齐方式 context.textAlign = 'center'; //设置文本的水平对对齐方式 context.lineWidth=1; context.fillStyle = color; context.textAlign = 'center'; //设置文本的水平对对齐方式 context.fillText(name,55,30); } else {//正方形 var personal = ''; switch (name.length) { case 3: name += '印'; break; case 2: name += '之印'; default: break; } var names = name.split(''); personal = names[2]+names[0]+names[3]+names[1]; //要边框 if (border == 0) { context.rect(2,2,108,108); context.strokeStyle=color; context.lineWidth=2 context.stroke(); } // 绘制印章名称 context.font = '40px '+font; context.fillStyle = color; this.wrapText(context,personal,8,45,80,40) } //返回图片base64 return canvas.toDataURL(); }, //椭圆签章 companyEllipse: function (company,serNo,fType,cType) { //椭圆长轴半径 var radiusX = 140; //短轴半径 var radiusY = 90; this.commonMethod(cType,fType); var color = FXQ.baseConf.color; var font = FXQ.baseConf.font; //var canvas = document.getElementById('canvas'); var canvas = document.createElement("canvas"); canvas.width = 300; canvas.height = 300; canvas.width = 2 * radiusX + 5; canvas.height = 2 * radiusY + 5; var context = canvas.getContext('2d'); writeFont(true,company); writeFont(false,serNo); writeTitle(); drawEllipse(); function writeFont(isTop,words) { var totalArcAng = 180; font = "20px "+font //字体长度 if (!isTop) { totalArcAng = 60; font = "10px "+font } var fontTextLen = words.length; var radiusWidth = radiusX + context.lineWidth; var radiusHeight = radiusY + context.lineWidth; //从边线向中心的移动因子 var minRat = 0.9; //起始角度 var startAngle = isTop == true ? -90 -totalArcAng/2 : 90 - totalArcAng/2; var step = 0.5; var alCount = Math.ceil(totalArcAng / step) + 1; var angleArr = new Array(alCount); var arcLenArr = new Array(alCount); var num = 0; var accArcLen = 0; angleArr[num] = startAngle; arcLenArr[num] = accArcLen; num++; var angR = startAngle * Math.PI / 180; var lastX = radiusX * Math.cos(angR) + radiusWidth; var lastY = radiusY * Math.sin(angR) + radiusHeight; for (var i = startAngle + step; num < alCount; i+=step) { angR = i * Math.PI / 180; var x = radiusX * Math.cos(angR) + radiusWidth; var y = radiusY * Math.sin(angR) + radiusHeight; accArcLen += Math.sqrt((lastX - x) * (lastX - x) + (lastY - y) * (lastY - y)); angleArr[num] = i; arcLenArr[num] = accArcLen; lastX = x; lastY = y; num++; } var arcPer = accArcLen / fontTextLen; for (var i = 0; i < fontTextLen; i++) { var arcL = i * arcPer + arcPer / 2; var ang = 0; for (var p = 0; p < arcLenArr.length - 1; p++) { if (arcLenArr[p] <= arcL && arcL <= arcLenArr[p + 1]) { ang = (arcL >= ((arcLenArr[p] + arcLenArr[p + 1]) /2)) ? angleArr[p + 1] : angleArr[p]; break; } } angR = (ang * Math.PI / 180); var x = radiusX * Math.cos(angR) + radiusX; var y = radiusY * Math.sin(angR) + radiusY; var qxang = Math.atan2(radiusY * Math.cos(angR),-radiusX * Math.sin(angR)); var fxang = qxang + Math.PI / 2; var subIndex = isTop == true ? i : fontTextLen - 1 -i; var c = words[subIndex]; var w = 25; var h = 31; if (!isTop) { w = 2; h = 10; } x += (h * minRat) * Math.cos(fxang); y += (h * minRat) * Math.sin(fxang); if (isTop) { x += -w / 2 * Math.cos(qxang); y += -w / 2 * Math.sin(qxang); } else { x += w / 2 * Math.cos(qxang); y += w / 2 * Math.sin(qxang); } context.save() context.translate(x,y); if (isTop == true) { context.rotate((fxang * 180 / Math.PI - 90) * Math.PI / 180) } else { context.rotate((fxang * 180 / Math.PI + 180 -90)* Math.PI / 180) } context.translate(-x,-y) context.fillStyle = color; context.font = font; context.fillText(c,x,y); context.restore(); } } function writeTitle() { context.fillStyle = color; context.font = '20px SimSun'; context.textAlign = 'center'; context.fillText('合同专用章',radiusX,radiusY+20); context.restore(); } function drawEllipse() { context.ellipse(radiusX + context.lineWidth+1,radiusY + context.lineWidth+1,radiusX,radiusY,0,0,Math.PI*2); //背景透明 context.fillStyle = "rgba(255, 255, 255, 0)"; context.strokeStyle = color; context.lineWidth = 3; context.fill(); context.stroke(); } //返回图片base64 return canvas.toDataURL(); }, /** * 字体换行 * */ wrapText: function (ctx,text, x, y, maxWidth, lineHeight) { if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') { return; } var context = ctx; var canvas = context.canvas; if (typeof maxWidth == 'undefined') { maxWidth = (canvas && canvas.width) || 112; } if (typeof lineHeight == 'undefined') { lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight); } // 字符分隔为数组 var arrText = text.split(''); var line = ''; for (var n = 0; n < arrText.length; n++) { var testLine = line + arrText[n]; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { context.fillText(arrText[0], x, y); context.fillText(arrText[1], x+50, y); line = arrText[n]; y += lineHeight; } else { line = testLine; } } context.fillText(arrText[2], x, y+10); context.fillText(arrText[3], x+50, y+10); } }; //var base64 = FXQ.companySeal('浙江葫芦娃网络集团有限公司',0,0,0,'2018-12-19') //FXQ.companySeal('某某某网络集团有限公司',0,0,0,'1234xyz') var base64 = FXQ.companyEllipse('某某某网络集团有限公司','1234567899876',0,0) //var base64 = FXQ.personal("李易峰",0,0,0,0); //FXQ.personal("赵丽颖",0,0,0,1); //var base64 = FXQ.personal("易烊千玺",1,1,1,0); //FXQ.personal("王源",0,1,1,0); //var base64 = FXQ.personal("李易峰",0,1,1,0); //FXQ.personal("王俊凯",0,1,1,1); document.getElementById('img').src=base64; document.getElementById('img2').src=FXQ.companySeal('浙江葫芦娃网络集团有限公司',0,0,0,'2018-12-19'); document.getElementById('img3').src=FXQ.companySeal('某某某网络集团有限公司',0,0,1,'1234xyz'); document.getElementById('img4').src=FXQ.personal("赵丽颖",0,0,0,0);