var app = angular.module('app', []);
app.controller('mainCtrl',function() {
var vm = this;
vm.value = 'Le Value';
vm.showState = false;
vm.switchToSelectImageState = function() {
vm.showState = !vm.showState;
}
/* Den Dumme Data */
vm.cats = [];
for(var i = 0; i < 5; i++) {
var w = 800 + i,
h = 600 + i;
var cat = '//placekitten.com/g/' + w + '/' + h;
vm.cats.push(cat);
}
for(var i = 0; i < 5; i++) {
var w = 600 + i,
h = 800 + i;
var cat = '//placekitten.com/g/' + w + '/' + h;
vm.cats.push(cat);
}
vm.currentCat = vm.cats[0];
vm.setCat = function(index) {
vm.currentCat = vm.cats[index];
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script src="//rawgithub.com/scottcheng/cropit/master/dist/jquery.cropit.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as view">
<div class="demo-container">
<div image-crop
image-src="view.currentCat"
cropped-img="view.test"
disabled="true"
choose-file="false"
select-file="true"
on-select="view.switchToSelectImageState()"
select-button-classes="a b c"
update-button-text="view.value"
upload-button-text="view.value"
></div>
</div>
<hr>
<h4>Cropped cat:</h4>
<img ng-src="{{view.test}}">
<hr>
<h4>Chosen cat: {{view.currentCat}}</h4>
<hr>
<ul ng-show="view.showState">
<li ng-repeat="cat in view.cats" ng-click="view.setCat($index)">
<img ng-src="{{cat}}">
</li>
</ul>
</div>
<script src="image-crop.provider.js"></script>
<script src="image-crop.factory.js"></script>
<script src="image-crop.directive.js"></script>
</body>
</html>
[image-crop] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
max-width: none;
-webkit-user-drag: none;
user-select: none;
}
}
.image-crop {
position: relative;
width: 100%;
height: 100%;
}
.cropit-image-background {
opacity: 0.2;
}
.image-crop__actions {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.cropit-image-zoom-input {
position: absolute;
bottom: 0;
left: 0;
}
// Hide input-field
input[type="file"].cropit-image-input {
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
opacity: 0;
visibility: hidden;
}
// disabled state
.cropit-disabled .cropit-image-background {
opacity: 0;
}
.demo-container {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
}
(function() {
'use strict';
angular
.module('app')
.directive('imageCrop', imageCrop);
/* @ngInject */
function imageCrop(ImageCropUtils, ImageCropProvider, $timeout, $sce) {
/**
* @ngdoc directive
* @name oompApp.directive:imageCrop
* @description
* # imageCrop
*/
var directive = {
templateUrl: 'image-crop.template.html',
link: link,
restrict: 'EA',
scope: {
exportZoom: '@',
imageSrc: '=',
croppedImg: '=',
onSelect: '&',
selectButtonClasses: '@',
uploadButtonClasses: '@'
}
};
return directive;
function link(scope, element, attrs) {
// Attribute parsing
scope.showChooseFile = (attrs.chooseFile === 'true') ? true : false;
scope.showSelectFile = (attrs.selectFile === 'true') ? true : false;
scope.disabled = (attrs.disabled === 'true') ? true : false;
scope.test = undefined;
// View helpers
scope.showControls = (scope.imageSrc.length > 0) ? true : false;
scope.showExport = false;
// Cached ref to inner element, parent and crop-preview-area
var el = element.first();
var parentEl = element.parent();
var previewEl = el.find('.cropit-image-preview');
console.log(previewEl);
// Set height on cropit items
var cropperHeight = parentEl.outerHeight();
previewEl.height(cropperHeight);
// Private settings, not modifyable
var privateSettings = {
imageBackground: true,
allowCrossOrigin: true,
onFileChange: onFileChange
};
// Public settings, defined on the directive element
var publicSettings = scope.$eval(attrs.imageCrop) || {};
// Merge settings
var settings = angular.extend(publicSettings, privateSettings);
// Init the plugin
el.cropit(settings);
scope.$watch('imageSrc', function(newImage, oldImage) {
if(!newImage) return;
el.cropit('imageSrc', newImage);
});
if(scope.disabled) {
el.cropit('disable');
}
scope.export = function() {
var croppedImage = el.cropit('export', {
type: 'image/png',
originalSize: true,
quality: 1,
fillBg: '#000'
});
scope.croppedImg = croppedImage;
};
scope.enable = function() {
el.cropit('reenable');
scope.disabled = false;
};
scope.disable = function() {
scope.disabled = true;
el.cropit('disable');
scope.export();
};
scope.chooseFile = function($event) {
$event.preventDefault();
var inputField = element[0].querySelector('.cropit-image-input');
inputField.click();
};
function onFileChange() {
scope.disable = false;
scope.$apply();
};
}
};
})();
(function () {
'use strict';
/**
* @ngdoc function
* @name oompApp.factory:ImageCrop
* @description
* # ImageCrop
* Factory of the oompApp
*/
angular
.module('app')
.factory('ImageCropUtils', ImageCrop);
/* @ngInject */
function ImageCrop($q, $http) {
var service = {
createCanvas: createCanvas,
getMinScale: getMinScale,
cut: cut,
loadImageSize: loadImageSize,
getVendor: getVendor
};
return service;
function createCanvas(w, h) {
var canvas;
canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
return canvas;
}
function getMinScale(w, h, resizeW, resizeH) {
var scaleW, scaleH;
scaleW = resizeW / w;
scaleH = resizeH / h;
if(scaleW < scaleH) {
return scaleW;
} else {
return scaleH;
}
}
function cut(image, fromYRate, heightRate, fromXRate, widthRate, resizeW, resizeH) {
//console.log(image)
var currentImageHeight;
var deferred = $q.defer();
var promise = this.loadImageSize(image);
//console.log(promise);
promise.then((function(_this) {
return function(size) {
console.log(
size.width,
size.height,
resizeH,
resizeW,
fromYRate,
fromXRate
);
//console.log(_this, size, image);
//
//var canvas = _this.createCanvas(size.width - (isIos ? 1 : 0), (resizeH / currentImageHeight) * size.height);
//
//var ctx = canvas.getContext('2d');
//
//ctx.drawImage(image, 0, 0, size.width, size.height, 0, parseInt(-fromYRate * size.height), canvas.width, size.height);
//
//document.body.appendChild(canvas);
//
//return deferred.resolve(canvas.toDataURL());
}
})(this));
return deferred.promise;
}
function loadImageSize(image) {
//console.log(image, image.src);
var hiddenElement, hiddenImage;
var deferred = $q.defer();
hiddenElement = document.createElement('div');
//hiddenElement.style.cssText = 'width: 0px; height: 0px; overflow: hidden; opacity: 0;';
hiddenImage = new Image;
hiddenImage.onload = function() {
console.log(hiddenImage.width, hiddenImage.height);
deferred.resolve({
width: hiddenImage.width,
height: hiddenImage.height
});
//return hiddenElement.remove();
};
hiddenElement.appendChild(hiddenImage);
document.body.appendChild(hiddenElement);
hiddenImage.src = image.src;
return deferred.promise;
}
function getVendor() {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1],
dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
return {
dom: dom,
lowercase: pre,
css: '-' + pre + '-',
js: pre[0].toUpperCase() + pre.substr(1)
};
}
};
})();
(function() {
'use strict';
/**
* @ngdoc service
* @name oompApp.imageCrop
* @description
* # imageCrop
* Provider in the oompApp.
*/
angular
.module('app')
.provider('ImageCropProvider', ImageCropProvider)
/* @ngInject */
function ImageCropProvider() {
var event, provider;
event = {};
this.on = function(name, func) {
if(!event[name]) {
event[name] = [];
}
return event[name].push(func);
}
provider = {
emit: function() {
var arg, args, eventQueue, listener, _i, _j, _len, _len1, _results;
args = [];
for (_i = 0, _len = arguments.length; _i < _len; _i++) {
arg = arguments[_i];
args.push(arg);
}
console.log(event, args);
eventQueue = event[args.shift()];
_results = [];
for (_j = 0, _len1 = eventQueue.length; _j < _len1; _j++) {
listener = eventQueue[_j];
_results.push(listener.apply(event, args));
}
return _results;
}
};
this.$get = function() {
return provider;
};
return void 0;
}
})();
<div class="image-crop">
<div class="cropit-image-preview-container">
<div class="cropit-image-preview"></div>
</div>
<input type="range" class="cropit-image-zoom-input" ng-hide="disabled"/>
<div class="image-crop__actions">
<div class="image-crop__upload" ng-if="showChooseFile">
<input type="file" class="cropit-image-input" />
<button class="image-crop__select-file"
ng-class="uploadButtonClasses"
ng-show="showChooseButton"
ng-click="chooseFile($event)">
</button>
</div>
<div class="image-crop__select" ng-if="showSelectFile">
<button ng-class="selectButtonClasses" ng-click="onSelect()">
temp(knap der skal gå til img choose)
</button>
</div>
<button class="image-crop__move-image" ng-show="disabled" ng-click="enable()">temp(knap der skal enable)</button>
<button class="image-crop__approve-image" ng-hide="disabled" ng-click="disable()">temp(knap der skal "gemme/disable")</button>
</div>
</div>