An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
Some of Our Sources
- Engadget
- Mashable
- The Logo Smith
- Six Revisions
- Abduzeedo
- Creative Curio
- Naldz Graphics
- My Ink Blog
- Android Dissected
- The Verge
Help Webnuz
Referal links:
June 21, 2011 05:30 pm GMT
Original Link: http://feedproxy.google.com/~r/nettuts/~3/XyTebM-AkkM/
How to Transition an Image from B&W to Color with Canvas
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!
Original Link: http://feedproxy.google.com/~r/nettuts/~3/XyTebM-AkkM/
Share this article:
Tweet
View Full Article
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code