<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <br /> <div class="col-md-6"> </div> <div class="col-md-6"> </div> </div> </body> </html>
var imageObject = document.getElementById('image'); var filter = false; function convertToGrayScale(image){ var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var width = image.width; var height = image.height; canvas.width = width; canvas.height = height; context.drawImage(image, 0, 0); var pixels = context.getImageData(0, 0, width, height); for(var i=0; i<pixels.height; i++){ for(var j=0; j<pixels.width; j++){ var x = (i*4) * pixels.width + j * 4; var total = (pixels.data[x] * pixels.data[x + 1] + pixels.data[x + 2]) / 3; pixels.data[x] = total; pixels.data[x + 1] = total; pixels.data[x + 2] = total; } } context.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); return canvas.toDataURL(); } function changeImage(){ if(filter === false){ imageObject.src = convertToGrayScale(imageObject); filter = true; } } function revertImage(){ imageObject.src = "image.jpg"; filter = false; }