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



💻

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:
🎥 PREVIOUS LESSON:
🎥 FULL COURSE:

🔗 p5.js:
🔗 Processing Foundation:
🔗 Base64:

🚂 Website:
💖 Patreon:
🛒 Store:
📚 Books:

🎥 Coding Challenges:
🎥 Intro to Programming:

📄 Code of Conduct:

Nguồn:https://curbjumperstreeteats.com/

23 Comments

  • Important Note for All: p5.dom.js was merged into p5.js (version 0.10.0 and on) . So you just need to add the newest version of p5.js and you re good to go!

    Martin Chirino
    Posted February 20, 2020
  • Adding DELETE API endpoint …

    ////////////////////////////CLIENT-SIDE….
    document.querySelectorAll('.btnStack').forEach(item => {

    item.addEventListener('click', async event => {

    const id = { id: item.id };

    const options = {

    method: 'DELETE',

    headers: {

    'Content-Type': 'application/json'

    },

    body: JSON.stringify(id)

    }

    window.location.reload();

    const response = await fetch('/api', options);

    const json = await response.json();

    });

    });

    ///////////SERVER-SIDE…..

    app.delete('/api', (req, res) => {

    const { id } = req.body;

    console.log('id', id)

    database.remove({ _id: id }, {}, (err, numRemoved) => {

    if (err) {

    response.end();

    return;

    }

    console.log(numRemoved)

    res.json(id);

    });

    });

    Sergey Popach
    Posted February 20, 2020
  • great video, video.size(160, 120) has a bug with the video width element and the image is a white background, to solved this I remove video.size(160, 120) and add *createCanvas(160, 120)*, what is the correct form?

    HJ Mg
    Posted February 20, 2020
  • anyone else having trouble with the image? I am doing this with sqlite and it seems like it is going through when I send the request, but when I manually render the img on the DOM it is blank? thinking the loadpixels() method may not be working for me?

    Anton plauche-capers
    Posted February 20, 2020
  • Can't display the image …..but the image is present when i console log it.

    Subhadip Ghorui
    Posted February 20, 2020
  • Hello sir. I am getting createCapture is not defined Error in index.html. Please help
    Edit: I got it fixed. I forgot to add p5 dom library.
    By the way, I appreciate your work so much.

    Md Minhajuddin Khan
    Posted February 20, 2020
  • Pretty cool, but you're hyper-cringe. Luckily for you, I get a sick thrill from that so I subscribed. I feel the same way about Siraj Rival, his videos are so funny for some reason but at the same time make me want to die.

    Lonny Bulldozer
    Posted February 20, 2020
  • best as always

    Btiwari-Games
    Posted February 20, 2020
  • Should I try p5.js to code with?

    Osk1
    Posted February 20, 2020
  • Why can't I use the function: createCapture(VIDEO) ??

    Nam Hoàng Đình
    Posted February 20, 2020
  • There is lot of playlist that i found in the channel witch i found interesting. But would like to assemble all of this serie of video in separet playlist plz and name it something simple to be easy to been found 🙂

    step one
    Posted February 20, 2020
  • This is one of your funniest you have made

    Pedritox0953
    Posted February 20, 2020
  • simply superb…

    SYED IMRAN ALI
    Posted February 20, 2020
  • I love this series 😭 so sad its coming to an end..

    Ibrahim Mohammed
    Posted February 20, 2020
  • Can not like this video enough! amazing series!!!

    mamado226
    Posted February 20, 2020
  • 0:44 to make "those (technology related) fields accessible to diverse communities".With awesome videos like this one, there is NOTHING impeding "access" to "diverse" communities. What a hell are they talking about!? Stay away from stupid identity politics, and keep up the good work!

    Alfredo Rafael Habersham Pabon
    Posted February 20, 2020
  • p5js finally makes entry

    Aayush Pokharel
    Posted February 20, 2020
  • Hi,

    Here's my PR: https://github.com/morethanyell/nodejs-tut/pull/7

    Summary:
    added new codes for capturing webcam image

    added gitignore to exclude database.db

    Thank you.

    Daniel Astillero
    Posted February 20, 2020
  • As always, great work Dan

    Miles Williams
    Posted February 20, 2020
  • You had some old videos that used socket.io (Collaborative Drawing App) and i was wondering why you didn't need any of that in this code. I'm try to make an app, and i would like to know why someone would or would not use socket.io. How does one host beyond of localhost?
    Thanks Daniel, Great videos!

    Reginald Robinson
    Posted February 20, 2020
  • top lezion

    raffaele rimorso
    Posted February 20, 2020
  • I love you man…I needed this.

    Shadman Tanjim
    Posted February 20, 2020
  • Wow for the first time i saw a man who does an interesting thing with nodejs rather than repeat what is already in the documentation.

    Nicola reiman
    Posted February 20, 2020

Leave a comment