Reading Images and Data Using Canvas and JavaScript

By Patrick Catanzariti

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!

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.

  • Jorge Epuñan

    How canvas can read the EXIF metadata?

    • Patrick Catanzariti

      That’s a great question, I’ve never actually needed to do that before! I don’t believe canvas and JS alone have that capability but there are some JS plugins that might give you what you need.

      Exif-js lets you read in exif data:

      JavaScript Load Image loads images, including their exif data:

      Hope that helps :)

  • Guillermo

    Hi Patrick,

    I’m looking for some image stamp/annotattion plugin, and maybe you know some…

    I want to have a image in web page and allow to the user to add one or several other images and texts as stamp/seal/annotation, some as seals for “cancelled” or “sale” or images as a little/medium icons and so on.

    Of course also a way to save these “composition” in otder to be able to show the image and all the annonations, I think saving each annotation image and the position where was pasted.

    Later the end user must be able to remove some of these stamps, add others, even moving any.

    Do you know some plugins? or some similar for improve/change it?



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.