dos

Public/static/css/index.css

@@ -48,7 +48,12 @@ input::-webkit-input-placeholder {
   height: 327px;
 }
 
-#headimg {
+#posterCanvas {
+  width: 525px;
+  height: 849px;
+}
+
+#headimg,#poster {
   width: 100%;
   height: 100%;
   position: absolute;

Public/static/js/common.js

@@ -46,8 +46,12 @@ var preloadImageList = [
 
 var uploadCanvas;
 var headimgCanvas;
+var posterCanvas;
+
 var uploadctx;
 var headimgctx;
+var posterctx;
+
 var imgInfo = {};
 var nowTemplate = 1;
 
@@ -60,6 +64,7 @@ preloadimages(preloadImageList, function () {
 $('input[name=customize]').attr('placeholder','输入自定义文字（仅限四个字）').attr('maxlength','4');
 $('.canvas-block').html('<canvas id="uploadCanvas" width="'+ 330 +'" height="'+ 330 +'"></canvas>');
 $('.headimg-canvas-block').html('<canvas id="headimgCanvas" width="'+ 330 +'" height="'+ 330 +'"></canvas><img id="headimg" />');
+$('.poster-canvas-block').html('<canvas id="posterCanvas" width="'+ 525 +'" height="'+ 849 +'"></canvas><img id="poster" />');
 
 $('.page1').show();
 
@@ -81,6 +86,7 @@ $(document).ready(function () {
 
     $('.headimg-page .btn-back').on('click',backToUpload);
 
+    $('.btn-toposter').on('click',creatPoster);
 
     $('[name=btn-tocreate]').change(function() {
         var canvasinfo = initCanvas('#uploadCanvas',660,660);
@@ -188,6 +194,32 @@ $(document).ready(function () {
     });
 });
 
+function creatPoster() {
+    var posterObj = new Image();
+    posterObj.src = '/Public/static/image2/poster.png';
+
+    posterObj.onload = function() {
+        posterctx.drawImage(posterObj,0,0,posterCanvas.width,posterCanvas.height);
+        var headimgObj = new Image();
+        headimgObj.src = getManBase64(uploadCanvas);
+
+        var canvasinfo = initCanvas('#posterCanvas',1050,1698);
+        posterCanvas = canvasinfo[0];
+        posterctx = canvasinfo[1];
+
+        headimgObj.onload = function() {
+            headimgctx.drawImage(headimgObj,51,184,387,387);
+
+            $('#poster').attr('src',getManBase64(posterCanvas));
+
+            $('.upload-page').fadeOut(300);
+            $('.poster-page').fadeIn(300);
+        }
+    }
+
+    
+}
+
 function backToUpload() {
     $('.headimg-page').fadeOut(300);
     $('.upload-page').delay(200).fadeIn(300);