Resizing and Cropping Images with Canvas

In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications. In a real world example a website or app might use a technique like this to resize and frame a profile picture before uploading. Whilst we could do this on the server, it would require the transfer of a potentially large file, which is slow. Instead we can resize the image on the client side before uploading it, which is fast. We do this by creating an HTML5 <canvas> element and drawing the image to the canvas at a particular size, then extracting the new image data from the canvas as a data URI. Most browsers have good support for these methods, so you can probably use this technique right now, however just be aware of some limitations unrelated to browser support such as quality and performance. Resizing very large images can cause the browser to slow down or in some cases, even crash. It makes sense to set reasonable limits on the file size just as you would when uploading a file. If quality is important you may find the resized image looks undesirable due to how the browser resampled it. There are some techniques to improve the quality of images downscaled with canvas, but they are not covered in this tutorial. Take a look at the final result in this demo or download the ZIP file. With that in mind, let’s get started! The Markup In our demo we’re going...

Sarah Horton and Steve Faulkner – HTML5 Accessibility

[ Transcript Available ] Web accessibility takes place on a foundation of technologies, the most common of which are developed and maintained by the Worldwide Web Consortium, or W3C. Its success is dependent on how well these underlying technologies support accessible user experiences. Fortunately for us, people like Steve Faulkner devote much of their time to ensure technology specifications, such as HTML5, include the hooks that make it possible to build an accessible and enjoyable user experience for everyone. Including people who use assistive technologies, such as screen reader and screen magnification software, and different display and interaction modalities, such as user stylesheets and keyboard navigation. The web was created with accessibility as part its framework. Steve’s focus is to ensure accessibility remains a fundamental component of the web’s foundational technologies. Steve is co-editor of the HTML5 specification. He has been closely involved in other W3C specifications development, including the Accessible Rich Internet Applications (WAI-ARIA) specification. In this podcast Steve joins Sarah Horton to tell us about: The current status of the HTML5 specification How WAI-ARIA and HTML5 work together to support accessibility How accessibility is integrated into specification development What it’s like to work on a W3C specification Steve Faulkner has been working in accessibility since 2001, first with Vision Australia and currently with The Paciello Group (TPG), where he is Principal Accessibility Engineer. He is involved with several W3C working groups, including the HTML Working Group and the Protocols and Formats Working Group, and is author of the helpful resource, Techniques for providing useful text alternatives. He is also creator and lead developer of the Web Accessibility...

2013 on Ustream

Excellent load transitions and parallax scrolling as you navigate through this 2013 annual report for UStream. The statistics are presented well, not to mention they are impressive themselves. The 'Tech Insights' section is quite unique with it's left and right scroll function just for that...

Wastronauts Media

Some neat CSS load transitions in this responsive one pager for 'Wastronauts Media' from Southampton Hampshire, UK. Such an awesome touch with the browser tab saying "Are you still there?" when you start browsing other tabs. Although not tested, I see there is an option to send them a voice message on the site, nice...

How to Choose the Right UX Metrics for Your Product

Digital Telepathy have collaborated with Google Ventures to bring us this colorful one pager that comes to life as you scroll down and gives us guidelines on 'How to Choose the Right UX Metrics for Your Product'. Some real impressive CSS transitions and...