When there are many images on the Image Display page, it is easy to make the user's attention less concentrated, and it will cause the entire tone of the website to be uncoordinated.
Can I convert all the previews into a grayscale image first, and then automatically color the image when the user browses it and then activates it?
Before html5, the only method was to let the artist make two images, one color and one black and white, which was time-consuming and laborious. It wastes a lot of space.
Today we are talking about the image processing method through the html5 canvas. Let js process the image and output the image.
Canvas + js allows us to perform pixel-level operations on images. We can perform operations on image pixels to achieve various image processing effects, such as blur, Mosaic, liquefaction, and color matching.
<! Doctype html>
<Html>
<Head>
<Title> Canvas image processing demo-by-@ Xie Shuai shawn </title>
<Meta charset = 'utf-8'/>
<Script src = "jQuery. js" type = "text/javascript"> </script>
<Style>
H1 {text-align: center ;}
. Outer {width: 800px; margin: 0 auto ;}
Img {border: 0; width: 200px; height: 350px; margin: 0; padding: 0 ;}
</Style>
</Head>
<Body>
<H1> Canvas image processing demo
<Div class = 'outer'>
</Div>
<Script>
/* Wait until the image is loaded. (If the image is not loaded, the image cannot be processed normally )*/
$ (Window). load (function (){
/* Clone an original image and change the current image to a grayscale image */
$ ('. Image'). each (function (){
Certificate (this).css ({"position": "absolute "}). wrap ("<div class = 'img _ wrapper 'style = 'display: inline-block; position: relative; float: left; '> </div> "mirror.clone().addclass('img_grayscale'mirror.css ({" position ":" absolute "," z-index ":" 998 "," opacity ":" 0 "}). insertBefore ($ (this ));
Detail ('.img_wrapper'detail .css ({'height': $ (this). height (), 'width': $ (this). width ()});
This. src = huidu (this. src );
});
/* Simulate the coloring effect by controlling the transparency of the color image */
$ ('. Img_wrapper'). mouseover (function (){
$ (This). find ('img: first'). stop (). animate ({opacity: 1}, 100 );
})
$ ('. Img_wrapper'). mouseout (function (){
$ (This). find ('img: first'). stop (). animate ({opacity: 0}, 100 );
});
/*
* Function
* Function name: huidu
* Function: converts an image to a grayscale image.
* Parameter: src (source image url)
* Return value: (the image url after conversion)
*/
Function huidu (src ){
/* Create a canvas */
Var canvas = document. createElement ('canvas ');
Var ctx = canvas. getContext ('2d ');
Var img = new Image ();
Img. src = src;
Canvas. height = img. height;
Canvas. width = img. width;
Ctx. drawImage (img, 0, 0 );
Var imgdata = ctx. getImageData (0, 0, canvas. width, canvas. height); var data = imgdata. data;
/* Grayscale processing: calculate the mean values of r, g, and B and assign them back to r, g, and B */
For (var I = 0, n = data. length; I <n; I + = 4 ){
Var average = (data [I] + data [I + 1] + data [I + 2])/3;
Data [I] = average;
Data [I + 1] = average;
Data [I + 2] = average;
}
Ctx. putImageData (imgdata, 0, 0 );
/* Return the processed src */
Return canvas. toDataURL ();
}
});
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
