dos

Public/static/js/common.js

@@ -56,14 +56,7 @@ let uploadCanvas, uploadCtx;
 let avatar;
 let nowPosterIndex = '';
 let posterCanvas, posterCtx;
-let idInfo = {
-    width: 15,
-    height: 16
-};
-let noInfo = {
-    width: 24,
-    height: 12
-}
+let canvasHeight = 0;
 
 
 let createPosterLock = false;
@@ -213,6 +206,9 @@ function setShare() {
 
 function initPage() {
     const displacement = parseFloat(getTranslateDistance());
+    const wrapHeight = parseFloat($('.wrap').css('height'));
+    canvasHeight = wrapHeight - displacement;
+    $('.upload-canvas-block,.poster-img,.show-img,.poster-canvas').css('height', wrapHeight + 'px').css('top', wrapHeight - displacement + 'px');
     if (-displacement + 179 > 243) {
 
         $('.upload-page .logo').css('top', -displacement + 183 + 'px');
@@ -234,43 +230,6 @@ function initPage() {
             bottom: -displacement - 5 + 'px'
         });
     }
-    // const headerHeight = 313;
-    // const logoHeight = parseFloat($('.logo').css('height'));
-    // const inputHeight = parseFloat($('.input-wrapper').css('height'));
-    // const transformTop = parseFloat(getTranslateDistance());
-    // let inputBottomSpacing;
-
-    // let spacing = (headerHeight - transformTop - logoHeight - inputHeight) / 3;
-    // if (spacing > 35) {
-    //     inputBottomSpacing = 35;
-    // } else {
-    //     inputBottomSpacing = 26.5;
-    // }
-    // spacing = (headerHeight - transformTop - logoHeight - inputHeight - inputBottomSpacing) / 2;
-    // $('.logo').css('top', transformTop + spacing + 'px');
-    // $('.input-wrapper').css('top', transformTop + (spacing * 2 + logoHeight) + 'px');
-
-
-    // const bottomHeight = 418;
-    // const numHeight = parseFloat($('.num').css('height'));
-    // const btnHeight = parseFloat($('.btn-go').css('height'));
-    // const textHeight = parseFloat($('.bottom').css('height'));
-
-    // spacing = (bottomHeight - numHeight - btnHeight - textHeight - transformTop) / 4;
-
-    // $('.bottom').css({
-    //     top: 'auto',
-    //     bottom: spacing + transformTop + 'px'
-    // });
-
-    // $('.btn-go').css({
-    //     top: 'auto',
-    //     bottom: spacing * 2 + textHeight + transformTop + 'px'
-    // });
-    // $('.num').css({
-    //     top: 'auto',
-    //     bottom: spacing * 3 + textHeight + btnHeight + transformTop + 'px'
-    // });
 }
 
 function changePoster() {
@@ -331,7 +290,7 @@ function createPoster() {
 
     $('.poster-canvas canvas').remove();
 
-    let canvasinfo = initCanvas('.poster-canvas', 'posterCanvas', 640 * 2, 1238 * 2);
+    let canvasinfo = initCanvas('.poster-canvas', 'posterCanvas', 640 * 2, canvasHeight * 2);
     posterCanvas = canvasinfo[0];
     posterCtx = canvasinfo[1];
 
@@ -343,23 +302,28 @@ function createPoster() {
 
     photo.onload = function () {
         posterCtx.drawImage(photo, 0, 0, posterCanvas.width, posterCanvas.height);
-        var posterObj = new Image();
-        posterObj.src = '/Public/static/image2/poster' + level + '.png?version=1.0.0';
-        posterObj.onload = function () {
+        var posterTopObj = new Image();
+        posterTopObj.src = '/Public/static/image2/poster' + level + '-1.png?version=1.0.0';
+        posterTopObj.onload = function () {
             txtDraw(posterCtx, username, '#fff', 598 * 2, 347 * 2, 45 * 2, 'bolder');
             txtDraw(posterCtx, '中信保诚人寿', '#fff', 598 * 2, 381 * 2, 20 * 2);
             txtDraw(posterCtx, company + '分公司', '#fff', 598 * 2, 407 * 2, 20 * 2);
             setTimeout(function () {
-                posterCtx.drawImage(posterObj, 0, 0, posterCanvas.width, posterCanvas.height);
-                $('#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));
+                posterCtx.drawImage(posterTopObj, 0, 0, posterCanvas.width, 153 * 2);
+                var posterBottomObj = new Image();
+                posterBottomObj.src = '/Public/static/image2/poster' + level + '-2.png?version=1.0.0';
+                posterBottomObj.onload = function () {
+                    posterCtx.drawImage(posterTopObj, 0, 0, posterCanvas.width, (canvasHeight - 281) * 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));
+                }
             }, 500);
         }
     }