Storing Image In Database Without JQuery

Question

Good day stackers,

I'm working on a web project in which we recreate a social media site similar to snapchat. I'm using my webcam to take pictures using JS, and I'm writing the picture to a var called img as follows:

var img    = canvas.toDataURL("image/png");

We are required to use PDO in PHP to access the database. Alternatively we can use AJAX, but JQuery is strictly forbidden. My question is, how can I store the DataURL inside my database? All the tutorials online use JQuery.

Update:

I followed the steps as suggested below, but when I hit the snap button, it still only takes the picture, but no URL or nothing.

function sendimagetourl(image)
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function()
            {
                if (this.readyState == 4 && this.status == 200)
                {
                    alert( this.resoponseText);
                }
            }
            xhtp.open("GET", "saveimage.php?url="+image, true);
            xhttp.send();
        }
        //Stream Video
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
        {
            navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
            });
        }
        //Snap Photo
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');

        document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);});

So it appears I was a bit of a fool. There were two minor typos, and it seems like the data sent is invisible in the url. Thanks for all the help!

you may use simple javascript ajax

Pradyut Manna
– Pradyut Manna

2016-10-18 06:14:01 +00:00
Commented Oct 18, 2016 at 6:14 — Pradyut Manna
– Pradyut Manna, Commented Oct 18, 2016 at 6:14

mahethekiller · Accepted Answer · 2016-10-18 06:14:38Z

1

You can use javascript ajax

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    alert( this.responseText);
  }
};
xhttp.open("GET", "saveimage.php?url="+url, true);
xhttp.send();

answered Oct 18, 2016 at 6:14

mahethekiller

5143 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NodziGames Over a year ago

Do I use $_GET['url'] to retrieve the data in PHP then?

mahethekiller Over a year ago

yes you can use $_GET['url'] , as it is a get request

NodziGames Over a year ago

I'll let you know in about 10 minutes. This is similar to some of the posts I read so I'm sure it will, I'm just struggling a tad to implement it, but I'll get it running soon, then I'll let you know.

NodziGames Over a year ago

I followed the steps but it's not working. Please have a look at my question on top where I posted details on my new problem.

mahethekiller Over a year ago

are you using any js library to click the image?

|

guest271314 · Accepted Answer · 2016-10-18 06:25:25Z

1

You can use XMLHttpRequest() or fetch(), Blob, FormData to POST data URI to php. See also Using files from web applications

  var request = new XMLHttpRequest();
  request.open("POST", "/path/to/server", true);
  request.onload = function() {
    // do stuff
  }
  var data = new FormData();
  data.append("image", new Blob([img], {type:"image/png"}), "filename");
  request.send(data);

edited Oct 18, 2016 at 6:25

answered Oct 18, 2016 at 6:12

guest271314

1

Collectives™ on Stack Overflow

Storing Image In Database Without JQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related