dos

Public/static/css/index.css

@@ -454,7 +454,9 @@ input[name=signature]::-webkit-input-placeholder {
   z-index: 1;
 }
 
-
+.poster-page canvas {
+  width: 32rem;
+}
 
 .poster-tip {
   z-index: 1;

Public/static/js/common.js

@@ -50,8 +50,13 @@ if ($('div').length > 0) {
 
 
 preloadimages(preloadImageList, function () {
-    $('.page1').fadeIn(300);
+    // $('.page1').fadeIn(300);
     // $('.poster-page').fadeIn(300);
+    createPoster();
+    setTimeout(() => {
+        showPosterPage();
+    }, 1000);
+
 
 }, function (progress) {
 
@@ -148,11 +153,11 @@ let decorateList = [
 ];
 
 //用户选择的flag列表
-let flagStack = [];
+let flagStack = flag; //debug
 //用户选择的小装饰src
-let checkedDecorate;
+let checkedDecorate = decorateList[0]; //debug
 //用户署名
-let signature;
+let signature = "张三"; //debug
 //用户选择的色条index
 let colorIndex = 4;
 //用户选择的背景色
@@ -336,10 +341,12 @@ function createPoster() {
 
 
 
-    let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640, posterCanvasHeight, true);
+    let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, posterCanvasHeight * 2, true);
     posterCanvas = canvasinfo[0];
     posterCtx = canvasinfo[1];
 
+    $('#posterCanvas').css('height', pxToRem(posterCanvasHeight));
+
     posterCtx.fillStyle = bgColor;
     posterCtx.fillRect(0, 0, posterCanvas.width, posterCanvas.height);
     //45 107
@@ -347,12 +354,12 @@ function createPoster() {
     topHalf.src = picUrl + "poster-tophalf.png";
     topHalf.onload = function () {
         //画海报上半部分
-        posterCtx.drawImage(topHalf, pxToRem(45), pxToRem(107), pxToRem(550), pxToRem(382));
+        posterCtx.drawImage(topHalf, pxToRem(45 * 2), pxToRem(107 * 2), pxToRem(550 * 2), pxToRem(382 * 2));
         posterCtx.save();
         posterCtx.restore();
         //画海报中部背景
         posterCtx.fillStyle = '#f4f4f4';
-        posterCtx.fillRect(pxToRem(44.5), pxToRem(489), pxToRem(551.5), pxToRem(flagListHeight));
+        posterCtx.fillRect(pxToRem(45 * 2), pxToRem(489 * 2), pxToRem(550 * 2), pxToRem(flagListHeight * 2));
         posterCtx.save();
         posterCtx.restore();
         //画海报底部
@@ -361,17 +368,17 @@ function createPoster() {
         bottomHalf.onload = function () {
             bottomHalfTop = pxToRem(487) + pxToRem(flagListHeight);
             $('.poster-tip').css('top', bottomHalfTop + pxToRem(181));
-            posterCtx.drawImage(bottomHalf, pxToRem(45), bottomHalfTop, pxToRem(550), pxToRem(238));
-            drawFlagItem(pxToRem(489 + 20));
+            posterCtx.drawImage(bottomHalf, pxToRem(45 * 2), bottomHalfTop * 2, pxToRem(550 * 2), pxToRem(238 * 2));
+            // drawFlagItem(pxToRem(489 + 20));
             let decorate = new Image();
             decorate.src = checkedDecorate;
             decorate.onload = function () {
-                posterCtx.drawImage(decorate, pxToRem(170), pxToRem(305), pxToRem(300), pxToRem(150));
-                flagTextDraw(posterCtx, signature, pxToRem(40), '#222222', pxToRem(230), bottomHalfTop + pxToRem(103));
-                flagTextDraw(posterCtx, getTime(), pxToRem(20), '#222222', pxToRem(230), bottomHalfTop + pxToRem(136));
-                setTimeout(function () {
-                    $('.posterImg').attr('src', getManBase64(posterCanvas)).css('height', posterCanvas.height);
-                }, 1000);
+                posterCtx.drawImage(decorate, pxToRem(170 * 2), pxToRem(305 * 2), pxToRem(300 * 2), pxToRem(150 * 2));
+                // flagTextDraw(posterCtx, signature, pxToRem(40), '#222222', pxToRem(230), bottomHalfTop + pxToRem(103));
+                // flagTextDraw(posterCtx, getTime(), pxToRem(20), '#222222', pxToRem(230), bottomHalfTop + pxToRem(136));
+                // setTimeout(function () {
+                //     $('.posterImg').attr('src', getManBase64(posterCanvas)).css('height', posterCanvas.height);
+                // }, 1000);
 
             }
         }