Most medical images are grayscale images. This exercise also examines the potential of the hmtl5 canvas API in medical image processing.
The following is a simple histogram and grayscale inversion case. The principle is to open a GIF or JPG 256-level grayscale image in the canvas and obtain the pixel matrix through context. getimagedata. Then, calculate the pixel matrix to generate a histogram. Alternatively, use context. putimagedata () to display the matrix again after the gray scale inversion. By the way, when I draw a histogram, I draw a line directly on the pixel matrix of imagedata without using APIs such as lineto, I found that the edges of the lines drawn by the latter were blurred to make people look comfortable, but they should not allow excessive pixels in science or medicine.
The following code can be directly copied to a local HTML file, and then opened with ie9/opera10/etc. For the images of CT, SMPTE, and girls wearing hats in the dimensions of 512*512, you can download them on the Internet. The famous girl wearing a hat can be found with the "grayscale image" as the keyword.
<! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <title> grayscale image Test </title> <br/> <style type = "text/CSS"> <br/> table {margin: auto ;}< br/> </style> <br/> </pead> <br/> <body style = "background-color: # eeeeee; "mce_style =" background-color: # eeeeee; "> <br/> <Table> <br/> <tr align =" center "> <TD colspan =" 2 "> <p> grayscale image test </p> <HR Height = "1px"/> </TD> <br/> </tr> <br/> <TD align = "right"> <br/> <button id = "invertimage" onclick = "invertimage (); return true; "> invert </button> <br/> <button id =" invertimage "onclick =" LoadImage (girluri); Return true; "> Reset </button> <br/> <button id =" smpteimage "onclick =" LoadImage (smpteuri); Return true; "> SMPTE </button> <br/> <button id =" ctimage "onclick =" LoadImage (cturi); Return true; "> CT </button> <br/> </TD> <br/> </tr> <br /> <tr align = "center"> <br/> <TD> <canvas id = "imageviewer" width = "512px" Height = "512px" style = "border: 1px solid; "mce_style =" border: 1px solid; "/> </TD> <br/> <TD> <canvas id =" statistic "width =" 256 "Height =" 512px "style =" border: 1px solid; "mce_style =" border: 1px solid; "/> </TD> <br/> </tr> <br/> <tr align =" center "> <TD colspan =" 2 "> May, 2011, lifegame@263.net </TD> <br/> </tr> <br/> </table> <br/> </body> <br/> <SCRIPT> <br/> vaR cturi = 'ct.jpg '; <br/> var smpteuri = 'smpte.gif '; <br/> var girluri = 'dmtjc5016.gif'; <br/> var icanvas = document. getelementbyid ('imageviewer '); <br/> var icanvaswidth = parseint (icanvas. getattribute ("width"); <br/> var icanvasheight = parseint (icanvas. getattribute ("height"); <br/> var icontext = icanvas. getcontext ('2d '); <br/> var scanvas = document. getelementbyid ('statistic '); <br/> var scanvaswidth = parseint (scanvas. getattribute ("width"); <br/> var scanvasheight = parseint (scanvas. getattribute ("height"); <br/> var scontext = scanvas. getcontext ('2d '); </P> <p> function LoadImage (URI) {<br/> var IMG = new image (); <br/> IMG. src = URI; <br/> IMG. onload = function () {<br/> icontext. drawimage (IMG, 0, 0); <br/> loadstatistic (); <br/>}</P> <p> function loadstatistic () {<br/> var imgdata = icontext. getimagedata (0, 0, icanvaswidth, icanvasheight); <br/> var pixtotal = imgdata. height * imgdata. width; <br/> var pixcount = []; <br/> for (I = 0; I <256; I ++) pixcount [I] = 0; <br/> for (y = 0; y for (x = 0; x var Pv = math. min (255, imgdata. data [(y * imgdata. width + x) * 4]); <br/> pixcount [PV] ++; <br/>}< br/> scontext. clearrect (0, 0, scanvaswidth, scanvasheight); <br/> var stimg = scontext. getimagedata (256, scanvaswidth, scanvasheight); <br/> for (x = 0; x <; X ++) {<br/> var c = pixcount [x]; <br/> var H = stimg. height-math. round (stimg. height * C/pixtotal); <br/> for (y = H; y <stimg. height; y ++) {<br/> var I = (y * stimg. width + x) * 4; <br/> stimg. data [I] = stimg. data [I + 1] = stimg. data [I + 2] = 0; <br/> stimg. data [I + 3] = 255; <br/>}< br/> scontext. putimagedata (stimg, 0, 0); <br/>}</P> <p> function invertimage () {<br/> var imgdata = icontext. getimagedata (0, 0, icanvaswidth, icanvasheight); <br/> for (y = 0; y for (x = 0; x var I = (y * imgdata. width + x) * 4; <br/> var Pv = math. ABS (255-imgdata.data [I]); <br/> imgdata. data [I] = imgdata. data [I + 1] = imgdata. data [I + 2] = PV; <br/>}< br/> icontext. putimagedata (imgdata, 0, 0); <br/> loadstatistic (); <br/>}</P> <p> window. addeventlistener ("LOAD", LoadImage (girluri), true); <br/> </SCRIPT> <br/> <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
