Topics in this article
Valentine's Day on the internet to see the foreign JS cattle using HTML5 technology to achieve a rose, deeply feel the strong HTML5 technology. In the attitude of learning to see the source Code of the Roses, which used the HTML5 technology is the canvas label, so the idea of a present, want to try to do image processing, the results are successful, once again introduce experience.
The idea of this article is to obtain a picture with a verification code, and then grayscale operation, after the completion of the use of the Otsu algorithm for binary operation, the final output two value of the picture, which is as follows:
Figure 1
Finally, friendship reminds me that HTML5 technology does not support or is not fully supported under IE, so if you want to develop HTML5, please use Firefox or Google and other supported browsers.
Display image
Introduce the canvas label to the page and set its ID property to use getElementById () in the script to get the handle to the label.
function DrawImage () {
Get a handle to a label
var canvas = document.getElementById (' Mycanvaselt ');
Get the context of a drawing
var ctx = Canvas.getcontext (' 2d ');
Create a new image in order to read the picture
var img=new Image ()
Img.src= "Image/verifycode.jpg"
Draw a picture from image to canvas
Ctx.drawimage (img,0,0);
}
The above code realizes the display of the image in Figure 1.
Gray-valued images
The process of gray-value image is to set the RGB three attributes of an image to a consistent process, that is, to remove the color information of the image, using gray information to express the content of the image. There are several algorithms for color turn grayscale images:
1. Weighted average method. Gray = r*0.299 + g*0.587 + b*0.114
2. Averaging method. Gray = (R + G + B)/3
3. Maximum value method. Gray = Max (r,g,b)
Where r,g,b represents the value of three components of the image, the comparison of the above three algorithms is not explained here, detailed information see color image grayscale. This article uses the first method.
Grayscale of color image
function Processtograyimage () {
var canvas = document.getElementById (' Mycanvaselt ');
var ctx = Canvas.getcontext (' 2d ');
Get Image data
var canvasdata = ctx.getimagedata (0, 0, canvas.width, canvas.height);
This loop is the acquisition of each point of the image, and the grayscale is set to the original image after the grayscale is computed
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 * canvas.width) * 4;
The RGB values
var r = canvasdata.data[idx + 0];
var g = Canvasdata.data[idx + 1];
var B = Canvasdata.data[idx + 2];
Update image data
var Gray = Calculategrayvalue (R, G, b);
Canvasdata.data[idx + 0] = Gray;
Canvasdata.data[idx + 1] = Gray;
Canvasdata.data[idx + 2] = Gray;
}
}
Ctx.putimagedata (canvasdata, 0, 0);
}
Calculates the grayscale value of an image with the formula: Gray = r*0.299 + g*0.587 + b*0.114
function Calculategrayvalue (rvalue,gvalue,bvalue) {
return parseint (RValue * 0.299 + gvalue * 0.587 + bValue * 0.114);
}
Otsu algorithm
The specific theory about the Otsu algorithm is not explained here. This is a binary fast image segmentation algorithm. The theory of the algorithm is explained in detail later. The process of implementing using the JavaScript algorithm is as follows:
One-dimensional otsu image processing algorithm
function Otsualgorithm () {
var m_pfstdhistogram = new Array ();//indicates the probability of distribution points for Gray values
var m_pfgrayaccu = new Array ();//Each of these values equals the sum of the values from 0 to the current subscript in M_pfstdhistogram
var m_pfgrayave = new Array ();//each value equals the sum of the subscript from 0 to the current specified subscript value in M_pfstdhistogram
The Var m_paverage=0;//value is the distribution probability of each point in the M_pfstdhistogram "256" * The sum of the current subscript
var m_phistogram = new Array ();//Grayscale histogram
var i,j;
var temp=0,fmax=0;//defines a temporary variable and the value of a maximum inter-class variance
var Nthresh = 0;//Optimal threshold
Get information on grayscale images
var imageinfo = Getgrayimageinfo ();
if (Imageinfo = = null) {
Window.alert ("The image hasn't turned into a grayscale image!") ");
Return
}
Initialize each parameter
for (i=0; i<256; i++) {
M_pfstdhistogram[i] = 0;
M_pfgrayaccu[i] = 0;
M_pfgrayave[i] = 0;
M_phistogram[i] = 0;
}
Get image information
var canvasdata = imageinfo[0];
Get the pixels of an image
var pixels = canvasdata.data;
The following statistical image of the gray distribution information
for (i=0; i<pixels.length; i+=4) {
Gets the pixel value of R because the grayscale image is r=g=b, so take the first one
var r = Pixels[i];
m_phistogram[r]++;
}
The probability of each gray point appearing in the image is calculated below
var size = Canvasdata.width * canvasdata.height;
for (i=0; i<256; i++) {
M_pfstdhistogram[i] = m_phistogram[i]/size;
}
The values for M_PFGRAYACCU and M_pfgrayave and M_paverage are now calculated
for (i=0; i<256; i++) {
for (j=0; j<=i; J + +) {
Calculation m_pfgaryaccu[256]
M_pfgrayaccu[i] + = m_pfstdhistogram[j];
Calculation m_pfgrayave[256]
M_pfgrayave[i] + = J * M_pfstdhistogram[j];
}
Calculate average
M_paverage + = i * m_pfstdhistogram[i];
}
Starting with the Ostu value, calculate the Ostu from 0-255 values and look for the maximum value as the split threshold.
for (i = 0; i < i++) {
/(M_pfgrayaccu[i] * (1-m_pfgrayaccu[i]));
if (Temp > FMax)
{
FMax = temp;
Nthresh = i;
}
}
for (i=0; i<canvasdata.width; i++) {
for (j=0; j<canvasdata.height; J + +) {
Get the position of each point
var ids = (i + j*canvasdata.width);
Gets the value of the R component of the pixel
var r = Canvasdata.data[ids];
Compared to the threshold value, if it is less than the threshold, then the pity Dorado is set to 0, otherwise 255
var Gray = r>nthresh?255:0;
Canvasdata.data[ids+0] = Gray;
Canvasdata.data[ids+1] = Gray;
Canvasdata.data[ids+2] = Gray;
}
}
Show binary Images
var newimage = document.getElementById (' Mycanvasthreshold '). GetContext (' 2d ');
Newimage.putimagedata (canvasdata,0,0);
}
Get information about grayscale images of an image
function Getgrayimageinfo () {
var canvas = document.getElementById (' Mycanvaselt ');
var ctx = Canvas.getcontext (' 2d ');
var canvasdata = ctx.getimagedata (0, 0, canvas.width, canvas.height);
if (canvasdata.data.length==0) {
return null;
}
return [CANVASDATA,CTX];
}
The gray image is processed below and the target information is segmented.
function Dividedtarget () {
Read binary image information
var imageinfo = document.getElementById (' Mycanvasthreshold ');
if (Imageinfo = = null) {
Window.alert ("No two value image information found!") ");
Return
}
Get context
var ctx = Imageinfo.getcontext (' 2d ');
Get Image data
var canvasdata = imageinfo.getimagedata (0, 0, ctx.width, ctx.height);
var newvanvasdata = Canvasdata;
Get the width and height of the image
var width = canvasdata.width;
var height = canvasdata.height;
Algorithm start
var cursor = 2;
for (var x=0; x<width; x + +) {
for (var y=0; y
Get the position of each point
var ids = (x + y*canvasdata.width);
Gets the value of the R component of the pixel
var r = Canvasdata.data[ids];
If the target point
if (r==0) {
}
}
}
}
The implementation of the algorithm gives a detailed comment, if there is unclear where you can leave a message or email consultation, it is worth noting that because JS does not allow cross-domain access features, to successfully run the above code, it must be run on a server, such as Apache.
Code detailed list<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>gray.html</title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--<link rel= "stylesheet" type= "Text/css" href= "./styles.css" >-->
<script type= "Text/javascript" >
function Processtograyimage () {
var canvas = document.getElementById (' Mycanvaselt ');
var ctx = Canvas.getcontext (' 2d ');
var img=new Image ()
Img.src= "Image/verifycode.jpg"
Ctx.drawimage (img,0,0);
var canvasdata = ctx.getimagedata (0, 0, canvas.width, canvas.height);
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 * canvas.width) * 4;
The RGB values
var r = canvasdata.data[idx + 0];
var g = Canvasdata.data[idx + 1];
var B = Canvasdata.data[idx + 2];
Update the values of the pixel;
var Gray = Calculategrayvalue (R, G, b);
Canvasdata.data[idx + 0] = Gray;
Canvasdata.data[idx + 1] = Gray;
Canvasdata.data[idx + 2] = Gray;
}
}
Ctx.putimagedata (canvasdata, 0, 0);
}
Calculates the grayscale value of an image with the formula: Gray = r*0.299 + g*0.587 + b*0.114
function Calculategrayvalue (rvalue,gvalue,bvalue) {
return parseint (RValue * 0.299 + gvalue * 0.587 + bValue * 0.114);
}
One-dimensional otsu image processing algorithm
function Otsualgorithm () {
var m_pfstdhistogram = new Array ();//indicates the probability of distribution points for Gray values
var m_pfgrayaccu = new Array ();//Each of these values equals the sum of the values from 0 to the current subscript in M_pfstdhistogram
var m_pfgrayave = new Array ();//each value equals the sum of the subscript from 0 to the current specified subscript value in M_pfstdhistogram
The Var m_paverage=0;//value is the distribution probability of each point in the M_pfstdhistogram "256" * The sum of the current subscript
var m_phistogram = new Array ();//Grayscale histogram
var i,j;
var temp=0,fmax=0;//defines a temporary variable and the value of a maximum inter-class variance
var Nthresh = 0;//Optimal threshold
Get information on grayscale images
var imageinfo = Getgrayimageinfo ();
if (Imageinfo = = null) {
Window.alert ("The image hasn't turned into a grayscale image!") ");
Return
}
Initialize each parameter
for (i=0; i<256; i++) {
M_pfstdhistogram[i] = 0;
M_pfgrayaccu[i] = 0;
M_pfgrayave[i] = 0;
M_phistogram[i] = 0;
}
Get image information
var canvasdata = imageinfo[0];
Get the pixels of an image
var pixels = canvasdata.data;
The following statistical image of the gray distribution information
for (i=0; i<pixels.length; i+=4) {
Gets the pixel value of R because the grayscale image is r=g=b, so take the first one
var r = Pixels[i];
m_phistogram[r]++;
}
The probability of each gray point appearing in the image is calculated below
var size = Canvasdata.width * canvasdata.height;
for (i=0; i<256; i++) {
M_pfstdhistogram[i] = m_phistogram[i]/size;
}
The values for M_PFGRAYACCU and M_pfgrayave and M_paverage are now calculated
for (i=0; i<256; i++) {
for (j=0; j<=i; J + +) {
Calculation m_pfgaryaccu[256]
M_pfgrayaccu[i] + = m_pfstdhistogram[j];
Calculation m_pfgrayave[256]
M_pfgrayave[i] + = J * M_pfstdhistogram[j];
}
Calculate average
M_paverage + = i * m_pfstdhistogram[i];
}
Starting with the Ostu value, calculate the Ostu from 0-255 values and look for the maximum value as the split threshold.
for (i = 0; i < i++) {
/(M_pfgrayaccu[i] * (1-m_pfgrayaccu[i]));
if (Temp > FMax)
{
FMax = temp;
Nthresh = i;
}
}
for (i=0; i<canvasdata.width; i++) {
for (j=0; j<canvasdata.height; J + +) {
Get the position of each point
var ids = (i + j*canvasdata.width);
Gets the value of the R component of the pixel
var r = Canvasdata.data[ids];
Compared to the threshold value, if it is less than the threshold, then the pity Dorado is set to 0, otherwise 255
var Gray = r>nthresh?255:0;
Canvasdata.data[ids+0] = Gray;
Canvasdata.data[ids+1] = Gray;
Canvasdata.data[ids+2] = Gray;
}
}
Show binary Images
var newimage = document.getElementById (' Mycanvasthreshold '). GetContext (' 2d ');
Newimage.putimagedata (canvasdata,0,0);
}
Get information about grayscale images of an image
function Getgrayimageinfo () {
var canvas = document.getElementById (' Mycanvaselt ');
var ctx = Canvas.getcontext (' 2d ');
var canvasdata = ctx.getimagedata (0, 0, canvas.width, canvas.height);
if (canvasdata.data.length==0) {
return null;
}
return [CANVASDATA,CTX];
}
The gray image is processed below and the target information is segmented.
function Dividedtarget () {
Read binary image information
var imageinfo = document.getElementById (' Mycanvasthreshold ');
if (Imageinfo = = null) {
Window.alert ("No two value image information found!") ");
Return
}
Get context
var ctx = Imageinfo.getcontext (' 2d ');
Get Image data
var canvasdata = imageinfo.getimagedata (0, 0, ctx.width, ctx.height);
var newvanvasdata = Canvasdata;
Get the width and height of the image
var width = canvasdata.width;
var height = canvasdata.height;
Algorithm start
var cursor = 2;
for (var x=0; x<width; x + +) {
for (var y=0; y
Get the position of each point
var ids = (x + y*canvasdata.width);
Gets the value of the R component of the pixel
var r = Canvasdata.data[ids];
If the target point
if (r==0) {
}
}
}
}
</script>
<body>
Original Image:<br/>
<br/>
Grayscale Image: <input type= "button" value= "Processing" onclick= "javascript:processtograyimage ();"/><br/>
<canvas id= "Mycanvaselt" width= "height=" ></canvas><br/>
Binary Image: <input type= "button" value= "binary" onclick= "Javascript:otsualgorithm ();"/><br/>
<canvas id= "Mycanvasthreshold" width= "height=" ></canvas><br/>
</body>
Summary NotesHTML5 image, picture processing "Turn"