dos

Application/Home/View/default/layout.tpl

@@ -124,6 +124,8 @@
     </script>
     </script>
     <script src="__CDN__/js/jquery-2.1.3.min.js"></script>
     <script src="__CDN__/js/jquery-2.1.3.min.js"></script>
     <script src="__CDN__/js/jquery-notify.min.js"></script>
     <script src="__CDN__/js/jquery-notify.min.js"></script>
+    <script src="__CDN__/js/hammer.min.js"></script>
+    <script src="__CDN__/js/lrz.mobile.min.js"></script>
 
 
     {:block name='js'}{:/block}
     {:block name='js'}{:/block}
     <script>
     <script>

Public/static/css/index.css

@@ -90,6 +90,8 @@ input[name=business] {
   font-size: 28px;
   font-size: 28px;
   color: #fff;
   color: #fff;
   text-align: center;
   text-align: center;
+  line-height: 40px;
+  letter-spacing: 2px;
 }
 }
 
 
 .page1 .num .numbig {
 .page1 .num .numbig {

Public/static/js/common.js

@@ -47,6 +47,12 @@ $('.page1').show();
 $('input[name=name]').attr('placeholder', '姓名');
 $('input[name=name]').attr('placeholder', '姓名');
 $('input[name=business]').attr('placeholder', '业务号');
 $('input[name=business]').attr('placeholder', '业务号');
 $('.page1 .num').html('已有 <span class="numbig">' + window.num + '</span> 人发起承诺');
 $('.page1 .num').html('已有 <span class="numbig">' + window.num + '</span> 人发起承诺');
+//上传canvas定义
+let canvasinfo = initCanvas('.upload-canvas', 'uploadCanvas', 257, 257, true),
+    uploadCanvas = canvasinfo[0],
+    uploadCtx = canvasinfo[1];
+
+let imgInfo = {};
 preloadimages(preloadImageList, function () {}, function (progress) {});
 preloadimages(preloadImageList, function () {}, function (progress) {});
 
 
 $(document).ready(function () {
 $(document).ready(function () {
@@ -64,10 +70,136 @@ $(document).ready(function () {
             musicStatus = false;
             musicStatus = false;
         }
         }
     });
     });
-    ``
+    $('input[name=btn-upload]').change(function () {
+        $('.regulate-block').show();
+        bindUpload(this, uploadCtx, uploadCanvas, 1, function () {
+            var mc = new Hammer($('#headCanvas1').get(0));
+            bindMc(mc, uploadCtx, uploadCanvas, headimg[1], imgInfo1);
+        }, imgInfo1);
+        return false;
+    });
 
 
 });
 });
 
 
+function bindMc(mc, ctx, myCanvas, img, imgInfo) {
+    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) {
+        event.preventDefault();
+        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(ctx, myCanvas, img, imgInfo);
+        }
+    });
+    var oldScale = 1;
+    mc.on('pinchstart pinchmove pinchend', function (event) {
+        event.preventDefault();
+        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(ctx, myCanvas, img, imgInfo);
+        }
+    });
+    var oldRotation = 0;
+    mc.on('rotatestart rotatemove rotateend', function (event) {
+        event.preventDefault();
+        if (!img) {
+            return;
+        }
+        if (event.type == 'rotatestart' || event.type == 'rotateend') {
+            oldRotation = 0;
+        } else {
+            nowRotation = event.rotation - oldRotation;
+            oldRotation = event.rotation;
+            imgInfo.rotation += nowRotation;
+            drawImage(ctx, myCanvas, img, imgInfo);
+        }
+    });
+}
+
+function bindUpload(that, ctx, myCanvas, index, callback, imgInfo) {
+    imgInfo.rotation = 0;
+    imgInfo.x = 0;
+    imgInfo.y = 0;
+    imgInfo.scale = 1;
+    event.preventDefault();
+    var imgData = that.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 () {
+                drawImage(ctx, myCanvas, img, imgInfo);
+                results = null;
+                imgData = null;
+            };
+            img.src = results.base64;
+            console.log(img.src);
+            // headimg[index] = img;
+            callback();
+        });
+    });
+}
+
+
+var drawImage = function (ctx, myCanvas, img, imgInfo) {
+    ctx.save();
+    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
+    ctx.drawImage(black, 0, 0);
+    ctx.globalCompositeOperation = 'source-in';
+    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 getTranslateDistance(cardinal = 0, abs = false) {
 function getTranslateDistance(cardinal = 0, abs = false) {
     var wrapInnerTransform = $('.wrap-inner').css('transform');
     var wrapInnerTransform = $('.wrap-inner').css('transform');
     var wrapInnertop = parseFloat($('.wrap-inner').css('top'));
     var wrapInnertop = parseFloat($('.wrap-inner').css('top'));