Tinted Image

by Louis Walch

HTML

<div class="item">
	<img width="372" height="372"...

CSS

CANVAS {
    width: 372px;
    height: 372px;
    margin-bottom: 10px;
    border: 1px solid red;
    display block;
}

JavaScript

var area     = $('.item');
var img      = $('IMG')[0];

var brightness;

var img       = $('IMG')[0];
var canvas    = document.createElement('canvas');
var imgCanvas = document.createElement('canvas');
var ctx       = canvas.getContext('2d');
var imgCtx    = canvas.getContext('2d');
var rgb       = {r:0,g:6,b:255};
var rgb_str   = "rgb(" + rgb.r +","+ rgb.g +","+ rgb.b +")";

canvas.width = img.width;
canvas.height = img.height;
imgCanvas.width = img.width;
imgCanvas.height = img.height;

ctx.fillStyle = rgb_str;
ctx.fillRect(0, 0, canvas.width, canvas.height);

var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = data.data;

imgCtx.drawImage(img, 0, 0, canvas.width, canvas.height);
var imgData = imgCtx.getImageData(0, 0, imgCanvas.width, imgCanvas.height);
var imgPixels = imgData.data;
for (i = _i = 0, _ref = imgPixels.length; _i <= _ref; i = _i += 4) {
  brightness = 0.34 * imgPixels[i] + 0.5 * imgPixels[i + 1] + 0.16 * imgPixels[i + 2];
  imgPixels[i] = brightness * pixels[i] / 255;
  imgPixels[i + 1] = brightness * pixels[i + 1] / 255;
  imgPixels[i + 2] = brightness * pixels[i + 2] / 255;
}
ctx.putImageData(imgData, 0, 0);
area.append(canvas);