旋转后的作物图像；使用Javascript、HTML5画布和Hammer mobile_Javascript_Angularjs_Css_Html5 Canvas_Hammer.js

旋转后的作物图像；使用Javascript、HTML5画布和Hammer mobile

javascript angularjs css html5-canvas

旋转后的作物图像；使用Javascript、HTML5画布和Hammer mobile,javascript,angularjs,css,html5-canvas,hammer.js,Javascript,Angularjs,Css,Html5 Canvas,Hammer.js,我正在一个移动angular应用程序中开发一个照片编辑功能，希望能在这个JSBin中获得裁剪功能的帮助。基本上，图像在新的HTML5画布元素上没有正确地转换到它的准确位置 JSBin只是有点功能性，因为我不能包含指向角度手势的链接，所以这里是HTML和相关Javascript。任何帮助都将不胜感激 ------HTML------- <html> <head> <style> canvas { border:1px solid red;

我正在一个移动angular应用程序中开发一个照片编辑功能，希望能在这个JSBin中获得裁剪功能的帮助。基本上，图像在新的HTML5画布元素上没有正确地转换到它的准确位置

JSBin只是有点功能性，因为我不能包含指向角度手势的链接，所以这里是HTML和相关Javascript。任何帮助都将不胜感激

------HTML-------

<html>
<head>
  <style>
    canvas {
      border:1px solid red;
    }

    .polaroid-crop {
      width: 504px;
      height: 385px;
      border: 1px solid $orange;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <p>Canvas (Left) and New clipped PNG (Right)</p>
  <canvas id="canvas" width="504" height="385"></canvas>

  <p>Original Image</p>

 <p><div class="polaroid-crop">
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png" 
        width="400" 
        height="234" 
        ng-style="calcStyle(rotation, scaleFactor, changeY, changeX)"
        hm-tap="handleGesture($event)"
        hm-double-tap="handleGesture($event)"
        hm-hold="handleGesture($event)"
        hm-swipe="handleGesture($event)"
        hm-drag="drag($event)"
        hm-rotate="rotate($event)"
        hm-pinch="pinch($event)">
  </div></p>

  <button ng-click="clipIt()">Click me to clip dragged ones!</button>
</body>
</html>

'use strict';

angular.module('app.activity', [])
    .controller('ActivityCtrl', ['$scope', 'UtilsService', function ($scope, UtilsService) {

    $scope.rotation = 0;
    $scope.scaleFactor = 1;
    $scope.changeX = 0;
    $scope.changeY = 0;
    $scope.negativeChangeX = 0;
    $scope.negativeChangeY = 0;
    $scope.absX = 0;
    $scope.absY = 0;
    $scope.rotationRadian = 0;
    $scope.canvasWidth = 504;
    $scope.canvasHeight = 385;
    $scope.imgWidth = 400;
    $scope.imgHeight = 234;

      $scope.rotate = function(event) {
      console.log('rotation data', event);
        $scope.type = event.type;
        $scope.rotation = event.gesture.rotation % 360;
      $scope.rotationAngle = event.gesture.rotation; // this was not working when it was getting angle instead of rotation
        $scope.changeX = event.gesture.deltaX;
      $scope.changeY = event.gesture.deltaY;
      $scope.negativeChangeX = -(event.gesture.deltaX);
      $scope.negativeChangeY = -(event.gesture.deltaX);
      $scope.absX=Math.abs(event.gesture.deltaX);
      $scope.absY=Math.abs(event.gesture.deltaY);
      event.gesture.preventDefault();
        // event.gesture.stopPropagation();
      };

      $scope.pinch = function(event) {
        if (event.gesture.scale != 1) {
        console.log('what does pinching return');
            $scope.type = event.type;
            $scope.scaleFactor = event.gesture.scale;
        $scope.changeX = event.gesture.deltaX;
        $scope.changeY = event.gesture.deltaY;
        $scope.negativeChangeX = -(event.gesture.deltaX);
        $scope.negativeChangeY = -(event.gesture.deltaX);
        $scope.absX=Math.abs(event.gesture.deltaX);
        $scope.absY=Math.abs(event.gesture.deltaY);
            // event.gesture.preventDefault();
            event.preventDefault();
            // event.stopPropagation();
          }
      };

      $scope.drag = function(event) {
        $scope.type = event.type;
        console.log('deltaX', event.gesture.deltaX, 'and deltaY', event.gesture.deltaY);
        $scope.changeX = event.gesture.deltaX;
        $scope.changeY = event.gesture.deltaY;
      $scope.negativeChangeX = -(event.gesture.deltaX);
      $scope.negativeChangeY = -(event.gesture.deltaY);
      $scope.absX=Math.abs(event.gesture.deltaX);
      $scope.absY=Math.abs(event.gesture.deltaY);
      };

      $scope.type = '--';

    $scope.handleGesture = function($event) {
      console.log('and the event type is', $event.type)
      $scope.type = $event.type;
    };

    // from codedrops html crop example at http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();

    $scope.calcStyle = function (rotation, scaleFactor, changeY, changeX) {
      var style = {};

      style.transform = [
        'rotate(' + rotation + 'deg)',
        'scale(' + scaleFactor + ')',
        'translateY(' + changeY + 'px)',
        'translateX(' + changeX + 'px)'
      ].join(' ');

      return style;
    };

    $scope.clipIt = function () {
      $scope.clipImage(img, $scope.changeX, $scope.changeY, $scope.canvasWidth, $scope.canvasHeight);
    }


    img.crossOrigin = "anonymous";
    img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";

    $scope.clipImage = function(image, clipX, clipY, clipWidth, clipHeight) {
      console.log('clipImage()', arguments, $scope.rotationAngle);
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.save();

      if($scope.rotationAngle) {
        // ctx.translate(0,0); // ps. this kinda worked
        ctx.translate($scope.changeX, $scope.changeY); // moving the origin of the coordinate system to the current rendering context
        ctx.translate($scope.imgWidth/2, $scope.imgHeight/2);

        ctx.rotate(($scope.rotationAngle * (Math.PI / 180)));

        ctx.translate(-$scope.changeX, -$scope.changeY);
        ctx.translate(-$scope.imgWidth/2, -$scope.imgHeight/2);
      }

      if($scope.scaleFactor) {
          ctx.scale($scope.scaleFactor, $scope.scaleFactor);
      }

      ctx.drawImage(
        image,
        -clipX, 
        -clipY,
        clipWidth, 
        clipHeight,
        clipX, 
        clipY, 
        clipWidth, 
        clipHeight
      );

      ctx.restore();
      // var clippedImg = document.getElementById("clipped");
      // clippedImg.src = canvas.toDataURL();
    }

    }]);