A presentation at Programmed in Pencil by Chris Heilmann
IMAGES, PIXELS, CANVAS, TIGERS AND BEARS…
DEVELOPER TOOLS EDGE(CHROMIUM) PM TEAM Zoher Ghadyali @ZGhadyali Chris Heilmann @codepo8 Erica Draud @hiamerica Rachel Weil @partytimeHXLNT Brendyn Alexander @webrendyn
N E R D, G E E K , F E A R L E S S C R E ATO R …
SOFTWARE IS A LW AY S PEEKING UNDER THE H O O D…
WHEN YOU SEE AN IMAGE, I SEE PIXELS AND D ATA F O R M AT S …
GETTING AN IMAGE INTO THE BROWSER… UPLOAD FORM DRAG AND DROP COPY AND PASTE https://christianheilmann.com/2020/03/20/fun-with-browsers-how-to-get-an-image-into-the-current-page/
THE HTML
FILE UPLOAD JAVASCRIPT
DRAG AND DROP JAVASCRIPT
COPY AND PASTE JAVASCRIPT
SHOWING THE IMAGE
THIS IS BORING
UNLOCKING T H E DATA IN THE IMAGE
Super basic in-browser painting mechanism Built for speed, not for comfort CANVAS Powerful, once you get it Confusing and weird till you get there Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
ETCH-A-SKETCH IN YOUR DOCUMENT
P E N U P, P E N DOWN…
• Variable fill, stroke, line end and pattern options INTERESTING CANVAS F E AT U R E S • Blend modes • Dynamic coordinate system – define coordinates once and rotate/zoom coordinate system • Drawing stack – you can store and save the state of the canvas • Everything results in an image
OPENING UP THE IMAGE
COPYING THE IMAGE TO THE CANVAS
T H E I M A G E D ATA OBJECT • width: Width of the canvas in pixels • height: Height of the canvas in pixels • data: Array of all the pixels in RGBA format
EXAMPLE: A N A LY S E AND COUNT USED COLOURS
GET IMAGE, ADD TO CANVAS, SEND PIXELS
LOOP OVER ALL PIXELS AND STORE THEIR VALUES IN AN OBJECT
SORT THE OBJECT AND PRINT OUT A LIST
USING I M A G E D ATA • You can read with getImageData and write with putImageData • In between everything is array manipulation • You can create pixel patterns • You can change each pixel of an image source. This allows for writing filters, removing backgrounds, recolouring, etc…
DON’T MAKE YOUR LIFE TOO HARD
DON’T MAKE YOUR LIFE TOO HARD
THINKING TOO COMPLEX • Get the mouse coordinates • Loop through the array and check if y times the width of the canvas was reached • Stop at the x index and read the colour.
OR…
CANVAS AND IMAGES • drawImage() is not only there to put an image onto the canvas • You can also crop and transform image with it • Scaling and cropping is easier • Rotation means you need to rotate the coordinate system around it
CROPPING NEEDS SOME GETTING USED TO…
ZOOMING A WHOLE IMAGE…
ZOOMING IS EASIER BY SCALING THE COORDINATE SYSTEM
INTERACTIVE ZOOMING
INTERACTIVE ZOOMING
INTERACTIVE ZOOMING USING CROP AND RESIZE
VALID IMAGE RESOURCES • Any image (must be on the same domain) • Any video (^ that) • Any other canvas
SAVING THE FINAL IMAGE • Right-click works • Other than that, you can do a canvas.toDataURL() • By default, canvas creates PNG files, but you can also do WebP or JPG • The latter takes a quality parameter
BONUS TRICK: ANCHOR AROUND CANVAS
SOME THINGS I H A V E B U I LT W I T H THESE TECHNIQUES
MAKETHUMBNAILS.COM DROP A BUNCH OF DEFINE THE SIZE THUMBNAILS, OR D E FAU LT IMAGES OF THE CHOOSE DOWNLOAD THE THUMBNAILS ONE BY ONE OR AS A ZIP ALL ON YOUR OWN MACHINE
R E M OV E P H OTO DATA . CO M
COLOUR PICKER FROM IMAGE https://christianheilmann.com/2020/04/22/limitinginput-type-color-to-a-certain-palette-from-an-image/
LO G O - O - M AT I C https://codepo8.github.io/logo-o-matic/
LO G O - O - M AT I C https://codepo8.github.io/logo-o-matic/
• Canvas doesn’t throw errors if you paint outside the available space, but it uses memory • If you only need to convert with a canvas, don’t even add it to the DOM BONUS TIPS: • If you do a lot of array looping and changes, use a worker to avoid the interface to slow down. Canvas, however isn’t available in a worker! • Resizing a canvas is a cheap way to clear it • In animations, using a rgba(r,g,b,0.5) value for clearing the canvas gives a smooth ghosting effect • A black and white map is a great way to do background collision in games – just read the next few pixels in direction of the move and if they are white – boom
THANK YOU AND HAVE FUN! Chris Heilmann Chris Heilmann - codepo8 @codepo8 @EdgeDevTools christianheilmann.com Click the feedback in Edge developer tools! 6/24/20 48
There is a lot of joy in putting pixels next to each other to create something nice. There is even more joy in making a computer do it for you and paint with code. In this talk Chris Heilmann is going to share his love for pixel graphics. You’ll learn how to get images into the browser. We’ll also use the canvas element to turn pixels into numbers and vice versa. All in plain vanilla JavaScript.
for free. You
can too.