├── .gitignore
├── Editr-src.js
├── Editr.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | .DS_Store
 3 | 
 4 | test.js
 5 | 
 6 | test.JPG
 7 | 
 8 | leftovers.js
 9 | 
10 | index.html
11 | 


--------------------------------------------------------------------------------
/Editr-src.js:
--------------------------------------------------------------------------------
  1 | var Editr = function (image) {
  2 | 	var cvs = document.createElement('canvas'), ctx, imgData;
  3 | 	cvs.setAttribute('width', image.width);
  4 | 	cvs.setAttribute('height', image.height);
  5 | 	ctx = cvs.getContext('2d');
  6 | 	ctx.drawImage(image, 0, 0);
  7 | 	imgData = ctx.getImageData(0, 0, image.width, image.height);
  8 | 	//GrayScale
  9 | 	ctx.grayScale = function () {
 10 | 		var px = imgData.data, length = px.length, i, gray;
 11 | 		for (i = 0; i < length; i += 4) {
 12 | 			gray = (px[i] + px[i + 1] + px[i + 2]) / 3;
 13 | 		    imgData.data[i] = gray;
 14 | 		    imgData.data[i + 1] = gray;
 15 | 			imgData.data[i + 2] = gray;   
 16 | 		 }
 17 | 		 ctx.putImageData(imgData, 0, 0);
 18 | 		 return ctx;
 19 | 	}
 20 | 	//Sepia
 21 | 	ctx.sepia = function () {
 22 | 		var px = imgData.data, length = px.length, i, red, green, blue;
 23 | 	    for (i = 0; i < length; i += 4) {
 24 | 			red = (px[i] * 0.393) + (px[i + 1] * 0.769) + (px[i + 2] * 0.189);
 25 | 			green = (px[i] * 0.349) + (px[i + 1] * 0.686) + (px[i + 2] * 0.168);
 26 | 			blue = (px[i] * 0.272) + (px[i + 1] * 0.534) + (px[i + 2] * 0.131);
 27 | 		    imgData.data[i] = red;
 28 | 		    imgData.data[i + 1] = green;
 29 | 		    imgData.data[i + 2] = blue; 
 30 | 		}
 31 | 		ctx.putImageData(imgData, 0, 0);
 32 | 		return ctx;
 33 | 	}
 34 | 	//Invert
 35 | 	ctx.invert = function () {
 36 | 		var px = imgData.data, length = px.length, i;
 37 | 	    for (i = 0; i < length; i += 4) {
 38 | 		    imgData.data[i] = 255 - px[i];
 39 | 		    imgData.data[i + 1] = 255 - px[i + 1];
 40 | 		    imgData.data[i + 2] = 255 - px[i + 2];   
 41 | 		}
 42 | 		ctx.putImageData(imgData, 0, 0);
 43 | 		return ctx;
 44 | 	}
 45 | 	//Monochromatic Red
 46 | 	ctx.monoRed = function () {
 47 | 		var px = imgData.data, length = px.length, i;
 48 | 		for (i = 0; i < length; i += 4) {
 49 | 			imgData.data[i + 1] = 0;
 50 | 			imgData.data[i + 2] = 0;   
 51 | 	    }
 52 | 	    ctx.putImageData(imgData, 0, 0);
 53 | 		return ctx;
 54 | 	}
 55 | 	//Monochromatic Green
 56 | 	ctx.monoGreen = function () {
 57 | 		var px = imgData.data, length = px.length, i;
 58 |     	for (i = 0; i < length; i += 4) {
 59 | 	      	imgData.data[i] = 0;
 60 | 	     	imgData.data[i + 2] = 0;   
 61 | 	    }
 62 | 	    ctx.putImageData(imgData, 0, 0);
 63 | 		return ctx;
 64 | 	}
 65 | 	//Monochromatic Blue
 66 | 	ctx.monoBlue = function () {
 67 | 		var px = imgData.data, length = px.length, i;
 68 |     	for (i = 0; i < length; i += 4) {
 69 | 	      	imgData.data[i] = 0;
 70 | 	     	imgData.data[i + 1] = 0;   
 71 | 	    }
 72 | 	    ctx.putImageData(imgData, 0, 0);
 73 | 		return ctx;
 74 | 	}
 75 | 	//180 Rotate
 76 | 	ctx.rotate180 = function () {
 77 | 		var image = document.createElement('img');
 78 | 		image.setAttribute('src', ctx.canvas.toDataURL('image/png'));
 79 | 		ctx.translate(image.width-1, image.height-1);
 80 | 		ctx.rotate(Math.PI);
 81 | 		ctx.drawImage(image, 0, 0, image.width, image.height);   
 82 | 		return ctx;
 83 | 	}
 84 | 	//Flip Horizontally
 85 | 	ctx.flipHorizontal = function () {
 86 | 		var image = document.createElement('img');
 87 | 		image.setAttribute('src', ctx.canvas.toDataURL('image/png'));
 88 |    		ctx.translate(image.width, 0);
 89 | 		ctx.scale(-1, 1);
 90 | 		ctx.drawImage(image, 0, 0, image.width, image.height);   
 91 | 		return ctx;
 92 | 	}
 93 | 	//Replace image on the DOM
 94 | 	ctx.replace = function () {
 95 | 		image.setAttribute('src', ctx.canvas.toDataURL('image/png'));
 96 | 	}
 97 | 	//Return the DataURL
 98 | 	ctx.dataURL = function () {
 99 | 		return ctx.canvas.toDataURL('image/png');
100 | 	}
101 | 	
102 | 	return ctx;
103 | }


--------------------------------------------------------------------------------
/Editr.js:
--------------------------------------------------------------------------------
1 | var Editr=function(f){var h=document.createElement("canvas"),b,d;h.setAttribute("width",f.width);h.setAttribute("height",f.height);b=h.getContext("2d");b.drawImage(f,0,0);d=b.getImageData(0,0,f.width,f.height);b.grayScale=function(){var a=d.data,e=a.length,c,g;for(c=0;c<e;c+=4)g=(a[c]+a[c+1]+a[c+2])/3,d.data[c]=g,d.data[c+1]=g,d.data[c+2]=g;b.putImageData(d,0,0);return b};b.sepia=function(){var a=d.data,e=a.length,c,g,f,h;for(c=0;c<e;c+=4)g=a[c]*0.393+a[c+1]*0.769+a[c+2]*0.189,f=a[c]*0.349+a[c+1]*
2 | 0.686+a[c+2]*0.168,h=a[c]*0.272+a[c+1]*0.534+a[c+2]*0.131,d.data[c]=g,d.data[c+1]=f,d.data[c+2]=h;b.putImageData(d,0,0);return b};b.invert=function(){var a=d.data,e=a.length,c;for(c=0;c<e;c+=4)d.data[c]=255-a[c],d.data[c+1]=255-a[c+1],d.data[c+2]=255-a[c+2];b.putImageData(d,0,0);return b};b.monoRed=function(){var a=d.data.length,e;for(e=0;e<a;e+=4)d.data[e+1]=0,d.data[e+2]=0;b.putImageData(d,0,0);return b};b.monoGreen=function(){var a=d.data.length,e;for(e=0;e<a;e+=4)d.data[e]=0,d.data[e+2]=0;b.putImageData(d,
3 | 0,0);return b};b.monoBlue=function(){var a=d.data.length,e;for(e=0;e<a;e+=4)d.data[e]=0,d.data[e+1]=0;b.putImageData(d,0,0);return b};b.rotate180=function(){var a=document.createElement("img");a.setAttribute("src",b.canvas.toDataURL("image/png"));b.translate(a.width-1,a.height-1);b.rotate(Math.PI);b.drawImage(a,0,0,a.width,a.height);return b};b.flipHorizontal=function(){var a=document.createElement("img");a.setAttribute("src",b.canvas.toDataURL("image/png"));b.translate(a.width,0);b.scale(-1,1);b.drawImage(a,
4 | 0,0,a.width,a.height);return b};b.replace=function(){f.setAttribute("src",b.canvas.toDataURL("image/png"))};b.dataURL=function(){return b.canvas.toDataURL("image/png")};return b};


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | EditrJS 
 2 | ========
 3 | A simple lightweight, library agnotistc image editor built in javascript. 
 4 | 
 5 | Currently in version 1.0
 6 | 
 7 | Supported
 8 | =========
 9 | 
10 | Sepia Tone
11 | Grayscale
12 | Inverted
13 | Monochromatic (Red, Green, Blue)
14 | Horizontal Flip
15 | 180 Rorate
16 | Vertical Flip(Can be accomplished by using rotate180() with flipHorizontal())
17 | 
18 | Future Support
19 | ==============
20 | Revert
21 | Saturation
22 | More to come...
23 | 
24 | Usage
25 | =======
26 | First off, make sure that your img tag has the proper height and width of the image. It helps things run smoother. 
27 | 
28 | 	Editr(image); //This parameter is just your img element. This alone will do nothing.
29 | 	
30 | 	Editr(image).sepia();//This will apply the sepia filter your your image
31 | 
32 | 
33 | Two Types of usage
34 | 
35 | 	Editr(image).sepia().replace(); //This replaces the image that was passed in at the spot
36 | 	
37 | 	Editr(image).sepia().dataURL(); //This will return the dataURL which you can then add as the src to any img tag in your site. 
38 | 
39 | 
40 | Chainable
41 | 
42 | 	Editr(image).sepia().grayScale().monoRed().replace() //This will go through each change and keep on applying the changes to the image and then replace the image. 
43 | 
44 | 
45 | API
46 | ======
47 | 
48 | 	.sepia()
49 | 	.grayScale()
50 | 	.invert()
51 | 	.monoRed()
52 | 	.monoBlue()
53 | 	.monoGreen()
54 | 	.rotate180()
55 | 	.flipHorizontal()


--------------------------------------------------------------------------------