Skip to content

Instantly share code, notes, and snippets.

@js-rook
Created April 17, 2017 15:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save js-rook/5b408345134b7784d8fd72cf5a2279f1 to your computer and use it in GitHub Desktop.
Save js-rook/5b408345134b7784d8fd72cf5a2279f1 to your computer and use it in GitHub Desktop.
<canvas id="canvas">canvas unsupported</canvas>
<script type="text/JavaScript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "PICTURE_NAME.jpg";
var width = canvas.width = img.width;
var height = canvas.height = img.height;
img.onload = function () {
ctx.drawImage(img, 0, 0);
var src = ctx.getImageData(0, 0, width, height)
var dst = ctx.createImageData(width, height);
for (var i = 0; i < height; i++) {
for (var j = 0; j < width; j++) {
var pix = (i*width + j) * 4;
/* Gray */
var gray = 0.299 * src.data[pix] + 0.587 * src.data[pix+1] + 0.114 * src.data[pix+2];
for (var k = 0; k < 3; k++) {
dst.data[pix+k] = src.data[pix+k] = gray;
}
/* Sepia */
dst.data[pix] = dst.data[pix] / 255 * 240;
dst.data[pix+1] = dst.data[pix+1] / 255 * 200;
dst.data[pix+2] = dst.data[pix+2] / 255 * 148;
dst.data[pix+3] = src.data[pix+3];
}
}
ctx.putImageData(dst, 0, 0);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment