dos

Public/static/css/index.css

@@ -105,5 +105,5 @@ input[name=business] {
 
 
 .poster-canvas {
 .poster-canvas {
   border: 2px solid #fff;
   border: 2px solid #fff;
-  box-shadow: 0px 0px 15px #000;
+  box-shadow: 0px 0px 25px #333;
 }
 }
\ No newline at end of file

Public/static/js/common.js

@@ -59,8 +59,14 @@ let uploadCanvas, uploadCtx;
 let avatar;
 let avatar;
 let nowPosterIndex = '';
 let nowPosterIndex = '';
 let posterCanvas, posterCtx;
 let posterCanvas, posterCtx;
-
-
+let idInfo = {
+    width: 21,
+    height: 22
+};
+let noInfo = {
+    width: 36,
+    height: 19
+}
 
 
 preloadimages(preloadImageList, function () {
 preloadimages(preloadImageList, function () {
     blackUrl = $('.black').css('background-image').replace(/^url\((['"]?)(.*)\1\)$/, '$2');
     blackUrl = $('.black').css('background-image').replace(/^url\((['"]?)(.*)\1\)$/, '$2');
@@ -111,6 +117,8 @@ $(document).ready(function () {
 function checkInfo() {
 function checkInfo() {
     let name = $('input[name=name]').val();
     let name = $('input[name=name]').val();
     let business = $('input[name=business]').val();
     let business = $('input[name=business]').val();
+    name = '张三三';
+    business = '1234567890';
     // if (name.match(/^\s*$/)) {
     // if (name.match(/^\s*$/)) {
     //     $('#notification_area').remove();
     //     $('#notification_area').remove();
     //     my_notify('请填写姓名');
     //     my_notify('请填写姓名');
@@ -148,7 +156,7 @@ function createPoster(name, business) {
         headimgObj.src = getManBase64(uploadCanvas);
         headimgObj.src = getManBase64(uploadCanvas);
         headimgObj.onload = function () {
         headimgObj.onload = function () {
             posterCtx.drawImage(headimgObj, 170, 402, 87, 87);
             posterCtx.drawImage(headimgObj, 170, 402, 87, 87);
-
+            drawUserInfo(name, business, 20, 'bolder');
         }
         }
     }
     }
 }
 }
@@ -279,6 +287,53 @@ function drawImage(ctx, myCanvas, img, imgInfo) {
     ctx.restore();
     ctx.restore();
 }
 }
 
 
+function drawUserInfo(name, business, fontsize, fontweight) {
+    posterCtx.font = fontweight + ' ' + fontsize + 'px normal';
+    let {
+        idX,
+        nameX,
+        noX,
+        businessX
+    } = getX(name, business);
+    let idObj = new Image();
+    idObj.src = '/Public/static/image2/id.png';
+    idObj.onload = function () {
+        posterCtx.drawImage(idObj, idX, 495, idInfo.width, idInfo.height);
+        txtDraw(posterCtx, name, '#fff', nameX, 512);
+        let noObj = new Image();
+        noObj.src = '/Public/static/image2/no.png';
+        noObj.onload = function () {
+            posterCtx.drawImage(noObj, noX, 498, noInfo.width, noInfo.height);
+            txtDraw(posterCtx, business, '#fff', businessX, 512);
+        };
+    };
+}
+
+function getX(name, business) {
+    let nameWidth = posterCtx.measureText(name).width;
+    let businessWidth = posterCtx.measureText(business).width;
+
+    let totalWidth = idInfo.width + 6 + nameWidth + 21 + noInfo.width + 3 + businessWidth;
+
+    let idX = 212 - totalWidth / 2;
+    let nameX = idX + idInfo.width + 6;
+    let noX = nameX + nameWidth + 21;
+    let businessX = noX + noInfo.width + 3;
+
+    return {
+        idX,
+        nameX,
+        noX,
+        businessX
+    };
+}
+
+function txtDraw(ctx, content, color, x, y) {
+    fontsize = fontsize * 2;
+    ctx.fillStyle = color;
+    ctx.fillText(content, x, y);
+}
+
 function getManBase64(canvas) {
 function getManBase64(canvas) {
     return canvas.toDataURL('image/png');
     return canvas.toDataURL('image/png');
 }
 }