Skip to main content

Reading Images and Data Using Canvas and JavaScript

By Patrick Catanzariti

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

In this video, I’ll take you on a journey through the basics of how to read in image data dynamically using JavaScript. Together we’ll explore how to read in image data in three different ways – from a specific filename on your server, using the HTML file upload field and via drag and drop into the window.

This video is one of the latest lessons from the course on “Manipulating and Using Images and Video Using JavaScript” by myself, Patrick Catanzariti. This course is available right now on SitePoint’s learning platform Learnable.com!

The canvas tag, video tag, and JavaScript are an incredible team that can bring a whole new level of possibilities to your web creations. In the “Manipulating and Using Images and Video Using JavaScript” course you’ll learn all about how to pull in and manipulate images and video using HTML5 and JavaScript. We’ll explore a range of possibilities from changing basic colors to manipulating video data using JavaScript libraries such as three.js.

This course is available here.

PatCat is the founder of Dev Diner, a site that explores developing for emerging tech such as virtual and augmented reality, the Internet of Things, artificial intelligence and wearables. He is a SitePoint contributing editor for emerging tech, an instructor at SitePoint Premium and O'Reilly, a Meta Pioneer and freelance developer who loves every opportunity to tinker with something new in a tech demo.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!