How To Turn Colors Into Shades Of Grey blogger

Here is the HTML code that created the canvas and loaded the image (to be inserted in the HTML view of your post) :

<canvas height="400" id="myimage" width="500" style="margin-left:30px; ">
Your browser does not support Canvas.
<br />
Sorry
</canvas>
<script>
var mycanvas   = document.getElementById('myimage') ;
if( mycanvas.getContext ) {
var ctx = mycanvas.getContext('2d');
var imageObj = new Image();
imageObj.crossOrigin="anonymous" ;
imageObj.src = 'https://dc788c82bdb50153.../street.jpg';
ctx.drawImage(imageObj, 0, 0);
}
</script>

A small customization is required to use this code:
1) the attributes of the canvas tag must be edited: replace the height and the width with the actual height and width in pixels of the image you want to display.
2) In this post, I used an image located on my google drive. Replace the source of the image (imageObj.src ) with the actual URL of your image (it should be accessible from blogger).

Now that we know how to load a picture into an html canvas, let us see how we can transform this picture and turn colors into shades of grey. To do that we’ll use a small javascript function that replaces colors with shades of grey. Insert the following script in your post (in the html view):

<script>
function drawImageInGrey(ctxObj, cvsObj  ) {   
var imgData=ctxObj.getImageData(0,0,cvsObj.width-1,cvsObj.height-1);   
var col = 0 ;
for (var i=0;i<imgData.data.length;i+=4)
{
col = Math.floor( ( imgData.data[i] + imgData.data[i+1] + imgData.data[i+2] ) / 3 ) ;
imgData.data[i] = col;
   imgData.data[i+1] = col;
   imgData.data[i+2] = col;
   }
ctxObj.putImageData(imgData,0,0);   
}
</script>



Then apply the transformation to the canvas with the following javascript command (in the html view of your post):





<script>
drawImageInGrey(ctx, mycanvas);
</script>

Here is the result:

SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•