dos

Public/static/css/index.css

@@ -38,3 +38,8 @@ input::-webkit-input-placeholder {
 .hd {
   background: rgba(0, 0, 0, 0.8);
 }
+
+#myCanvas {
+  width: 330px;
+  height: 330px;
+}
\ No newline at end of file

Public/static/js/common.js

@@ -44,7 +44,8 @@ if ($('div').length > 0) {
 
 
 
-// var myCanvas;
+var myCanvas;
+var ctx;
 // var username = '';
 
 preloadimages(preloadImageList, function () {
@@ -54,7 +55,7 @@ preloadimages(preloadImageList, function () {
 });
 
 // $('input[name=username]').attr('placeholder','点击输入您的名字');
-// $('.canvas-block').html('<canvas id="myCanvas" width="'+ pxchange(315) +'" height="'+ pxchange(316) +'"></canvas><img class="posterimg" />');
+$('.canvas-block').html('<canvas id="myCanvas" width="'+ 330 +'" height="'+ 330 +'"></canvas>');
 
 $('.page1').show();
 
@@ -68,6 +69,105 @@ $(document).ready(function () {
     $('.logo-bottom').css('top',parseInt(getTranslateDistance($('.wrap').height())) - 50 + 'px'); 
 
     $('.btn-go').on('click',homeBtnGoHandleClick);
+
+    $('[name=upload]').change(function() {
+        imgInfo.rotation = 0;
+        imgInfo.x = 0;
+        imgInfo.y = 0;
+        imgInfo.scale = 1;
+        event.preventDefault();
+        var imgData = this.files[0];
+        EXIF.getData(imgData, function() {
+            //获取旋转信息
+            var orientation = EXIF.getTag(this, "Orientation");
+            switch (orientation) {
+                case 3:
+                    imgInfo.rotation = 180;
+                    break;
+                case 6:
+                    imgInfo.rotation = 90;
+                    break;
+                case 8:
+                    imgInfo.rotation = 270;
+                    break;
+                default:
+                    imgInfo.rotation = 0;
+            }
+            if (navigator.userAgent.indexOf('iPhone') > -1) {
+                imgInfo.rotation = 0;
+            }
+            lrz(imgData, { width: 640 }, function(results) {
+                img = new Image();
+                img.onload = function() {
+                    $('.btn_test').hide();
+                    $('.btn_holder').show();
+                    $('.page_test .picture').css({
+                        'opacity': 0,
+                        '-webkit-animation': 'none',
+                        'animation': 'none',
+                        'z-index': 9
+                    });
+                    drawImage();
+                    results = null;
+                    imgData = null;
+                };
+                img.src = results.base64;
+            });
+        });
+        return false;
+    });
+
+    var mc = new Hammer($('.template1').get(0));
+    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
+    mc.get('pinch').set({ enable: true });
+    mc.get('rotate').set({ enable: true });
+    var oldpoz = {};
+    mc.on('panstart panmove panend', function(event) {
+        if (!img) {
+            return;
+        }
+        if (event.type == 'panstart' || event.type == 'panend') {
+            oldpoz.x = 0;
+            oldpoz.y = 0;
+        } else {
+            var movedX = (event.deltaX - oldpoz.x);
+            var movedY = (event.deltaY - oldpoz.y);
+            oldpoz.x = event.deltaX;
+            oldpoz.y = event.deltaY;
+            //console.log("movedX:" + movedX + ' movedY:' + movedY + 'event.deltaX:' + event.deltaX + ' event.deltaY:' + event.deltaY + "\r\n");
+            imgInfo.x += movedX;
+            imgInfo.y += movedY;
+            drawImage();
+        }
+    });
+    var oldScale = 1;
+    mc.on('pinchstart pinchmove pinchend', function(event) {
+        if (!img) {
+            return;
+        }
+        if (event.type == 'pinchstart' || event.type == 'pinchend') {
+            oldScale = 1;
+        } else {
+            var nowScale = event.scale / oldScale;
+            oldScale = event.scale;
+            imgInfo.scale *= nowScale;
+            drawImage();
+        }
+    });
+    var oldRotation = 0;
+    mc.on('rotatestart rotatemove rotateend', function(event) {
+        if (!img) {
+            return;
+        }
+        if (event.type == 'rotatestart' || event.type == 'rotateend') {
+            oldRotation = 0;
+        } else {
+            nowRotation = event.rotation - oldRotation;
+            oldRotation = event.rotation;
+            imgInfo.rotation += nowRotation;
+            drawImage();
+        }
+    });
 });
 
 function homeBtnGoHandleClick() 
@@ -76,6 +176,17 @@ function homeBtnGoHandleClick()
     $('.btn-tocreate,.copywriting2').delay(200).fadeIn(300);
 }
 
+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();
+}
+
 function checkWord(name,callback) {
     $.ajax({
         url: 'index/checkWord',
@@ -130,8 +241,8 @@ function initCanvas() {
     myCanvas = $('#myCanvas')[0];
     ctx = myCanvas.getContext("2d");
     ctx.scale(2,2);
-    myCanvas.width = 1260;
-    myCanvas.height = 1264;
+    myCanvas.width = 660;
+    myCanvas.height = 660;
 }
 
 function getTranslateDistance(cardinal = 0) {