Updated the drag-drop and Invert Filter.

Also added rotate buttons and implemented their funcionality.
tborisova · Nov 25, 2012 · ee29bdd · ee29bdd
1 parent 8c92dc6
commit ee29bdd
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 1 deletion.
diff --git a/KGM/Thumbs.db b/KGM/Thumbs.db
diff --git a/KGM/dragdrop.html b/KGM/dragdrop.html
@@ -19,7 +19,7 @@
 
 <table align="center" style="width:auto; height: auto;">
     <tr><td style="height: 700px;">
-    <img id="imgBG" src="1.jpg" style="border:21px solid;"/>
+    <img id="imgBG" src="dropHere.png" style="border:21px solid;"/>
     </td></tr>
 
 <tr><td>

diff --git a/KGM/new.html b/KGM/new.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title></title>
+</head>
+<body>
+
+    <script type="text/javascript" src="pixastic.core.js"></script>
+    <script type="text/javascript" src="brightness.js"></script>
+    <script type="text/javascript" src="invert.js"></script>
+    <script type="text/javascript" src="blur.js"></script>
+    <script type="text/javascript" src="glow.js"></script>
+
+    <div id="mainDiv">
+        <img  id="imgBG" src="dropHere.png" onclick="save()" style=" border:1px solid #000"/>
+
+    </div>
+    <div>
+        <img src="rotate_cw.png" onclick="RotatePlus()"/>
+        <img src="rotate_ccw.png" onclick="RotateMinus()"/>
+    </div>
+        <script>
+        var dropbox = document.getElementById('imgBG');
+        var mainDiv = document.getElementById('mainDiv');
+        var Filters = {};
+        arr = [];
+
+        //dropbox.style.height = "500px";
+        // Setup drag and drop handlers. 
+        dropbox.addEventListener('dragenter', stopDefault, false);
+        dropbox.addEventListener('dragover', stopDefault, false);
+        dropbox.addEventListener('dragleave', stopDefault, false);
+        dropbox.addEventListener('drop', onDrop, false);
+
+        function stopDefault(e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+
+        function onDrop(e) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            var readFileSize = 0;
+            var files = e.dataTransfer.files;
+
+
+            file = files[0];
+            readFileSize += file.fileSize;
+
+
+            // Only process image files. 
+            var imageType = /image.*/;
+
+            if (!file.type.match(imageType)) {
+                return;
+            }
+
+
+            var reader = new FileReader();
+
+
+            reader.onerror = function (e) {
+                alert('Error code: ' + e.target.error);
+            };
+
+
+            // Create a closure to capture the file information. 
+            reader.onload = (function (aFile) {
+                return function (evt) {
+                    dropbox.src = evt.target.result;
+                    dropbox.style.height = "300px";
+                    Filters.dropbox = dropbox;
+                    Generate();                  
+                }
+            })(file);
+
+            // Read in the image file as a data url. 
+            reader.readAsDataURL(file);
+
+        }
+
+        function Generate() {
+            Invert();
+        }
+
+        function Invert() {
+            var res = '<img  id="imgInvert" src="' + dropbox.src + '" />';
+            mainDiv.innerHTML += res;
+
+            var imgInvert = document.getElementById("imgInvert");
+
+            if (imgInvert.complete) {	// make sure the image is fully loaded
+                var newimg = Pixastic.process(
+                    imgInvert,
+                    "invert", null
+                )
+                imgInvert = newimg;
+            }
+            imgInvert.style.height = "300px";
+            //imgInvert.style.width = dropbox.style.width;
+            Filters.Invert = imgInvert;
+        }
+
+        var Rad = 0;
+        function RotatePlus() {
+            Rad += 90;
+            document.getElementById("imgBG").style.webkitTransform = "rotate(" + Rad + "deg)"; // for Chrome
+            document.getElementById("imgBG").style.MozTransform = "rotate(" + Rad + "deg)"; // for FF
+            Filters.Invert.style.webkitTransform = "rotate(" + Rad + "deg)"; // for Chrome
+            Filters.Invert.style.MozTransform = "rotate(" + Rad + "deg)"; // for FF
+        }
+        function RotateMinus() {
+            Rad -= 90;
+            document.getElementById("imgBG").style.webkitTransform = "rotate(" + Rad + "deg)"; // for Chrome
+            document.getElementById("imgBG").style.MozTransform = "rotate(" + Rad + "deg)"; // for FF
+            Filters.Invert.style.webkitTransform = "rotate(" + Rad + "deg)"; // for Chrome
+            Filters.Invert.style.MozTransform = "rotate(" + Rad + "deg)"; // for FF
+        }
+     </script>
+</body>
+</html>