INPUT: OUTPUT: |
<img src="scream.jpg" id="scream" width="220" height="277"><br> <br><input type="button" onClick="invert();" value="Invert"><br><br> <b>OUTPUT:</b><br> <canvas id="myCanvas" style="width: 220px; height: 277px;" width="220" height="277"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,0,0); var imgData=ctx.getImageData(0,0,c.width,c.height); function invert(){ // invert colors for (var i=0;i<imgData.data.length;i+=4){ imgData.data[i]=255-imgData.data[i]; imgData.data[i+1]=255-imgData.data[i+1]; imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; } ctx.putImageData(imgData,0,0); } </script> |