The W3C outlined a couple of new methods for the Canvas element called getImageData() and putImageData(). getImageData() is a pretty neat method for image and video manipulation. These new methods allow developers to write scripts to adjust image data similar to Adobe Pixel Bender where you can manipulate images on a pixel basis. This article is a basic demonstration of the getImageData() and putImageData() method.
At the end of this demonstration we should have a simple picture where we can adjust the contract, brightness and opacity values.
Link http://labs.josh-ho.com/getImageData/
We will first start off by loading in an image into our canvas. In order to use the getImageData() method we need to load the image into the canvas. In order to do so, we will use Javascript to create an image element, load in the image, then draw the image into the canvas.
<canvas id="imageCanvas">Your Browser cannot render the Canvas element</canvas>
<script>
var canvasObj = document.getElementById( 'imageCanvas' );
var canvasContext = canvasObj.getContext( '2d' );
var imageObj = document.createElement( 'img' );
imageObj.addEventListener( 'load', function() {
canvasObj.width = this.width;
canvasObj.height = this.height;
canvasContext.drawImage( this, 0, 0 );
});
imageObj.src = 'photo.jpg';
</script>
Now if we upload the HTML we should see the image loaded onto the browser.
Lets add a slider to the HMTL code so we can adjust the Opacity levels of the image. Form sliders are new to HTML, and should suffice for our demonstration. To display a slider we need a form element and set the input type to ‘range’. I am setting the minimum and maximum value so that it would correspond to the alpha values of the image.
<form name="manipulationForm" id="manipulationForm">
<p>Opacity:</p>
<input type="range" id="opacitySliderObj" min="0" max="255" value="255" style="vertical-align:middle;"/> <p id="opacityValue" style="display:inline;">100%</p>
</form>
We are going to add some javascript functionality so that these sliders can function. I added a
tag so when we adjust the value of the slider we can see the percentage displayed. We will need to add an event listener to listen for when the user changes the slider value. When the slider has changed, we want to show the change in colour percentages so we will adjust the tag accordingly.
var opacityValue = document.getElementById( 'opacitySliderObj' ).value;
document.getElementById( 'manipulationForm' ).addEventListener( 'change', formEventListener, false );
function formEventListener( evt ) {
opacityValue = evt.target.value;
document.getElementById( 'opacityValue' ).innerHTML = String(Math.floor((evt.target.value / evt.target.max) * 100)) + "%";
}
I added a new variable – opacityValue to the variable list so that we can store the value of the slider for the image manipulation process.
We will now need the image data information before we can start to manipulate the pixel information. To do so we will use the getImageData() method which can be accessed throught the canvas context object. I placed this line of code inside the image ‘load’ event listener so that it will grab the image data as soon as the image is loaded into the canvas.
var imageArray;
imageArray = canvasContext.getImageData( 0, 0, canvasContext.canvas.width, canvasContext.canvas.height );
You will need to define the x, y, width, and height of the data to collect. Now that we have the image data stored, we can write a function to loop through the data and adjust each pixel accordingly. Each pixel is broken up into 4 values – one for the red, green, blue and alpha values. In this demonstration we only want to adjust the alpha value of each pixel. We will adjust the alpha values based on the slider’s value (stored in the opacityValue variable) and return the image array back.
function adjustImage( iArray ){
var imageData = iArray.data;
var i;
for( i = 0; i < imageData.length; i+= 4 ) {
imageData[i+3] = opacityValue;
}
return iArray;
}
We need to update the context with the new pixel data. The w3C have defined another method called putImageData() which would take the image data and replace the canvas context with the new data. I placed this call inside the formEventListener() function so that you will see the changes at run time.
canvasContext.putImageData( adjustImage( imageArray ), 0, 0 );
And there you have it we have a basic opacity change using the new methods
Feel free to look at my demonstration here:
link http://labs.josh-ho.com/getImageData/