I am working on a photo editing feature in a mobile angular app and would love help with the crop function in this JSBin http://jsbin.com/kofetuxage/1/edit. Basically, the image is not translating correctly to it's accurate position on the new HTML5 canvas element.
The JSBin is only somewhat functional because I cannot include a link to angular-gestures, so here's the HTML & relevant Javascript. Any help would be most appreciated!
------------ 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>
------------ JAVASCRIPT --------------
'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();
}
}]);