Merge pull request #15 from shukapurv/feature/additionalFilters

Feature/additional filters

index.html

@@ -67,13 +67,13 @@
           <a href="#" onclick=doGreyScale()>GreyScale</a>
         </div>
         <div class="action-tool">
-          <a href="#">Sepia</a>
+          <a href="#" onclick=doSepia()>Sepia</a>
         </div>
         <div class="action-tool">
-          <a href="#">Amaro</a>
+          <a href="#" onClick=doAmaro()>Amaro</a>
         </div>
         <div class="action-tool">
-          <a href="#">Lark</a>
+          <a href="#" onClick=doLark()>Lark</a>
         </div>
       </div>
 

js/app.js

@@ -25,6 +25,74 @@ function doGreyScale(){
     ctx.putImageData(imageData, 0, 0);
 }
 
+//Simple algorithm to convert image to Sepia
+function doSepia(){
+    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var data = imageData.data;
+    for(let i = 0; i < data.length; i += 4){
+        data[i]*=1.07;
+        data[i + 1]*=0.74;
+        data[i + 2]*=0.43;
+    }
+    ctx.putImageData(imageData, 0, 0);
+}
+
+//Simple algorithm to convert image to Lark
+function doLark(){
+    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var data = imageData.data;
+    brightness(data,0.08);
+    rgbAdjust(data,[1,1.03,1.05]);
+    saturation(data,0.12);
+    ctx.putImageData(imageData, 0, 0);
+}
+
+//Simple algorithm to convert image to Amaro
+function doAmaro(){
+    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var data = imageData.data;
+    brightness(data,0.15);
+    saturation(data,0.3);
+    ctx.putImageData(imageData, 0, 0);
+}
+
+//val should be from -1 to 1 and 0 for unchanged
+function brightness(data,val){
+    if(val<=-1){
+        val=-1;
+    }
+    if(val>=1){
+        val=1;
+    }
+    val=~~(255*val);
+    for(let i=0;i<data.length;i+=1){
+        data[i]+=val;
+    }
+}
+
+//val should be -1 to positive number and 0 is for unchanged
+function saturation(data,val){
+    if(val<=-1){
+        val=-1;
+    }
+    for(let i=0;i<data.length;i+=4){
+        let gray=0.2989*data[i]+0.1140*data[i+2]+0.5870*data[i+1];
+        data[i]= -gray*val+data[i]*(1+val);
+        data[i+1]= -gray*val+data[i+1]*(1+val);
+        data[i+2]= -gray*val+data[i+2]*(1+val);
+    }
+}
+
+//RGB Adjust
+function rgbAdjust(data,vals){
+    for(let i=0;i<data.length;i+=4){
+        data[i]*=vals[0];
+        data[i+1]*=vals[1];
+        data[i+2]*=vals[2];
+    }
+}
+
+
 //Save Image from Canvas
 saveBtn.addEventListener("click", function(){
     const downloadImg = canvas.toDataURL("image/png");