diff --git a/bower.json b/bower.json index ab65be3..29479b0 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angularjs-imageupload-directive", "description": "imageupload Directive for AngularJS", - "version": "0.0.0", + "version": "1.2.1", "main": "public/javascripts/imageupload.js", "ignore": [ "**/.*", @@ -10,6 +10,6 @@ "package.json" ], "dependencies": { - "angularjs-unstable": "~1.1.4" + "angular": "~1.4" } } diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index c3c1453..ec68867 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -1,138 +1,161 @@ -angular.module('imageupload', []) - .directive('image', function($q) { - 'use strict' - - var URL = window.URL || window.webkitURL; +function AngularjsImageUploadDirective($q) { + 'use strict'; - var getResizeArea = function () { - var resizeAreaId = 'fileupload-resize-area'; + var URL = window.URL || window.webkitURL; - var resizeArea = document.getElementById(resizeAreaId); + var getResizeArea = function () { + var resizeAreaId = 'fileupload-resize-area'; - if (!resizeArea) { - resizeArea = document.createElement('canvas'); - resizeArea.id = resizeAreaId; - resizeArea.style.visibility = 'hidden'; - document.body.appendChild(resizeArea); - } + var resizeArea = document.getElementById(resizeAreaId); - return resizeArea; + if (!resizeArea) { + resizeArea = document.createElement('canvas'); + resizeArea.id = resizeAreaId; + resizeArea.style.visibility = 'hidden'; + document.body.appendChild(resizeArea); } - var resizeImage = function (origImage, options) { - var maxHeight = options.resizeMaxHeight || 300; - var maxWidth = options.resizeMaxWidth || 250; - var quality = options.resizeQuality || 0.7; - var type = options.resizeType || 'image/jpg'; + return resizeArea; + }; - var canvas = getResizeArea(); + var resizeImage = function (origImage, options) { + var maxHeight = options.resizeMaxHeight || 300; + var maxWidth = options.resizeMaxWidth || 250; + var quality = options.resizeQuality || 0.7; + var type = options.resizeType || 'image/jpg'; - var height = origImage.height; - var width = origImage.width; + var canvas = getResizeArea(); - // calculate the width and height, constraining the proportions - if (width > height) { - if (width > maxWidth) { - height = Math.round(height *= maxWidth / width); - width = maxWidth; - } - } else { - if (height > maxHeight) { - width = Math.round(width *= maxHeight / height); - height = maxHeight; - } - } + var height = origImage.height; + var width = origImage.width; - canvas.width = width; - canvas.height = height; + // calculate the width and height, constraining the proportions *** Edited by Ege + if(height / width < maxHeight / maxWidth) { + width = width * (maxHeight / height); + height = maxHeight; + } else { + height = height * (maxWidth / width); + width = maxWidth; + } - //draw image on canvas - var ctx = canvas.getContext("2d"); - ctx.drawImage(origImage, 0, 0, width, height); + canvas.width = width; + canvas.height = height; - // get the data from canvas as 70% jpg (or specified type). - return canvas.toDataURL(type, quality); - }; + //draw image on canvas + var ctx = canvas.getContext("2d"); + ctx.drawImage(origImage, 0, 0, width, height); - var createImage = function(url, callback) { - var image = new Image(); - image.onload = function() { - callback(image); - }; - image.src = url; - }; + // get the data from canvas as 70% jpg (or specified type). + return canvas.toDataURL(type, quality); + }; - var fileToDataURL = function (file) { - var deferred = $q.defer(); - var reader = new FileReader(); - reader.onload = function (e) { - deferred.resolve(e.target.result); - }; - reader.readAsDataURL(file); - return deferred.promise; + var createImage = function(url, callback) { + var image = new Image(); + image.onload = function() { + callback(image); }; + image.src = url; + }; + + var fileToDataURL = function (file) { + var deferred = $q.defer(); + var reader = new FileReader(); + reader.onload = function (e) { + deferred.resolve({ + data: e.target.result, + file: file + }); + }; + reader.readAsDataURL(file); + return deferred.promise; + }; + + + return { + restrict: 'A', + scope: { + image: '=', + resizeMaxHeight: '@?', + resizeMaxWidth: '@?', + resizeQuality: '@?', + resizeType: '@?', + }, + link: function postLink(scope, element, attrs, ctrl) { + + var files, + imageResults = []; + + var doResizing = function(imageResult, callback) { + createImage(imageResult.url, function(image) { + var dataURL = resizeImage(image, scope); + imageResult.resized = { + dataURL: dataURL, + type: dataURL.match(/:(.+\/.+);/)[1], + }; + callback(imageResult); + }); + }; + var applyScope = function(imageResults) { + if(attrs.multiple) { + for(var i in imageResults) { + scope.image.push(imageResults[i]); + } + } + else { + scope.image = imageResults[0]; + } + }; - return { - restrict: 'A', - scope: { - image: '=', - resizeMaxHeight: '@?', - resizeMaxWidth: '@?', - resizeQuality: '@?', - resizeType: '@?', - }, - link: function postLink(scope, element, attrs, ctrl) { - - var doResizing = function(imageResult, callback) { - createImage(imageResult.url, function(image) { - var dataURL = resizeImage(image, scope); - imageResult.resized = { - dataURL: dataURL, - type: dataURL.match(/:(.+\/.+);/)[1], - }; - callback(imageResult); - }); + var createResultObject = function (object) { + var file = object.file; + var dataURL = object.data; + var imageResult = { + file: file, + url: URL.createObjectURL(file), + dataURL: dataURL }; - var applyScope = function(imageResult) { - scope.$apply(function() { - //console.log(imageResult); - if(attrs.multiple) - scope.image.push(imageResult); - else - scope.image = imageResult; + if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image + doResizing(imageResult, function(imageResult) { + addToImageResults(imageResult); }); - }; + } + else { //no resizing + addToImageResults(imageResult); + } + }; + var addToImageResults = function(imageResult) { + imageResults.push(imageResult); + if(imageResults.length === files.length) { + applyScope(imageResults); + imageResults = []; + } + }; - element.bind('change', function (evt) { - //when multiple always return an array of images - if(attrs.multiple) - scope.image = []; - - var files = evt.target.files; - for(var i = 0; i < files.length; i++) { - //create a result object for each file in files - var imageResult = { - file: files[i], - url: URL.createObjectURL(files[i]) - }; - - fileToDataURL(files[i]).then(function (dataURL) { - imageResult.dataURL = dataURL; - }); - - if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image - doResizing(imageResult, function(imageResult) { - applyScope(imageResult); - }); - } - else { //no resizing - applyScope(imageResult); - } - } - }); - } - }; - }); + element.bind('change', function (evt) { + //when multiple always return an array of images + if(attrs.multiple) + scope.image = []; + + files = evt.target.files; + + var imageResults = []; + + for(var i = 0; i < files.length; i++) { + //create a result object for each file in files + + fileToDataURL(files[i]).then(createResultObject); + } + }); + } + }; +} + +AngularjsImageUploadDirective.$inject = [ + '$q' +]; + +angular.module('imageupload', []) + .directive('image', AngularjsImageUploadDirective);