Merge pull request #4 from cellofellow/master

Removed canvas-to-blob.js dependency. Uses data URLs only.

README.md

@@ -30,15 +30,14 @@ The image object has the following properties:
     resize-max-width="250"
     resize-quality="0.7" />
 Original <img ng-show="image2" ng-src="{{image2.url}}" type="{{image2.file.type}}" />
-Resized <img ng-show="image2" ng-src="{{image2.resized.url}}" type="{{image2.resized.blob.type}}" />
+Resized <img ng-show="image2" ng-src="{{image2.resized.url}}" />
 ```
 
 The image object has the following properties:
 
 - file
 - url
 - resized
-    - blob
     - url
 
 ### Multiple images with resizing
@@ -50,15 +49,14 @@ The image object has the following properties:
     resize-max-width="250"
     resize-quality="0.7" />
 Originals <img ng-repeat="img in images" ng-src="{{img.url}}" type="{{img.file.type}}" />
-Resized <img ng-repeat="img in images" ng-src="{{img.resized.url}}" type="{{img.resized.blob.type}}" />
+Resized <img ng-repeat="img in images" ng-src="{{img.resized.url}}" />
 ```
 
 When used with multiple the image object is always an array of objects with the following properties:
 
 - file
 - url
 - resized
-    - blob
     - url
 
 See [demo.html](demo.html) for more concrete examples.
@@ -74,7 +72,7 @@ See [demo.html](demo.html) for more concrete examples.
 
 - Upload Image with FileReader
 - Resize Image via canvas
-- Send Image Blob with FormData and $http
+- Send Image Data URL (base64) to whatever you want.
 
 ## How to run the Demo?
 
@@ -90,7 +88,6 @@ open http://localhost:8080
 ## Depends on
 
 - angular-1.1.4
-- [blueimp/JavaScript-Canvas-to-Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob)
 
 ## Tested in following browsers:
 
@@ -103,5 +100,4 @@ Testimage: 4320x3240 4.22 MB, Resized (70% jpg): 320x270
 
 ## Known Issues
 
-- Firefox 18 (Windows 8) / BUG: filename gets lost and file is just called "blob", working on that...
 - filesize can vary from Browser to Browser.

public/javascripts/imageupload.js

@@ -1,9 +1,9 @@
 angular.module('imageupload', [])
-    .directive('image', function() {
+    .directive('image', function($q) {
         'use strict'
-        
+
         var URL = window.URL || window.webkitURL;
-            
+
         var getResizeArea = function () {
             var resizeAreaId = 'fileupload-resize-area';
 
@@ -19,13 +19,14 @@ angular.module('imageupload', [])
             return resizeArea;
         }
 
-        var resizeImage = function (origImage, options, callback) {
+        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 canvas = getResizeArea();
-            
+
             var height = origImage.height;
             var width = origImage.width;
 
@@ -49,8 +50,8 @@ angular.module('imageupload', [])
             var ctx = canvas.getContext("2d");
             ctx.drawImage(origImage, 0, 0, width, height);
 
-            // get the data from canvas as 70% jpg
-            canvas.toBlob(callback, "image/jpeg", quality);
+            // get the data from canvas as 70% jpg (or specified type).
+            return canvas.toDataURL(type, quality);
         };
 
         var createImage = function(url, callback) {
@@ -61,30 +62,39 @@ angular.module('imageupload', [])
             image.src = url;
         };
 
+        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;
+        };
+
 
         return {
             restrict: 'A',
             scope: {
                 image: '=',
-
                 resizeMaxHeight: '@?',
                 resizeMaxWidth: '@?',
-                resizeQuality: '@?'
+                resizeQuality: '@?',
+                resizeType: '@?',
             },
             link: function postLink(scope, element, attrs, ctrl) {
 
                 var doResizing = function(imageResult, callback) {
                     createImage(imageResult.url, function(image) {
-                        resizeImage(image, scope, function (resizedImageBlob) {
-                            imageResult.resized = {
-                                blob: resizedImageBlob,
-                                url: URL.createObjectURL(resizedImageBlob)
-                            };
-                            callback(imageResult);
-                        });
+                        var dataURL = resizeImage(image, scope);
+                        imageResult.resized = {
+                            dataURL: dataURL,
+                            type: dataURL.match(/:(.+\/.+);/)[1],
+                        };
+                        callback(imageResult);
                     });
                 };
-                
+
                 var applyScope = function(imageResult) {
                     scope.$apply(function() {
                         //console.log(imageResult);
@@ -95,7 +105,7 @@ angular.module('imageupload', [])
                     });
                 };
 
-                
+
                 element.bind('change', function (evt) {
                     //when multiple always return an array of images
                     if(attrs.multiple)
@@ -108,7 +118,11 @@ angular.module('imageupload', [])
                             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);