Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use the HTML5 component Canvas to achieve image grayscale related knowledge points, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you have something to learn after reading this article, let's take a look at it.

Create a new html page and add it between the body tags

Copy the code

The code is as follows:

Gray filter

Add the simplest JavaScript script

Copy the code

The code is as follows:

_ window.onload = function () {

Var canvas = document.getElementById ("myCanvas")

/ / TODO: do something here

}

The code to get some context of the repositioning object from the Canvas object is as follows:

Copy the code

The code is as follows:

Var context = canvas.getContext ("2d")

The html code to add an image to the html page is as follows

Copy the code

The code is as follows:

The javascript code to get an image object from a html img object is as follows:

Copy the code

The code is as follows:

Var image = document.getElementById ("imageSource")

The code to depict the resulting image in the canvas object is as follows:

Copy the code

The code is as follows:

Context.drawImage (image,0,0)

The code to get image encoding data from the Canvas object is as follows:

Copy the code

The code is as follows:

Var canvasData = context.getImageData (0recovery0canvas.width.canvas.height)

The code for reading the value and realizing the grayscale calculation is as follows:

Copy the code

The code is as follows:

For (var x = 0; x

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.