I'm new to image manipulation with HTML5. I need some help to change the RGB values of an image to create different effects. Around the web I didn't find any straight forward tutorial about it. I've put together a bit of code to start with taken here and there on the web:
window.onload = function(){
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = "images/test.jpg";
};
function drawImage(imageObj){
var canvas = document.getElementById("mau");
var context = canvas.getContext("2d");
var destX = 1;
var destY = 1;
context.drawImage(imageObj, destX, destY);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var red = data[i]; // red
var green = data[i + 1]; // green
var blue = data[i + 2]; // blue
// i+3 is alpha (the fourth element)
}
// overwrite original image
context.putImageData(imageData, 0, 0);
}
At this stage the image is shown with no variation. How do I change the 3 variables R, G, B in order to enhance the blue channel for instance? And can someone please run me through the code to understand it better?
Thanks in advance Mauro
Here's a quick example . It swaps the red, green and blue components around:
for (var i = 0; i < data.length; i += 4) {
var red = data[i]; // red
var green = data[i + 1]; // green
var blue = data[i + 2]; // blue
// i+3 is alpha (the fourth element)
data[i] = green;
data[i + 1] = blue;
data[i + 2] = red;
}
The original image is from Wikipedia:
I would try EaselJS library.
You could use the ColorFilter
, ColorMatrix
and ColorMatrixFilter
to manipulate images. It's easy to alter the values, you can easily animate (transition) them, too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.