Images, pixels, canvas, tigers and bears…

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

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 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/

• 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

IMAGES, PIXELS, CANVAS, TIGERS AND BEARS…