dos

Public/static/js/common.js

@@ -31,33 +31,35 @@ var picUrl = window.base_resource_url + '/images/';
 
 var preloadImageList = [
     // picUrl + 'share.png',
-];
-if ($('div').length > 0) {
-    $.each($('div'), function (index, val) {
-        var img = $(val).css('background-image').replace(/^url\((['"]?)(.*)\1\)$/, '$2');
-        img = $.trim(img);
-        if (img && img.match(/[^/]+(jpg|png|gif)$/)) {
-            preloadImageList.push(img);
-        }
-    });
-}
+    ];
+    if ($('div').length > 0) {
+        $.each($('div'), function (index, val) {
+            var img = $(val).css('background-image').replace(/^url\((['"]?)(.*)\1\)$/, '$2');
+            img = $.trim(img);
+            if (img && img.match(/[^/]+(jpg|png|gif)$/)) {
+                preloadImageList.push(img);
+            }
+        });
+    }
 
 
 
-var myCanvas;
-var ctx;
+var uploadCanvas;
+var headimgCanvas;
+var uploadctx;
+var headimgctx;
 var imgInfo = {};
 var nowTemplate = 1;
-// var username = '';
 
 preloadimages(preloadImageList, function () {
-    
+
 }, function (progress) {
-    
+
 });
 
 $('input[name=customize]').attr('placeholder','输入自定义文字（仅限四个字）').attr('maxlength','4');
-$('.canvas-block').html('<canvas id="myCanvas" width="'+ 330 +'" height="'+ 330 +'"></canvas>');
+$('.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" />');
 
 $('.page1').show();
 
@@ -75,8 +77,12 @@ $(document).ready(function () {
     $('.btn-slideleft').on('click',slidePrevTemplate);
     $('.btn-slideright').on('click',slideNextTemplate);
 
+    $('.btn-toheadimg').on('click',createHeadimg);
+
     $('[name=btn-tocreate]').change(function() {
-        initCanvas();
+        var canvasinfo = initCanvas('#uploadCanvas',660,660);
+        uploadCanvas = canvasinfo[0];
+        uploadctx = canvasinfo[1];
         imgInfo.rotation = 0;
         imgInfo.x = 0;
         imgInfo.y = 0;
@@ -88,16 +94,16 @@ $(document).ready(function () {
             var orientation = EXIF.getTag(this, "Orientation");
             switch (orientation) {
                 case 3:
-                    imgInfo.rotation = 180;
-                    break;
+                imgInfo.rotation = 180;
+                break;
                 case 6:
-                    imgInfo.rotation = 90;
-                    break;
+                imgInfo.rotation = 90;
+                break;
                 case 8:
-                    imgInfo.rotation = 270;
-                    break;
+                imgInfo.rotation = 270;
+                break;
                 default:
-                    imgInfo.rotation = 0;
+                imgInfo.rotation = 0;
             }
             if (navigator.userAgent.indexOf('iPhone') > -1) {
                 imgInfo.rotation = 0;
@@ -179,6 +185,26 @@ $(document).ready(function () {
     });
 });
 
+function createHeadimg() {
+    var headimgObj = new Image();
+    headimgObj.src = getManBase64(uploadCanvas);
+
+    var canvasinfo = initCanvas('#headimgCanvas',660,660);
+    headimgCanvas = canvasinfo[0];
+    headimgctx = canvasinfo[1];
+
+    headimgObj.onload = function() {
+        headimgctx.drawImage(headimgObj,0,0);
+
+        var frameimg = new Image();
+        frameimg.src = '/Public/static/image2/frame' + nowTemplate + '.png';
+
+        frameimg.onload = function() {
+            headimgctx.drawImage('frameimg',0,0);
+        }
+    }
+}
+
 function homeBtnGoHandleClick() 
 {
     $('.subtitle,.copywriting1,.btn-go').fadeOut(300);
@@ -210,14 +236,14 @@ function slideNextTemplate() {
 }
 
 function drawImage() {
-    ctx.save();
-    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
-    ctx.translate(myCanvas.width / 2, myCanvas.height / 2);
-    ctx.translate(imgInfo.x, imgInfo.y);
-    ctx.rotate(Math.PI / 180 * imgInfo.rotation);
-    ctx.scale(imgInfo.scale, imgInfo.scale);
-    ctx.drawImage(img, -img.width / 2, -img.height / 2);
-    ctx.restore();
+    uploadctx.save();
+    uploadctx.clearRect(0, 0, uploadCanvas.width, uploadCanvas.height);
+    uploadctx.translate(uploadCanvas.width / 2, uploadCanvas.height / 2);
+    uploadctx.translate(imgInfo.x, imgInfo.y);
+    uploadctx.rotate(Math.PI / 180 * imgInfo.rotation);
+    uploadctx.scale(imgInfo.scale, imgInfo.scale);
+    uploadctx.drawImage(img, -img.width / 2, -img.height / 2);
+    uploadctx.restore();
 }
 
 function checkWord(name,callback) {
@@ -240,8 +266,8 @@ function checkWord(name,callback) {
     })
 }
 
-function getManBase64() {
-    return myCanvas.toDataURL('image/png');
+function getManBase64(canvas) {
+    return canvas.toDataURL('image/png');
 }
 
 function initGame() {
@@ -276,12 +302,13 @@ function txtDraw(ctx, content, x, y, fontsize, fontweight, color) {
     // }
 }
 
-function initCanvas() {
-    myCanvas = $('#myCanvas')[0];
-    ctx = myCanvas.getContext("2d");
+function initCanvas(id,canvasWidth,canvasHeight) {
+    canvas = $(id)[0];
+    ctx = canvas.getContext("2d");
     ctx.scale(2,2);
-    myCanvas.width = 660;
-    myCanvas.height = 660;
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    return [canvas, ctx];
 }
 
 function getTranslateDistance(cardinal = 0) {