HTML 5 together with jquery to achieve a cool image gray-scale gradient effect

Once upon a time, the grayscale images displayed on the site must be converted manually. Now using the HTML 5 canvas, the image can be cleverly converted to gray without the use of image-editing software. I have an example that shows how to use HTML 5 and jquery to dynamically convert color images to gray. Contributor: Thank Dasi Clark (my partner in themify) for contributing jquery and JavaScript code.

51CTO Recommended Topics: HTML 5 Next generation Web development standards

Example: HTML5 grayscale gradients (http://webdesignerwall.com/demo/html5-grayscale/)

Objective

The purpose of this example is to show you how to use HTML5 and jquery to create a mouse hover effect with grayscale/color images. This effect requires two images, color, and grayscale versions before HTML5 appears. Now HTML5 makes it easier and more efficient to create this effect, because the gray image will be generated directly from the original file. I hope you find this script quite useful in the design of a display cabinet or a photo album, for example.

jquery Code

The following jquery code looks for the target image and generates a grayscale version. When the mouse hovers over the image, the code will gradient the grayscale image to color.

 
 

  
  

  
<mce:script src= "Jquery.min.js" mce_src= "Jquery.min.js" type= "Text/javascript" ></mce:script>
  
  

  
<mce:script type= "Text/javascript" ><!--
  
  

  

  
  

  
on window load. This waits until images have loaded which is essential
  
  

  
$ (window). Load (function () {
  
  

  

  
  

  
Fade in images so there isn "t a color" POPs "document load and then on window load
  
  

  
$ (". Item img"). FadeIn (500);
  
  

  

  
  

  
Clone image
  
  

  
$ (". Item img"). each (function () {
  
  

  
var el = $ (this);
  
  

  
El.css ({"position": "Absolute"}). Wrap ("<div class=" Img_wrapper "style=" Display:inline-block "mce_style=" display : Inline-block ">"). Clone (). addclass ("Img_grayscale"). css ({"position": "Absolute", "Z-index": "998", "opacity": "0 "}). InsertBefore (EL). Queue (function () {
  
  

  
var el = $ (this);
  
  

  
El.parent (). css ({"width": this.width, "height": this.height});
  
  

  
El.dequeue ();
  
  

  
});
  
  

  
THIS.SRC = Grayscale (THIS.SRC);
  
  

  
});
  
  

  

  
  

  
Fade image
  
  

  
$ (". Item img"). MouseOver (function () {
  
  

  
$ (this). Parent (). Find ("Img:first"). Stop (). Animate ({opacity:1}, 1000);
  
  

  
})
  
  

  
$ (". Img_grayscale"). Mouseout (function () {
  
  

  
$ (this). Stop (). Animate ({opacity:0}, 1000);
  
  

  
});
  
  

  
});
  
  

  

  
  

  
Grayscale W Canvas method
  
  

  
function Grayscale (src) {
  
  

  
var canvas = document.createelement ("Canvas");
  
  

  
var ctx = Canvas.getcontext ("2d");
  
  

  
var imgobj = new Image ();
  
  

  
IMGOBJ.SRC = src;
  
  

  
Canvas.width = Imgobj.width;
  
  

  
Canvas.height = Imgobj.height;
  
  

  
Ctx.drawimage (imgobj, 0, 0);
  
  

  
var imgpixels = ctx.getimagedata (0, 0, canvas.width, canvas.height);
  
  

  
for (var y = 0; y < imgpixels.height; y++) {
  
  

  
for (var x = 0; x < Imgpixels.width + +) {
  
  

  
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;
  
  

  
}
  
  

  
}
  
  

  
Ctx.putimagedata (imgpixels, 0, 0, 0, 0, imgpixels.width, imgpixels.height);
  
  

  
return Canvas.todataurl ();
  
  

  
}
  
  

  

  
  

  
--></mce:script>
 
 

How to use

Use this effect on your site:

Referencing Jquery.js

Paste the above code

Sets the target image (for example,. post-img, IMG,. Gallery img, etc.)

You can change the speed of the animation (e.g. 1000=1 seconds)

Compatibility

Can work in any browser that supports HTML5 and JavaScript, such as Chrome, Safari, and Firefox. If the browser does not support HTML5, the effect will be returned to the original color picture. Note: If local files do not work on Firefox and Chrome, you must put the HTML code on a Web server.

Original link: http://blog.csdn.net/hfahe/archive/2011/02/25/6208765.aspx

"Edit Recommendation"

1. See how the New York Times uses HTML 5 to design online-reading products
2. HTML 5 form new function resolution
3. 12 ingenious and interesting HTML 5 apps
4. 20 HTML 5 and CSS3 free website templates with tutorials
5. 18 Awesome jquery plug-ins that Web developers fondle admiringly

"Responsible editor: Chen Yu new TEL: (010) 68476606"