javascript - If statement changing image to greyscale -
currently have image converted greyscale, on click of button. need able remove function either using same button or button. thought possible using if statement although im not sure how this.
<html> <body> <script> function greyscale(){ //get canvas var canvas = document.getelementbyid("canvas"); //get context property var ctx = canvas.getcontext('2d'); //get image var image = document.getelementbyid("imgsrc"); //draw image canvas ctx.drawimage(image,0,0); //get image data var imagedata = ctx.getimagedata(0,0,130,130); //get pixel data var px = imagedata.data; //get entire length of pixel data var length = px.length; //loop , manipulate pixels for(var i=0;i<length;i+=4){ var redpx = px[i]; var greenpx = px[i+1]; var bluepx = px[i+2]; var alphapx = px[i+3]; //create greyscale sub pixel var greyscale = redpx*.3 + greenpx * .59 + bluepx * .11; //store each subpixel greyscale subpixel px[i] = greyscale; px[i+1] = greyscale; px[i+2] = greyscale; } //put manipulated image data canvas ctx.putimagedata(imagedata,0,0); } </script><img src="flower.jpg" id="imgsrc"/> <canvas id="canvas" width="130" height="130"></canvas> <br> </script> <input id="btngreyscale" type="button" value="greyscale" onclick="greyscale();" /> <input id="btngreyscaleoff" type="button" value="greyscale off" onclick="loadimage();" /> <br> <input type="radio" name="zing" id="on" checked/>on <input type="radio" name="zing" id="off"/>off <script type="text/javascript"> if (document.getelementbyid('btngreyscale').checked) { alert('on'); } else { (document.getelementbyid('btngreyscaleoff').checked) alert('off'); } </script> </body> </html>
as roman hocke said, not able use greyscale turn colorful image, since threw information away. go colorful image have redraw first image.
so in code be:
(document.getelementbyid('btngreyscaleoff').checked) alert('off'); ctx.drawimage(image,0,0); }
this can done because have saved image object in dom.
Comments
Post a Comment