Skip to content
Browse files

Added initial work

  • Loading branch information...
1 parent 699a3d0 commit cdba12e9d2957a6bac55862a0cb9acdcb99c701f @subinvarghesein committed Jul 5, 2012
Showing with 90 additions and 0 deletions.
  1. +21 −0 index.html
  2. +69 −0 js/script.js
View
21 index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <title>PhotoCanvas - Photoshop clone built using javascript and Canvas</title>
+ <link href="style.css" rel="stylesheet">
+ </head>
+ <body>
+ <div id="wrapper">
+ <div id="canvas-container"></div>
+ <div id="toolbox"></div>
+ <div id="widgetbox"></div>
+ <div id="initial">
+ <p>
+ Drop picture here or <a href="">upload pics</a><a href=""></a>
+ </p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="js/script.js"></script>
+ </body>
+</html>
View
69 js/script.js
@@ -0,0 +1,69 @@
+(function(){
+ var d=document,
+ w=window;
+
+
+
+ $.event.props.push("dataTransfer");
+
+ function cancelEvent(e) {
+ if (e.preventDefault)
+ e.preventDefault(); // required by FF + Safari
+ e.dataTransfer && (e.dataTransfer.dropEffect = 'copy'); // tells the browser what drop effect is allowed here
+ return false; // required by IE
+ }
+
+ function drop(e) {
+ e.preventDefault();
+
+ var files = e.dataTransfer.files;
+ var files_count = files.length;
+
+ var file = files[0];
+
+ var img = d.createElement('img');
+ var reader = new FileReader();
+ reader.onload = (function(aImg, aName) { return function(e) {
+ aImg.src = e.target.result;
+ aImg.onload = function(){
+ var canvas = createImgCanvas(aImg, aImg.width, aImg.height, aName);
+ $('#dropzone').append(canvas);
+ }
+ }; })(img, file.name);
+ reader.readAsDataURL(file);
+
+ return false;
+ }
+
+ function createImgCanvas(img, imgWidth, imgHeight, label) {
+ var canvas = document.createElement('canvas');
+ canvas.setAttribute('id',label);
+ canvas.width = imgWidth;
+ canvas.height = imgHeight;
+ var imageCanvas2D = canvas.getContext("2d");
+ try{
+ imageCanvas2D.drawImage(img, 0, 0, imgWidth, imgHeight);
+ } catch(err) { alert(err);}
+ return canvas;
+ }
+
+
+ $(d).ready(function(){
+ $('#wrapper')
+ .bind('drop', drop)
+ .bind('dragenter', cancelEvent)
+ .bind('dragover', cancelEvent)
+ .bind('dragleave', cancelEvent);
+
+ /*$('#background').bind('dragover', cancelEvent)
+ .bind('dragenter', cancelEvent)
+ .bind('drop', function(e){
+ if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
+
+ alert('drop');
+ return false;
+ })*/
+ })
+
+
+})()

0 comments on commit cdba12e

Please sign in to comment.
Something went wrong with that request. Please try again.