ajaxBlender.com— A Whole Lot of AJAX! Directory for Web 2.0 AJAX scripts, demos and tutorials. Custom AJAX Coding Service for Your Web 2.0 Website.

Convert Images to Grayscale

ajaxBlender.com — Mon, 07 Dec 2009 15:33:03 +0000

Read this tutorial to find out how to desaturate an image (convert color images to grayscale) using JavaScript. A cross-browser code sample is supplied.
Recently we published a tutorial explaining how to rotate images using JavaScript. To continue this series of tutorials on image manipulation using JavaScript, we would like to explain how to change color images to grayscale using JavaScript.

This is a relatively simple task, but there are two methods (one method for Internet Explorer and one method for all other browsers).

Canvas Method

As you probably know, screen color consists of 3 components: red, green and blue. Each component or color (for example, red) has a value from 0 to 255. The value 0 indicates there is no red color and the value 255 would be the brightest possible red color. To convert a color to grayscale you just need to calculate the average for all three components. This can be done using the simple formula below:

grayscalecolor = (red + green + blue) / 3;

All modern browsers support the CANVAS tag which is allowed access to the image’s pixels. The code below will go through each pixel in the image and replace the color values with an average value. Here is the code:


var canvas = document.createElement('canvas');

var canvasContext = canvas.getContext('2d');

var imgW = imgObj.width;

var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

for(>var y = 0; y < imgPixels.height; y++){
     for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

From the above code sample, you see that we created a canvas, loaded the image into it, and then changed the color values of each pixel in the image to an average value. After that we simply replaced the SRC of our image to the image changed in the canvas.

Using the same method you can also flip images using JavaScript. (We will create a tutorial for this in the future).

MSIE (Internet Explorer) method

Microsoft Internet Explorer does not support the CANVAS tag, but Microsoft does provide image manipulation through filters. The filter to use for converting images to grayscale is the filter named DXImageTransform.Microsoft.BasicImage. Therefore, we simply apply this filter to our image, and it will work in all versions of MSIE (starting from version 6).

imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';

That’s it ;) Click the Demo to see it in action.

jAni

ajaxBlender.com — Mon, 23 Nov 2009 16:05:22 +0000

jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

Features

Light-weight script
Easy to integrate
Fully customizable via CSS
Works with all modern browsers

How to Use

1.) Download jAni script. The package already contains jQuery framework.
2.) Add the following code to your … tag to connect the jQuery framework and jAni plugin. (Make sure paths to files are correct.)

3.) Add a style containing the url to your background with animation (this may be added to a separate CSS document or inside the … tag):

4.) Add an empty DIV which will display animation in your document:

"animation-1">

5.) Add the following code to your … tag to initialize jAni and start the animation.

<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').jani.play();
});
</script>

That’s it ;) Click the Demo button to see it in action.

jAni Methods

jani.play()
Start playing animation.

jani.pause()
Pause animation.

jani.stop()
Stop animation.

Parameters

The table below contains a list of parameters accepted by the .jani() function.

Parameters	Description
frameWidth	Width of a single frame.
frameHeight	Height of a single frame.
speed	Animation speed.
totalFrames	Total frames in the animation.
loop	Loop an animation or not. By default, value is true.

jClip

ajaxBlender.com — Mon, 16 Nov 2009 16:41:32 +0000

jClip is a simple jQuery plugin which allows image and content clipping. This is useful for when an image (or content area) is larger than the container where it resides. You are able to specify the dimensions of an absolutely positioned element which you want to be visible. The element is then clipped into the rectangular shape and displayed.

The function of jClip is similar to css “clip:rect” style but jClip provides a fully cross-browser implementation of this method with ability for you to animate the clipped content using standard jQuery animate functions.

Features

Light-weight script
Easy to integrate
Works with all modern browsers

How to Use

1.) Download jClip script. The package already contains jQuery framework.
2.) Add the following code to your … tag to connect jQuery framework and jClip plugin. (Make sure paths to files are correct.)

3.) Use the following code to apply the clipping function to an element, we recommend you run it in a domReady event. The code below will clip the element with ID #sample-1 from its top left corner with a width of 100 and a height of 100:

<script type="text/javascript">
     $(document).ready(function(){
          $('#sample-1').clip(0, 0, 100, 100);
          // The code above is equal to:
          $('#sample-1').clip(100, 100);
     });
</script>

4.) To remove clipping from an element, pass the keyword ‘remove’ to the jclip function:

<script type="text/javascript">
     $(document).ready(function(){
          $('#sample-1').clip('remove');
     });
</script>

5.) By default, jClip will start clipping from the top left corner of the element but you may specify Top and Left positions with the first two arguments. As seen in the sample below, jClip will start clipping with 20 pixel offset from top and left:

<script type="text/javascript">
     $(document).ready(function(){
          $('#sample-1').clip(20, 20, 100, 100);
     });
</script>

That’s it ;) Click the Demo button to see it in action.

Parameters

The table below contains a list of parameters accepted by the .jclip() function.

Parameters	Description
remove	jclip(’remove’). Removes clipping from the element.
width, height	jclip(width, height). Applies clipping to an element from top left corner with specified width and height.
left, top, width, height	jclip(left, top, width, height). Applies clipping to an element from the specified left and top coordinate with a set width and height of the clipping area.

Image Slideshow using Script.aculo.us

ajaxBlender.com — Thu, 29 Oct 2009 14:15:25 +0000

This script is implementation of a very simple (light-weight) image slideshow using script.aculo.us / prototypejs.

Image Cross Fade Transition using jQuery

ajaxBlender.com — Tue, 27 Oct 2009 09:23:03 +0000

This tutorial explains how to create a jQuery plugin which will create an image cross fade transition effect on rollover just with a few lines of JavaScript code.

Galleria

ajaxBlender.com — Mon, 12 Oct 2009 11:24:42 +0000

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Jcrop

ajaxBlender.com — Thu, 08 Oct 2009 16:52:13 +0000

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

UvumiTools Crop

ajaxBlender.com — Thu, 08 Oct 2009 14:05:07 +0000

UvumiTools Crop script for Mootools provides the ability to create a selection area on images that can be used to crop images.

Image Cropper

ajaxBlender.com — Thu, 08 Oct 2009 13:27:57 +0000

The Image Cropper UI script allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software. The script is based on the Prototype JavaScript Framework and script.aculo.us.

ImageZoom

ajaxBlender.com — Mon, 05 Oct 2009 19:42:59 +0000

ImageZoom is a Mootools script based on Lightbox JS. The script is perfect for photo galleries, it can display large images on top of a page, and has the ability to group multiple photos in one set.