Canvas, HTML5 component, implements Image Grayscale

Last Update:2018-12-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Create an HTML page and add it between the body tags

< Canvas id = "Mycanvas" > Gray filter < /Canvas >

Add the simplest Javascript script

< Pre name = "Code" Class = "JavaScript" > Window. onload = Function (){
VaR Canvas = Document. getelementbyid ( "Mycanvas" ); < Span Style= "White-space: pre" > < /Span > // Todo: Do something here
}

Obtain the context of the drawn object from the canvas objectCodeAs follows:

VaR context = canvas. getcontext ( "2D" );

The HTML code for adding an image to the HTML page is as follows:

< IMGId = "Imagesource" Src = "Hanjiaren.jpg" Alt = "Canvas source" / >

The javascript code for retrieving an image object from an html img object is as follows:

VaR image = Document. getelementbyid ( "Imagesource" );

The code for drawing the image in the canvas object is as follows:

Context. drawimage (image, 0, 0 );

The code for retrieving image pixel data from a canvas object is as follows:

VaR canvasdata = context. getimagedata (0, 0, canvas. Width, canvas. Height );

The code for reading pixel values and implementing grayscale calculation is as follows:

For (VAR x = 0; x <canvasdata. width; X ++ ){
For (Var y = 0; y <canvasdata. height; y ++ ){

// Index of the pixel in the array
VaR idx = (x + y * canvasdata. width) * 4;
VaR r = canvasdata. Data [idx + 0];
VaR G = canvasdata. Data [idx + 1];
VaR B = canvasdata. Data [idx + 2];

// Calculate gray scale value
VaR gray =. 299 * r +. 587 * g +. 114 * B;

// Assign gray scale value
Canvasdata. Data [idx + 0] = gray; // RED CHANNEL
Canvasdata. Data [idx + 1] = gray; // Green Channel
Canvasdata. Data [idx + 2] = gray; // Blue channel
Canvasdata. Data [idx + 3] = 255; // Alpha channel

// Add black border
If (X <8 | Y <8 | x> (canvasdata. Width-8) | Y> (canvasdata. Height-8 ))
{
Canvasdata. Data [idx + 0] = 0;
Canvasdata. Data [idx + 1] = 0;
Canvasdata. Data [idx + 2] = 0;
}
}
}

The formula for calculating the gray level is gray color = 0.299 × red color + 0.578 × green color + 0.114 * blue color.

The read pixel values are in the red color, green color, blue color, and alpha channel order.

The processed data must be reloaded to the canvas. The Code is as follows:

Context. putimagedata (canvasdata, 0, 0 );

ProgramThe final effect is as follows:

CompleteSource codeAs follows:

<HTML>
<Head>
<SCRIPT>
Window. onload = Function (){
VaR canvas = Document . Getelementbyid ( "Mycanvas" );
VaR image = Document . Getelementbyid ( "Imagesource" );

// Re-size the canvas deminsion
Canvas. width = image. width;
Canvas. Height = image. height;

// Get 2d render object
VaR context = canvas. getcontext ( "2D" );
Context. drawimage (image, 0, 0 );
VaR canvasdata = context. getimagedata (0, 0, canvas. Width, canvas. Height );
Alert (canvasdata. width. Tostring ());
Alert (canvasdata. Height. tostring ());

// Gray Filter
For (VAR x = 0; x <canvasdata. width; X ++ ){
For (Var y = 0; y <canvasdata. height; y ++ ){

// Index of the pixel In The Array
VaR idx = (x + y * canvasdata. width) * 4;
VaR r = canvasdata. Data [idx + 0];
VaR G = canvasdata. Data [idx + 1];
VaR B = canvasdata. Data [idx + 2];

// Calculate gray scale value
VaR gray =. 299 * r +. 587 * g +. 114 * B;

// Assign gray scale value
Canvasdata. Data [idx + 0] = gray; // RED CHANNEL
Canvasdata. Data [idx + 1] = gray; // Green Channel
Canvasdata. Data [idx + 2] = gray; // blue channel
Canvasdata. Data [idx + 3] = 255; // alpha channel

// Add black border
If (X <8 | Y <8 | x> (canvasdata. Width-8) | Y> (canvasdata. Height-8 ))
{
Canvasdata. Data [idx + 0] = 0;
Canvasdata. Data [idx + 1] = 0;
Canvasdata. Data [idx + 2] = 0;
}
}
}
Context. putimagedata (canvasdata, 0, 0); // At coords 0, 0
};
</SCRIPT>
</Head>
<Body>
<H2> Hello world! </H2>
"Imagesource" Src = "Hanjiaren.jpg" Alt = "Canvas source" />
<Br/>
<Canvas id = "Mycanvas" > Gray Filter </Canvas>
</Body>
</Html>

The file in the code can replace any image file you want to see

HTML5 is amazing. The program passed the test in the Google browser,

The last piece of advice: Never try to run the above Code locally. Google's security check will automatically block the reading and writing of non-domain files from the browser.

It is best to view the effect from Google's browser after it is published on tomcat or any Web container server.

This article from jia20003 blog, original address: http://blog.csdn.net/jia20003/article/details/7228464

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Canvas, HTML5 component, implements Image Grayscale

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support