How to Transition an Image from B&W to Color with Canvas
Tutorial Details
- Technologies Discussed: Canvas, CSS3
- Difficulty: Moderate
- Format: 8 Minute Screencast
Recently, in the CodeCanyon forums, a question was brought up: “How do I transition an image from black and white, to color — using only one image?” Unfortunately, at this point in time, it’s not possible with CSS. However, if we’re creative with JavaScript and canvas, we can create a solution relatively easily. I’ll show you how in today’s video tutorial!
Final Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
/* Setup...not important. */
.img-wrap {
width: 500px;
margin: 100px auto;
position: relative;
cursor: pointer;
}
/* Handles animation of b*w to color */
canvas {
position: absolute;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
canvas:hover {
opacity: 0;
}
/* If you MUST have IE support */
#cvs-src {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
#cvs-src:hover {
filter: none;
}
</style>
</head>
<body>
<div class="img-wrap">
<img id="cvs-src" src="your-image.jpg" />
<canvas width=500 height=500></canvas>
</div>
<script>
(function() {
var supportsCanvas = !!document.createElement('canvas').getContext;
supportsCanvas && (window.onload = greyImages);
function greyImages() {
var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),
img = document.getElementById("cvs-src"),
imageData, px, length, i = 0,
grey;
ctx.drawImage(img, 0, 0);
// Set 500,500 to the width and height of your image.
imageData = ctx.getImageData(0, 0, 500, 500);
px = imageData.data;
length = px.length;
for ( ; i < length; i+= 4 ) {
grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
px[i] = px[i+1] = px[i+2] = grey;
}
ctx.putImageData(imageData, 0, 0);
}
})();
</script>
</body>
</html>
Conclusion
So what do you think? Would you use this technique in your own projects? Can you think of a better way that doesn’t involve using a server-side language or sprites? Let me know in the comments!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
it doesn’t work if there is multiple images the effect works for only 1st image not other images
plz help with it i m waiting for reply………. thanx