I am currently working on a simple application that applies image filters to images. Below is the code I have written for this purpose.
class ImageUtil {
static getCanvas(width, height) {
var canvas = document.querySelector("canvas");
canvas.width = width;
canvas.height = height;
return canvas;
}
static getPixels(image) {
var canvas = ImageUtil.getCanvas(image.width, image.height);
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
return context.getImageData(0, 0, canvas.width, canvas.height);
}
static putPixels(imageData, width, height) {
var canvas = ImageUtil.getCanvas(width, height);
var context = canvas.getContext('2d');
context.putImageData(imageData, 0, 0);
}
}
function getRandomNumber(minimum, maximum) {
return Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
...
function applyRedFilter(image, adjustment){
var pixels = ImageUtil.getPixels(image);
var length = pixels.data.length;
var data = pixels.data;
for(var index = 0; index < length; index += 4) {
data[index] += adjustment;
}
ImageUtil.putPixels(pixels, image.width, image.height);
}
...
$(document).ready(function() {
var catImage = new Image();
catImage.src = "img/cat.jpg";
applyRedFilter(catImage, 50);
});
Upon launching the webpage, Chrome displays an error message which can be viewed at this link.
This error seems puzzling considering there is only a semicolon at the end of the function.
If you have any solutions to resolve this issue, please let me know. The top image does not show any visible change after applying the filter as shown in these two cat pictures.