I am trying to send a buffered video to save it as a file on my server.
Always the file is empty.
My js get the url "blob:https://..." and sends to the php that receive it.
$file = file_get_contents(url);
file_put_contents($video_url_mp4."helloWorld.webm",$file);
I tried send the video as canvas and i only get one frame.
suggest please
A blob url is only usable in the browser that created it. So you cant use it on your server or copy and paste it into another browser or send the link to your friend etc.
What you need to do is get the blob that url was created from and use a FormData object and upload that to your server.
I get a file with the content as string on my php but this is not in a video format.
my js:
var myFile = new File(video.src);
var fd = new FormData();
fd.append('data', myFile);
and my php:
$f = $_POST['data'];
$decode = base64_decode(preg_replace('/^data\:image\/webp\;base64\,/', '', $f));
what is wrong?
Related
I am trying to use AJAX to query a PHP file and display a PDF file to the user. The response from the PHP file is the raw data of a PDF file stored on my server. Below is the code I am using to try and accomplish this but it isn't working. I keep getting a bad request error from my browser. Does anyone know the right way of doing this?
My end goal is I do not want the user to be able to see the server path where I store my PDF files. I only want the PDF files to be accessible using the AJAX / PHP script. I understand it's not the most secure method but I just want to keep the layman away from my PDF files.
jQuery:
$.ajax({
type: "POST",
url: 'process.php',
data: {"name" : "value"},
success: function (data) {
var json = $.parseJSON(data);
if(json.hasOwnProperty('success')){
window.location(json.success);
// json.success should contain the pdf binary data
// i just cant figure out how display the pdf in the browser
}
}
});
PHP:
<?php
$fileName = $_POST['name'];
if(isset($fileName)){
$file = './path-to-forms/'.$fileName.'.pdf';
$pdfData = file_get_contents($file);
$data = array("success" => $pdfData, "name" => $fileName);
echo json_encode($data);
}
?>
Does anyone know the right way of doing this?
A couple changes should get the file downloading correctly:
Update the PHP code to send the file contents using base-64 encoding (i.e. with base64_encode()):
$data = array("success" => base64_encode($pdfData));
When the AJAX response completes, create an anchor (link) and simulate clicking on it using .click() to initiate the PDF download. I can't find any jQuery method window.location() on api.jquery.com... if you find it, let me know. Maybe you were thinking of updating the (read-only) property window.location?
var json = $.parseJSON(data);
if(json.hasOwnProperty('success')){
var a = document.createElement("a");
a.href = 'data:application/pdf;base64,'+json.success;
a.download = "filePDF"; //update for filename
document.body.appendChild(a);
a.click();
// remove `a` following `Save As` dialog,
// `window` regains `focus`
window.onfocus = function () {
document.body.removeChild(a)
}
}
Credit to guest271314 for the adapted code from this answer along with some of the code from Alexandre's code in the answer below that.
See it demonstrated in this phpfiddle.
I have a canvas and I want to upload the canvas context to the server using ajax and php. I want the final output to be an image stored on the server. I have done image uploading using form. But now I want to get the canvas context convert it to image and upload to the server!
So, how can i do that? Any suggestions, algos or solutions are appreciated!
This blog post aptly describes the method of saving canvases onto the server with AJAX queries, I guess this should be fitting for you.
Basically, you will need a var canvasData = testCanvas.toDataURL("image/png"); to retrieve the canvas' contents in JavaScript. This will be a Base64 encoded string, something like this: data:image/png;base64,fooooooooooobaaaaaaaaaaar==.
The following code will make sure the AJAX query sends the contents to the HTML:
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);
On the server, in the PHP script, you will have a key named HTTP_RAW_POST_DATA in the $GLOBALS array, this will contain the data we just fetched.
// Remove the headers (data:,) part.
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $decodedData);
fclose( $fp );
Of course, test.png is the filename you will save. The first line is required to remove the data:image/png;base64, part of the encoded image, so that it can later be decoded by base64_decode(). It's output ($decodedData) will be saved to the file.
Here's what I am trying to accomplish. I have a BitmapData that I am sending to a PHP function as ByteArray on the server by using URLRequest. The PHP function then saves the ByteArray as a jpg. All is well, so far and I am able to save the image on the server. Where I am stuck is that the PHP function generates the image file name randomly and I have no clue on how to get the name of the file I have just saved on the server. I am using the below code to send byteArray to the PHP function. How to modify/add this so I can get the filename of the image once it's saved on the server?
var myHeader:URLRequestHeader = new URLRequestHeader("Content-type","application/octet-stream");
var myReqst:URLRequest = new URLRequest(path);
myReqst.requestHeaders.push(myHeader);
myReqst.method = URLRequestMethod.POST;
myReqst.data = imageBytes;
var myLoader:URLLoader;
myLoader = new URLLoader();
myLoader.load(sendReq);
If you're using URLLoader (which I normally don't, HTTPService is better IMO), you can listen for the 'complete' even to the triggered, which you can then check the 'data' property on URLLoader for the filename returned by the php function (as long as php actually returns it).
I draw something with html5-canvas. then i want to save it, and when the page is loaded again, I want to load the image I saved back to the canvas. I succeed with saving the data into a file in the server, but for some reason it's a strange file that can't open by ant software, and ofcourse not by my canvas. I save it as png base64, but i tried other things that didn't work.
javascript code:
function save(){ //saves the canvas into a string as a base64 png image. jsvalue is sent to the server by an html form
var b_canvas = document.getElementById("a");
var b_context = b_canvas.getContext("2d");
var img = b_canvas.toDataURL("image/png");
document.classic_form.jsvalue.value = img;
}
// opens the image file and displays it on the canvas
var canvas = document.getElementById("a");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "backpicture.png";
img.onload = function() {
context.drawImage(img, 0, 0);
};
php code:
<?php
$str=$_POST['jsvalue'];
$file=fopen("backpicture.txt","w");
if(isset($_POST['submit']))
fwrite($file,$str);
fclose($file)
?>
it creates the file, but shows nothing on the canvas when I load the page again.
I also tried to use Canvas2Image.saveAsPNG(), but it still didn't work.
can you please help?
thanks!
In order to save the file properly you need to decode the base64 data (and save as png):
file_put_contents('backpicture.png', base64_decode($str));
This:
.toDataURL("image/png");
Will give you something like this:
image/png;base64,iVBORw0K...[base64encoded_string]...
As #Variant said, you need to base64_decode it, but, ignoring "image/png;base64,"
This should work:
file_put_contents('backpicture.png',base64_decode(substr($str,22)));
I'm trying to save a snapshot of a component in my flex app that is then sent to a php script to be saved and then spit back out into the browser window. I can't seem to get this to work.
Here's my FlashBuilder code:
private function saveImage():void {
var parameters:String = "snapshot=" + takeSnapshot(this);
var variables:URLVariables = new URLVariables(parameters);
var submit:URLRequest = new URLRequest("SaveImage.php");
submit.data = variables;
submit.method = URLRequestMethod.POST;
navigateToURL(submit,"_self");
}
private function takeSnapshot(component:IBitmapDrawable):String {
return ImageSnapshot.encodeImageAsBase64(ImageSnapshot.captureImage(component));
}
Here's my experimental PHP code:
$binaryData = base64_decode($_POST["snapshot"]);
$file = "mydirectory/tmp.png";
file_put_contents($file, $binaryData);
header("Content-type: image/png");
die($binaryData);
That generates the following output (where {path to image} is the url where the image was saved):
The image “{path to image}” cannot be
displayed, because it contains errors.
It does save a .png file to that directory but it's blank, there's nothing there but it's dimensions are correct. I've confirmed that the snapshot works by loading it in the app with a swfLoader component right after the snapshot is taken so I know the image is good before it's sent to the server.
Use the PNGEncoder instead.