file api methods updated, and example makes the resize based on propo…

…rtions

.gitignore

@@ -0,0 +1 @@
+.DS_Store

example/css/demo.css

@@ -126,9 +126,9 @@ legend {
   margin-bottom: 45px;
 }
 
-.img_container { width: 320px;
-                 height: 300px;
+.img_container { 
                  border: 0px;
                  display:none;
+                 margin:auto;
 
 }

example/index.html

@@ -15,7 +15,7 @@
 <!-- DEMO CUSTOM STYLES -->
 <link rel="stylesheet" href="css/demo.css">
 <!-- HERE IS THE MAGIC ... -->
-<script src="../src/JIC.js" type="text/javascript"></script>
+<script src="js/JIC.js" type="text/javascript"></script>
 <script src="js/demo.js" type="text/javascript"></script>
 
 </head>

example/js/JIC.js

@@ -0,0 +1,83 @@
+/*!
+ * JIC JavaScript Library v1.0
+ * https://github.com/brunobar79/J-I-C/
+ *
+ * Copyright 2012, Bruno Barbieri
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Date: Sat Mar 24 15:11:03 2012 -0200
+ */
+
+
+
+/**
+ * Create the jic object.
+ * @constructor
+ */
+
+var jic = {
+        /**
+         * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
+         * @param {Image} source_img_obj The source Image Object
+         * @param {Integer} quality The output quality of Image Object
+         * @return {Image} result_image_obj The compressed Image Object
+         */
+
+        compress: function(source_img_obj, quality){
+             var cvs = document.createElement('canvas');
+             cvs.width = source_img_obj.naturalWidth;
+             cvs.height = source_img_obj.naturalHeight;
+             var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
+             var newImageData = cvs.toDataURL("image/jpeg", quality);
+             var result_image_obj = new Image();
+             result_image_obj.src = newImageData;
+             return result_image_obj;
+        },
+
+        /**
+         * Receives an Image Object and upload it to the server via ajax
+         * @param {Image} compressed_img_obj The Compressed Image Object
+         * @param {String} The server side url to send the POST request
+         * @return {String} file_input_name The name of the input that the server will receive with the file
+         * @return {String} filename The name of the file that will be sent to the server
+         */
+
+        upload: function(compressed_img_obj, upload_url, file_input_name, filename){
+            var cvs = document.createElement('canvas');
+            cvs.width = compressed_img_obj.naturalWidth;
+            cvs.height = compressed_img_obj.naturalHeight;
+            var ctx = cvs.getContext("2d").drawImage(compressed_img_obj, 0, 0);
+
+            //ADD sendAsBinary compatibilty to older browsers
+            if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
+                XMLHttpRequest.prototype.sendAsBinary = function(string) {
+                    var bytes = Array.prototype.map.call(string, function(c) {
+                        return c.charCodeAt(0) & 0xff;
+                    });
+                    this.send(new Uint8Array(bytes).buffer);
+                };
+            }
+
+
+            var type= 'image/jpeg';
+            var data = cvs.toDataURL(type);
+            data = data.replace('data:' + type + ';base64,', '');
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('POST', upload_url, true);
+            var boundary = 'someboundary';
+
+            xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
+            xhr.sendAsBinary(['--' + boundary, 'Content-Disposition: form-data; name="' + file_input_name + '"; filename="' + filename + '"', 'Content-Type: ' + type, '', atob(data), '--' + boundary + '--'].join('\r\n'));
+
+            xhr.onreadystatechange = function() {
+                if (this.readyState != 4) {
+                   console.log("ERROR uploading image..." + this.responseText);
+                } else {
+                    console.log("IMAGE UPLOADED SUCCESFULLY..."+this.responseText);
+                }
+            };
+
+
+        }
+};

example/js/demo.js

@@ -3,12 +3,14 @@ $(function() {
     //Console logging (html)
     if (!window.console)
         console = {};
+
     var console_out = document.getElementById('console_out');
+
     console.log = function(message) {
         console_out.innerHTML += message + '<br />';
         console_out.scrollTop = console_out.scrollHeight;
     }
-
+	
     //Slider init
     $("#slider-range-min").slider({
         range: "min",
@@ -41,17 +43,25 @@ $(function() {
         var file = e.dataTransfer.files[0], 
         reader = new FileReader();
         reader.onload = function(event) {
-            //console.log(event.target);
-            i = document.getElementById("source_image");
-            i.src = event.target.result;
-            //i.style.width = "320px";
-            //i.style.height = "300px";
-            i.style.display = "block";
-            console.log("Image loaded");
+            var i = document.getElementById("source_image");
+           	 	i.src = event.target.result;
+           	 	i.onload = function(){
+           	 		image_width=$(i).width(),
+	                image_height=$(i).height();
+
+	                if(image_width > image_height){
+	                	i.style.width="320px";
+	                }else{
+	                	i.style.height="300px";
+	                }
+	                i.style.display = "block";
+	                console.log("Image loaded");
+
+           	 	}
+
         };
-        //console.log(file);
-        console.log("Filename:" + file.fileName);
-        console.log("Filesize:" + (parseInt(file.fileSize) / 1024) + " Kb");
+        console.log("Filename:" + file.name);
+        console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");
         console.log("Type:" + file.type);
         reader.readAsDataURL(file);
 
@@ -64,8 +74,6 @@ $(function() {
     //HANDLE COMPRESS BUTTON
     encodeButton.addEventListener('click', function(e) {
 
-
-
         var source_image = document.getElementById('source_image');
         var result_image = document.getElementById('result_image');
         if (source_image.src == "") {
@@ -79,11 +87,24 @@ $(function() {
         console.log("process start...");
         var time_start = new Date().getTime();
 
-        compressed_image_image = jic.compress(source_image,quality);
+        result_image.src = jic.compress(source_image,quality).src;
+
+        result_image.onload = function(){
+        	var image_width=$(result_image).width(),
+            image_height=$(result_image).height();
+
+	        if(image_width > image_height){
+	        	result_image.style.width="320px";
+	        }else{
+	        	result_image.style.height="300px";
+	        }
+	       result_image.style.display = "block";
+
+
+        }
         var duration = new Date().getTime() - time_start;
 
-        result_image.src = compressed_image_image.src;
-        result_image.style.display = "block";
+
 
 
         console.log("process finished...");

src/JIC.js

@@ -29,7 +29,7 @@ var jic = {
              cvs.height = source_img_obj.naturalHeight;
              var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
              var newImageData = cvs.toDataURL("image/jpeg", quality);
-             result_image_obj = new Image();
+             var result_image_obj = new Image();
              result_image_obj.src = newImageData;
              return result_image_obj;
         },