add poster

Public/static/js/common.js

@@ -321,79 +321,54 @@ function createPoster() {
 
     photo.onload = function () {
         posterCtx.drawImage(photo, 0, 0, posterCanvas.width, posterCanvas.height);
-        var logoObj = new Image();
-        logoObj.src = '/Public/static/image2/logo.png?v=1';
-        logoObj.onload = function () {
-            // txtDraw(posterCtx, username, '#464646', 215 * 2, 360 * 2, 45 * 2, 'bolder');
-            // txtDraw(posterCtx, '中信保诚人寿', '#464646', 215 * 2, 390 * 2, 20 * 2);
-            // txtDraw(posterCtx, company + '', '#464646', 215 * 2, 413 * 2, 20 * 2);
+        var posterMask = new Image();
+        posterMask.src = '/Public/static/image2/poster-' + level + '.png?version=2'
+        posterMask.onload = function () {
 
-            // txtDraw(posterCtx, company + '', '#ffffff', 215 * 2, 308 * 2, 20 * 2);
+            setTimeout(function () {
+                posterCtx.drawImage(posterMask, 0, 0, 640 * 2, 1238 * 2);
+                    drawVerticalText(posterCtx, username, '#595857',30 * 2, 82 * 2, 302 * 2, true);
+                    drawVerticalText(posterCtx, company, '#595857',30 * 2, 82 * 2, 443 * 2, true);
 
+                    $('#notification_area').remove();
+                    $('.upload-page').hide();
+                    $('.poster-page').show();
 
-            setTimeout(function () {
-                posterCtx.drawImage(logoObj, 42 * 2, 41 * 2, 143 * 2, 55 * 2);
-                var posterBottomObj = new Image();
-                posterBottomObj.src = '/Public/static/image2/poster-' + level + '.png?version=2';
-                posterBottomObj.onload = function () {
-                    posterCtx.drawImage(posterBottomObj, 0, (canvasHeight - 536) * 2, posterCanvas.width, 536 * 2);
-                    setTimeout(function () {
-                        txtDraw(posterCtx, username, '#ffffff', 320 * 2, (canvasHeight - 536 + 182) * 2, 45 * 2, 'bolder');
-                        txtDraw(posterCtx, '中信保诚人寿  ' + company, '#ffffff', 320 * 2, (canvasHeight - 536 + 216) * 2, 20 * 2);
-
-                        $('#notification_area').remove();
-                        $('.upload-page').hide();
-                        $('.poster-page').show();
-
-                        $('.show-img').append('<img class="showimg" />');
-                        $('.showimg').attr('src', getManBase64(uploadCanvas));
-
-                        $('.poster-img').append('<img class="posterimg" />');
-                        $('.posterimg').attr('src', getManBase64(posterCanvas));
-
-                        $('.bottom').hide();
-                        $('.bottom' + level).show();
-                    }, 200)
-                }
+                    $('.poster-img').append('<img class="posterimg" />');
+                    $('.posterimg').attr('src', getManBase64(posterCanvas));
             }, 500);
         }
     }
+}
 
+function drawVerticalText(ctx, text, color, fontSize, x, y, isBold) {
+    ctx.save(); // 保存当前状态
+
+    // 设置字体样式，判断是否加粗
+    let fontWeight = isBold ? 'bold' : 'normal';
+    ctx.font = `${fontWeight} ${fontSize}px sans-serif`; // 设置字体大小和粗细
+    ctx.fillStyle = color; // 设置字体颜色
+    ctx.textBaseline = 'middle'; // 设置基准线为中间
+    ctx.textAlign = 'center'; // 设置文本对齐为居中
+    ctx.lineWidth = 2; // 设置描边宽度
+    ctx.strokeStyle = 'white'; // 设置描边颜色
+
+    // 计算每个字符的高度总和
+    let totalHeight = fontSize * text.length;
+
+    // 计算起始y坐标，以垂直居中
+    let startY = y - totalHeight / 2 + fontSize / 2;
+
+    // 循环绘制每个字符
+    for (let i = 0; i < text.length; i++) {
+        // 绘制白色描边
+        ctx.strokeText(text[i], x, startY + i * fontSize);
+        // 绘制文字
+        ctx.fillText(text[i], x, startY + i * fontSize);
+    }
 
-    // var posterObj = new Image();
-    // posterObj.src = '/Public/static/image2/poster' + level + '.jpg';
-    // posterObj.onload = function () {
-    //     posterCtx.drawImage(posterObj, 0, 0, posterCanvas.width, posterCanvas.height);
-    //     $('#notification_area').remove();
-    //     $('.upload-page').hide();
-    //     $('.poster-page').show();
-    //     // var headimgObj = new Image();
-    //     // headimgObj.src = getManBase64(uploadCanvas);
-    //     // headimgObj.onload = function () {
-    //     //     posterCtx.beginPath();
-    //     //     posterCtx.arc(214 * 2, 446 * 2, 46 * 2, 0, 2 * Math.PI);
-    //     //     posterCtx.fillStyle = "#fff"; //填充颜色,默认是黑色
-    //     //     posterCtx.fill(); //画实心圆
-    //     //     posterCtx.closePath();
-    //     //     posterCtx.drawImage(headimgObj, 170 * 2, 402 * 2, 88 * 2, 88 * 2);
-    //     //     drawUserInfo(name, business, 20, 'bolder');
-    //     //     setTimeout(function () {
-    //     //         drawNum();
-    //     //     }, 200);
-    //     //     setTimeout(function () {
-    //     //         $('.poster-canvas .posterimg').remove();
-    //     //         $('.poster-canvas').append('<img class="posterimg" />');
-    //     //         $('.posterimg').attr('src', getManBase64(posterCanvas));
-    //     //         $('.page1').hide();
-    //     //         $('.poster-page').show();
-    //     //         $('#notification_area').remove();
-    //     //         createPosterLock = false;
-    //     //     }, 500);
-
-    //     // }
-    // }
+    ctx.restore(); // 恢复之前的状态
 }
-
 function confirmAvatar() {
     $('.regulate-block').hide();
 }