2.6 Saving Images and Base64 Encoding - Working with Data and APIs in JavaScript

Aug 15, 2023

2.6 Saving Images and Base64 Encoding - Working with Data and APIs in JavaScript

💻https://github.com/CodingTrain/Intro-…

Let’s add an image from the webcam to our database. For this project, we will be using the p5.js JavaScript library!

🎥 NEXT LESSON:    • 2.7 Project Wrap-up: Accessibility an…
🎥 PREVIOUS LESSON:    • 2.5 Database Query - Working with Dat…
🎥 FULL COURSE:    • Working with Data and APIs in JavaScript

🔗 p5.js: https://p5js.org
🔗 Processing Foundation: https://processingfoundation.org/
🔗 Base64: https://en.wikipedia.org/wiki/Base64

🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/c…
📚 Books: https://www.amazon.com/shop/thecoding…

🎥 Coding Challenges:    • Coding Challenges
🎥 Intro to Programming:    • Start learning here!

📄 Code of Conduct: https://github.com/CodingTrain/Code-o…

Content

0.03 -> I am back to finish off the data selfie

3.149 -> app with one more feature and that

5.49 -> feature is adding something else in the

7.47 -> database namely an image from the webcam

10.11 -> so this is the perfect opportunity I'm

12 -> very excited about this to use the p5 GS

14.58 -> library in this project so actually it's

17.31 -> kind of strange this particular course

18.93 -> this playlist of videos isn't using p5

21.09 -> GS because it's a thing I use basically

23.13 -> everything all over my channel but I

25.56 -> wanted to take this opportunity to take

26.88 -> a little break from that and then piece

28.83 -> it back in where it can make the biggest

30.929 -> contribution the p5 GS library is

32.94 -> created by Lauren McCarthy is maintained

34.62 -> by the processing foundation the

36.09 -> processing foundation is a non-profit

37.559 -> mission to promote software literacy

39.629 -> within the visual arts and visual

40.68 -> literacy within technology related

42.809 -> fields and to make those fields

44.579 -> accessible to diverse communities so I'm

46.739 -> gonna use that library to open up a

49.17 -> connection to the webcam to display the

51.449 -> webcams image on a html5 JavaScript

53.73 -> canvas and then to take the data from

56.699 -> that image and pass it to the database

58.5 -> so this is another feature that I'm

60.57 -> gonna add here in the client-side

62.19 -> JavaScript I in the client-side

64.409 -> JavaScript is doing the geolocation and

66.33 -> it is now going to call the p5 function

68.7 -> create video to create that video that

73.17 -> video is going to be viewed in the

75.03 -> clients browser but then when the submit

77.28 -> button is the data from that image will

79.56 -> get sent to the server and store it into

81.57 -> the database there are a variety of ways

83.34 -> that I can use the p5 just library in

85.11 -> fact there's a whole p5.js online web

87.39 -> editor for making p5 GS sketches right

89.67 -> there in the browser but what I want to

91.53 -> do here is integrate p5 just library

93.57 -> into this project that I'm building that

94.92 -> involves node and a bunch of other

96.329 -> pieces that you've been watching me do

97.92 -> along the way so the way that I'm going

99.6 -> to do that is navigate over to the

101.67 -> getting started page for p5.js I'm going

104.1 -> to look for this link called p5.js CDN

106.14 -> or content delivery network a content

108.869 -> delivery network is a hosting service

110.399 -> that will deliver you contact and

112.59 -> because that I want is the p5 just

115.049 -> library so I could click here and then I

117.27 -> can grab you can see at the time this

119.399 -> writing the current version is 0.8.0

122.07 -> what I want to use is P 5 min Jes when

125.52 -> you see a JavaScript library there's

127.38 -> often what's known as a minified version

128.97 -> and an

130.009 -> minified version so if I wanted to

131.629 -> really peek in and read the source code

133.459 -> myself get the bigger p5.js file but if

136.64 -> I'm just using the library it's gonna be

138.08 -> a smaller file size and make things kind

140.269 -> of a little snappier so let me go and I

142.459 -> can actually just go here under copy and

144.5 -> I can do copy script tag it's what I

146.81 -> want and then if I come here into my

149.33 -> HTML file can go into the header and

151.519 -> right above title I'm just gonna paste

153.709 -> it in that should give me the script tag

155.569 -> for the p5.js library now interestingly

158.269 -> enough you might have noticed on this

159.59 -> page there's a bunch of things listed

161.12 -> there's like p5 Dom p5 sound p5 Dom men

164.78 -> well I already covered the minified

166.04 -> thing but the p5 library has several

168.709 -> different components to it so the core

171.319 -> library that you're pretty much always

173.48 -> gonna want is just p5 Minjae s I also

176.81 -> want to use the Dom library that's where

179.54 -> the functionality for using the webcam

181.609 -> is and if I wanted to integrate it

183.56 -> there's other functionality in there too

184.7 -> but that's the functionality I'm looking

185.9 -> for if I wanted to have sound in my

187.7 -> project I could also look at the p5

189.14 -> sound library and I'll link to numerous

191.48 -> p5.js tutorials that I have on this

193.04 -> channel in the video description if you

194.69 -> want to check those out alright so let

196.04 -> me grab this copy script tag and there

202.4 -> we go before I get started with p5 I

204.079 -> just want to point out that I've added a

205.669 -> little bit of code since the last video

207.29 -> something very simple but just to make

208.819 -> it a bit more useable I added two links

211.31 -> on the web page between this data entry

213.859 -> page where I'm hitting submit and adding

215.569 -> a latitude longitude and then the list

217.609 -> page which shows the things that are in

219.65 -> the database I also change these to

221.329 -> paragraph elements from divs so that

223.37 -> there's a little line break in between

224.599 -> each so now I can go back and forth

226.579 -> easily between these two pages and also

229.25 -> see the entries from the database with a

231.349 -> little bit of formatting plenty still to

233.239 -> do for you a creative person possibly

235.19 -> watching these videos thinking about how

236.66 -> you want to design this yourself but a

238.31 -> few small improvements so that I can

240.319 -> work with this a bit more easily in this

241.849 -> particular tutorial now I could finally

244.099 -> write some p5.js code first thing that

246.109 -> I'm gonna want to add to my sketch is a

247.489 -> function called set up just a little bit

249.53 -> of an oddity about the way that p5 works

251.629 -> that's a little different than other

252.59 -> JavaScript libraries but p5 looks for a

255.26 -> function called set up in your global

257.12 -> namespace meaning it's just right there

258.53 -> in this case in my script tag set up is

261.2 -> the equivalent of window on

263.21 -> or jquery's ready function it's the it's

266.96 -> the function that gets executed when

268.85 -> everything had when the web page has

270.5 -> loaded and everything is ready to go so

272.6 -> one thing that I could do is I could

273.83 -> take all of this other stuff that I have

276.52 -> why not and just put it in the setup

279.68 -> function so let's make sure that adding

282.259 -> the setup function as the p5 library

284.15 -> adding the setup function still works so

285.68 -> I'll go to the browser and I'm just

287.419 -> gonna refresh my page and it's it's

291.62 -> taking a little while to get the

292.699 -> latitude and longitude there it got it

294.5 -> you'll see though whoa there's this

295.759 -> blank space there why is there a blank

298.16 -> space there

298.849 -> well p5 will automatically add a canvas

301.88 -> to your page so actually most of p5 is

305.06 -> set up to to draw so if I were to go to

308.69 -> the end of set up here and add

311.24 -> background 255 0 0

315.979 -> that's a red background and hit refresh

318.199 -> you can see oh look there's a red canvas

320.3 -> now the truth is I don't actually need a

322.009 -> canvas for this project so I'm actually

323.99 -> going to add a line of code called

326.479 -> no canvas and then the thing that I do

328.94 -> need is I need the the image from the

331.909 -> webcam so I'm gonna say Const video

334.49 -> equals create capture video and this

338.44 -> just reminded me that I've made a

340.43 -> mistake and I said create video here

343.699 -> which is p5 function that's for a local

346.669 -> video file like a movie file that you

349.22 -> might load so actually what I want is

350.69 -> create capture I'm capturing from the

354.02 -> default video source of the computer the

357.139 -> webcam going back and refreshing the

359.659 -> page first of all it's asking me if I

363.38 -> want to allow this web application to

365.96 -> use the camera and this is very

367.25 -> important right you can't just have a

369.259 -> web page open up somebody's web cam

371.15 -> automatically this is a huge security

373.4 -> issue and so there are lots of privacy

375.38 -> and security questions that you want to

377.57 -> be thoughtful about when building

378.83 -> applications that make Act that access a

381.409 -> user's webcam but here for what we're

383.36 -> sort of tinkering around and learning

384.86 -> and practicing with I'm happy with just

387.289 -> allowing it so I'm gonna say allow and

390.08 -> you can see there it is oh look and you

391.52 -> can see that I have in front of a green

392.99 -> screen hello there's me now it's quite

394.639 -> large I don't need it to be that large

396.02 -> on the page

396.68 -> so I'm going to say this is part of p5

399.199 -> as well now video size and let's just

401.54 -> make it 320 by 240 so now I have a

404.81 -> smaller video image that's right there

406.61 -> perfect so what I want is when I hit

408.979 -> submit right I'm gonna go I'm gonna say

411.8 -> happy I want that image to also get sent

416.78 -> to the server how do I do that I really

419.63 -> think that the code were probably flow a

420.86 -> little nicer if I move this to the

422.54 -> beginning of the setup function because

424.88 -> ultimately what I want to do is right

427.25 -> here when the user presses the button

429.71 -> I'm grabbing the latitude/longitude and

432.08 -> mood and posting that to the server so I

434.99 -> want to add one more thing which is the

437.12 -> data for the image base64 encoding is a

440.24 -> method to take some binary data in this

442.85 -> case the image all the colors of the

445.1 -> pixels of the image and convert it to

446.9 -> ASCII data meaning a string of text this

450.169 -> isn't doing anything to compress the

451.789 -> image

452.06 -> it's just repackaging the same data in a

454.94 -> format that's incredibly convenient to

457.16 -> pass around in other words I need to

459.68 -> send the webcam image from here to the

461.93 -> server and a really easy way to do that

463.76 -> is by sending a string of text to the

465.59 -> server if I could turn the image into a

467.27 -> string of text then I've got a nice way

468.74 -> to post it to the server

470.18 -> in JavaScript the HTML canvas API

473 -> includes a function called two data URL

475.88 -> which takes a canvas presumably with

478.7 -> pixels of information in it and converts

481.07 -> that to the base64 encoding of that

483.44 -> image in p5 the video element has a

486.02 -> canvas associated with it so I can say

488.21 -> constant image equals video dot canvas

492.38 -> dot 2 data URL so this is taking the

496.94 -> videos canvas converting it to base64

499.76 -> and putting it in this variable image

501.62 -> and maybe what I'll call us I'll call

503.21 -> this image 64 so I know that this is the

506.599 -> base64 encoding of the image the only

508.97 -> thing is this won't actually work the

510.889 -> videos canvas element is not there by

513.2 -> default I need to alert p5 to the fact

515.87 -> that I want to use a canvas and to do

518.089 -> that I say video dot load pixels this

521.599 -> means take that video element load the

524.51 -> pixels onto a canvas so that I can then

527.089 -> convert it to base64 I can add that

529.82 -> image then

530.57 -> as a property to the data that I'm

532.16 -> posting I can then go to the server and

534.53 -> if you recall the post to the API of the

537.38 -> server just takes the body of that

539.54 -> request the post request and puts it

541.76 -> right into the database so it's already

543.53 -> done it should already be there let's

545.45 -> give this a try I'm gonna refresh the

547.49 -> page

548.06 -> I had mango for breakfast this morning

551.36 -> so I'm gonna type in mango and get

553.79 -> myself a big ok sign and that image we

558.05 -> could see it's there look at all of this

559.73 -> text that's in there this is the base64

561.98 -> encoding of that raw pixel data and now

565.25 -> if I go to the database I can see that

567.92 -> the latest entry has that base64

571.37 -> encoding now we need to have a talk

573.2 -> perhaps isn't the best idea do I really

576.2 -> want to include all of the data for the

579.08 -> image in the database this is going to

580.46 -> be the most efficient way to store this

582.02 -> information almost definitely not in

585.08 -> fact a more traditional strategy might

587.84 -> be to save that image data to a file and

590.87 -> then store the pack to that file in the

593.36 -> database itself but in terms of this

595.34 -> quick and dirty prototyping that I'm

596.93 -> doing this is a nice way to get started

598.97 -> with this and I'll leave that as an

600.59 -> exercise to the viewer and something

602.24 -> that I will include a supplemental code

604.25 -> with this video how to actually store

606.32 -> this to a file on the server and then

608.6 -> the path in the database itself

610.46 -> the only thing left for me to do now is

612.32 -> to add the image to the page that lists

615.11 -> all of the content from the database

616.61 -> itself now I'm consoling long what's in

618.86 -> the database you can see here this is

620.54 -> the most recent entry and it includes

622.91 -> the base64 image right there as a

625.07 -> property that it's reading from the

627.35 -> database so the this is actually I

629.48 -> already have the template for doing this

630.68 -> I just can head on over to the HTML the

633.62 -> JavaScript code for creating all those

635.42 -> Dom elements and I can make another one

637.22 -> like I can say image equals document

640.25 -> create element IMG for image then unlike

645.71 -> putting I'm not putting text content

648.05 -> into that image instead I want to put

649.67 -> the base64 encoded data itself and I can

652.55 -> do that with the source attribute so I

654.68 -> can say image dot SRC equals image and

659.84 -> oh no sorry equals what is it item dot

663.98 -> image

664.71 -> sixty-four so that's the base64 encoded

668.94 -> data in the database item in the image

672.21 -> elephant source attribute and then add

674.7 -> that to the page as well right here

678.15 -> image and if I go back and refresh we're

681.45 -> getting errors right we see though look

683.28 -> there's that image there but we're

685.32 -> getting errors because not all of the

686.97 -> entries have images associated with them

689.67 -> so one way to I could do something like

691.53 -> error handling and see if there is an

692.94 -> image or not but let's actually just

694.8 -> wipe the database clean and make a few

697.41 -> more entries and see if this works I'm

699.33 -> gonna manually delete the database like

701.34 -> this go back to the enter page and make

707.25 -> a bunch of entries all right I made four

712.95 -> entries there they are that you can see

714.6 -> that they're all entered in the database

715.8 -> I can go to the code and see like look

717.21 -> here's the database file here's

718.83 -> everything in there I can go over to

720.63 -> list and see here who my entries into

722.58 -> the database and there they are

724.77 -> I now have the finished data selphie app

728.49 -> this wraps up the data selfie app module

730.98 -> I've built the project now it's a crude

733.26 -> accrued prototype but a working version

735.15 -> of the idea so I'm gonna do one more

737.16 -> video I'm gonna come back in a separate

738.33 -> video and kind of offer you some ideas

739.92 -> of exercise ideas of things that you

741.57 -> might do to continue this but also I'm

743.94 -> gonna show you a few cleanup things that

745.5 -> I think are worthwhile for example

747.48 -> taking the JavaScript out of the HTML

749.73 -> file and putting in a separate file

751.14 -> where you would create how you would

753.12 -> create a CSS file if you wanted to start

754.92 -> thinking about layout and design for

756.48 -> your application it's beyond the scope

757.8 -> of what I want to do in this series but

759.57 -> at least give you some pointers on how

761.1 -> to get started with that

765.93 -> [Music]

770.86 -> you

Source: https://www.youtube.com/watch?v=9Rhsb3GU2Iw