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 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();
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);
Related
browser doesn't show progress bar when downloading a file
function getSound(sound) {
var req = new XMLHttpRequest();
req.open("GET", sound, true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;//if you have the fileName header available
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download='sound.mp3';
link.click();
};
req.send();
}
I want show like this
The issue is that by the time you call 'click' the file is already downloaded. But you didn't need to download the file in advance:
function getSound(sound) {
const link=document.createElement('a');
link.href=sound;
link.download='sound.mp3';
link.click();
}
You have to add Content-Lenght header to let the web browser know the size of your file.
I have a webpage which need to play a mp3 file (if exists)
But I can only javascript only...
I tried the different method, but I still cannot check the file exists or not..
it sometimes works in IE,
but not work in chrome
Updated on 20200731
I've updated my code
now I have updated my code with 2 functions
executeIfFileExist <-- check the file exists
playme <-- play the mp3, this is fine and I can play the music now.
the check file exists function still not working.
even my file exists in server, the player still not show.
anyone can help me.
Thanks a lot.
<script>
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", src, true);
xhr.onreadystatechange = function () {
if (this.readyState === this.DONE) {
callback();
}
};
xhr.open('HEAD', src);
}
function playme(mp3file) {
//$("#playAudio").attr('src',mp3file).autoplay;
$('#playAudio').show();
$("#playAudio").attr('src',mp3file).play;
}
function showTips(url,event){
$('#tipsimg').attr('src', url);
// start
$('#playAudio').hide();
mp3file = url.substr(0, url.lastIndexOf(".")) + ".mp3";
mp3file = '01.mp3';
alert(mp3file);
// $("#playAudio").attr('src',mp3file).play();
// playme(mp3file);
executeIfFileExist(mp3file,playme);
// end
$('.tips').show();
//event.preventDefault();
}
$(document).ready(function(){
showTips('01.png',null);
})
</script>
<div class="tips">
<img src="" data="image1" id="tipsimg" />
<br />
<audio id="playAudio" controls autoplay>
<source src="" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
You can have a function to check whether the file exists or not, try this out!
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === this.DONE) {
callback();
}
};
xhr.open('HEAD', src);
}
I found answer and tried myself, at least it works (hide the audio tag if not found)
but it still show a js error if the file not exists
wish its helpful
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(src);
}
};
xhr.open("GET", src, true);
xhr.responseType = 'blob'; // add these line will loop until the file is ready
xhr.send(); // add these line will loop until the file is ready
}
function playme(mp3file) {
$('#playAudio').hide();
$('#playAudio').show();
$("#playAudio").attr('src',mp3file).play;
}
I'm using a javascript build a radio and I'm trying to give it different functionalities but I need to be able to detect the end of a song to make it work. Is there any way to do this?
I've tried different methods I've found online like .ended and such but I don't think those work without using the html audio tag. So I tried to make an audio tag that uses the same data for the source that my js radio uses and get the file length to stop my sourceNode at the end time and make a new one but but i keep getting null returned as the data so that doesn't work either.
I want to do something like:
context.onended = function() {
$.ajax({
url: '../scripts/radio.php',
data: {
attr1: 'value1'
},
success: function(data) {
console.log(data);
fileChosen = true;
setupAudioNodes();
var request = new XMLHttpRequest();
request.addEventListener("progress", updateProgress);
request.addEventListener("load", transferComplete);
request.addEventListener("error", transferFailed);
request.addEventListener("abort", transferCanceled);
request.open('GET', data, true);
request.responseType = 'arraybuffer';
// When loaded decode the data
request.onload = function() {
$("#title").html("Title");
$("#album").html("Goes");
$("#artist").html("Here");
onWindowResize();
$("#title, #artist, #album").css("visibility", "visible");
// decode the data
context.decodeAudioData(request.response, function(buffer) {
// when the audio is decoded play the sound
sourceNode.buffer = buffer;
sourceNode.start(0);
$("#freq, body").addClass("animateHue");
//on error
}, function(e) {
console.log(e);
});
};
request.send();
}
});
I want for this to run at the end of a song and play the next file. Which it would work if I could get the end time of the currently playing song.
To fix the above issue I added the .ended event inside the function that the source was set up:
function setupAudioNodes() {
// setup a analyser
analyser = context.createAnalyser();
// create a buffer source node
sourceNode = context.createBufferSource();
//connect source to analyser as link
sourceNode.connect(analyser);
// and connect source to destination
sourceNode.connect(context.destination);
//start updating
rafID = window.requestAnimationFrame(updateVisualization);
//I had to place a function for the .ended event inside the function sourceNode was set up.
sourceNode.onended = function() {
sourceNode.stop(0);
playFirst();
}
}
I'm trying to render a pdf inside an iframe. It is working fine on Mozilla (v54) and Chrome (v59) but nothing happens in IE(v11) when I click on the link which loads the PDF. After debugging several times I found that the URL in Chrome/Firefox is blob:http://localhost:37444/5a8e7fed-cd61-4c58-904c-fad2ae169718 and in IE(v11) it is blob:B7395CB5-169D-471F-BB8F-AA90EAFB6DDB. Why is URL.createObjectURL(blob) not appending the http request in IE(v11)
function (iframe, url, headers) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = "arraybuffer";
headers.forEach(function (header) {
xhr.setRequestHeader(header[0], header[1]);
});
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
var blob = new Blob([xhr.response], { type: "application/pdf" });
var objectUrl = URL.createObjectURL(blob);
iframe.src = objectUrl;
} else {
console.error('XHR failed', this);
}
}
}
IE does not create a url for these blob objects because of security reasons i think.So using var objectUrl = URL.createObjectURL(blob);will not give you the source url which you can use inside iframe or embed tag.
I faced the same issue and searched a lot about the fix.But could not get the answer.Instead i solved it as following.
you can use the following for IE
if (bowser.msie && window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(file, fileName);
}else{
//do what you were doing for other than IE
}
the above IE code will prompt the user that whether he wants to save the file or directly open it.
User can click on button 'open' and then IE will show the PDF without downloading it in default reader.
page works well until being saved to Home Screen. If started from Home Screen no audio appears. The error is "Value is not a type of AudioBuffer". I guess there are problems with loading of audio with XMLHttpRequest() here.
M4A file presents in cache.manifest, so should be cached normally.
could you please advice? Thanks
function beep(){
var sound = context.createBufferSource();
sound.buffer = soundBuffer; <<< here
sound.connect(context.destination);
sound.noteOn(0);
}
......
if('webkitAudioContext' in window) {
context = new webkitAudioContext();
function bufferSound(event) {
var request = event.target;
soundBuffer = context.createBuffer(request.response, false);
}
var request = new XMLHttpRequest();
request.open('GET', 'stoplight.m4a', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', bufferSound, false);
request.send();
}
Update: solved with Base64 audio encoding. iOS doesn't cache audio files.