Image Blending Algorithm–Part II

Digital Image Processing, Online Image Editing, Photoshop Algorithm No Responses »
Mar 112011

This is the continuation of my previous post Image Blending Algorithm–Part I regarding digital image blending algorithms. I will continue to reveal more blending mode algorithms used in Adobe Photoshop and iPaintPro.  In part I, five image blending algorithms have been revealed: Multiply, Screen, Overlay, Hard Light and Soft Light.  This post will introduce another 4 image blending algorithms: Color Dodge, Color Burn, Linear Color Dodge and Linear Color Burn.

Blending Mode: Color Dodge

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    }
};

Now to apply the Color Dodge blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"colordodge");

Blending Effect Screenshot taken from iPaintPro:

blending_colordodge
iPaintPro Image Blending: Color Dodge
 
Blending Mode: Color Burn

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    },
    colorburn:function(v1,v2){
      return (v1 === 0) ? v1:Math.max(0, (255 - ((255 - v2) << 8 ) / v1));
    }
};

Now to apply the Color Burn blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"colorburn");

Blending Effect Screenshot taken from iPaintPro:

blending_colorburn
iPaintPro Image Blending: Color Burn
 
Blending Mode: Linear Color Dodge

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    },
    colorburn:function(v1,v2){
      return (v1 === 0) ? v1:Math.max(0, (255 - ((255 - v2) << 8 ) / v1));
    },
    linearcolordodge:function(v1,v2){
      return Math.min(v1 + v2, 255);
    }
};

Now to apply the Linear Color Dodge blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"linearcolordodge");

Blending Effect Screenshot taken from iPaintPro:

blending_linearcolordodge
iPaintPro Image Blending: Linear Color Dodge
Blending Mode: Linear Color Burn

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    },
    colorburn:function(v1,v2){
      return (v1 === 0) ? v1:Math.max(0, (255 - ((255 - v2) << 8 ) / v1));
    },
    linearcolordodge:function(v1,v2){
      return Math.min(v1 + v2, 255);
    },
    linearcolorburn:function(v1,v2){
      return ((v1 + v2) < 255) ? 0 : (v1 + v2 - 255);
    },
};

Now to apply the Linear Color Burn blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"linearcolorburn");

Blending Effect Screenshot taken from iPaintPro:

blending_linearcolorburn
iPaintPro Image Blending: Linear Color Burn

 

 

 

To be continued…
Posted by jswidget at 6:08 pm Tagged with: , , , ,

Image Blending Algorithm–Part I

Digital Image Processing, Online Image Editing, Photoshop Algorithm No Responses »
Mar 112011

Image blending can easily help you seamlessly blend two images together to create another different special effect.  Image blending has been seen in almost all of the image processing program.  iPaintPro implements most of the often seen image blending mode in Adobe Photoshop. In this post I will reveal the algorithms I used for each of the blending method with a screenshot to show you the effect.  However, I am not guarantee that will be truly the algorithms used in Adobe Photoshop.

Since there are so many different blending methods, I will split this topic in a series of post.

Before we start,  let’s create  a generic function blending_canvas(canvas1,cavas2,blending_mode). This function will blend canvas1 into canvas2 using specified blending_mode.  We will implement each blending_mode into a global object BLENDING_MACRO that is called within this function.


// blend canvas1 to canvas2 using given blending_mode

function blending_canvas(canvas1, canvas2, blending_mode){
   // Although it doesn't have to be, but for the sake of simplicity, let's assume
   // the two canvas must have same size;
   if ( canvas1.width != canvas2.width || canvas1.height != canvas2.height ){
      return canvas2;
   }
   var ctx1 = canvas1.getContext("2d"),
       ctx2 = canvas2.getContext("2d");
   var data1 = ctx1.getImageData(0,0,canvas1.width,canvas2.height).data;
   var imgData = ctx2.getImageData(0,0,canvas1.width,canvas2.height);
   var data2 = imgData.data;

   for ( var i = 0; i < data1.length; i += 4 ){
      //blending red channel
      data2[i]   = BLENDING_MACRO[blending_mode](data1[i],data2[i]);

      //blending green channel
      data2[i+1] = BLENDING_MACRO[blending_mode](data1[i],data2[i+1]);

      //blending blue channel
      data2[i+2] = BLENDING_MACRO[blending_mode](data1[i],data2[i+2]);
   }

   ctx2.putImageData(imgData,0,0);

   return canvas2;
}

Ok, with this powerful function ready in hand, let’s buckle up and start our journey…

Blending Mode: Multiply

Code Fragment:


//v1: channel value taken from source image

//v2: channel value taken from destination image

var BLENDING_MACRO = {
       multiply: function(v1,v2){
          return v1* v2 / 255;
       }
    };
}

Now to multiply two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"multiply");

Blending Effect Screenshot taken from iPaintPro:

 blending_multiply
iPaintPro Image Blending: Multiply
 
Blending Mode: Screen

Code Fragment:


//v1: channel value taken from source image

//v2: channel value taken from destination image

var BLENDING_MACRO = {
       multiply: function(v1,v2){return v1 * v2 / 255;},

       screen:function(v1,v2){

          // some web page present the formula as:

          // 255 – ( 255 – v1 ) * ( 255 – v2 ) / 255

          // With a little mathematic reasoning, you will found that they are equivalent

          // but with less burden to the cpu.

          return v1 + v2 – v1 * v2/ 255;

       }
    };
}

Now to apply the Screen blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"screen");

Blending Effect Screenshot taken from iPaintPro:

blending_screen
iPaintPro Image Blending: Screen
Blending Mode: Overlay

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    }
};

Now to apply the Overlay blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"overlay");

Blending Effect Screenshot taken from iPaintPro:

blending_overlay
iPaintPro Image Blending: Overlay
 
Blending Mode: Soft Light

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    }
};

Now to apply the Soft Light blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"softlight");

Blending Effect Screenshot taken from iPaintPro:

blending_softlight
iPaintPro Image Blending: Soft Light
 
Blending Mode: Hard Light

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    }
};

Now to apply the Hard Light blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"hardlight");

Blending Effect Screenshot taken from iPaintPro:

blending_hardlight
iPaintPro Image Blending: Hard Light

 

 

 

To be continued…
Posted by jswidget at 3:32 pm Tagged with: , , , , ,
© 2011 iPaintPro Suffusion theme by Sayontan Sinha