I know there is a lot of questions regarding this but currently I am trying to save user created HTML5 canvas data to a specific folder on my web server.
I am already able to save an image to server using the following:
function sendData(postData){
var ajax = new XMLHttpRequest();
ajax.open("POST",'saveFrame.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
var comicID = document.getElementById('comicID').value;
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
alert("Frame saved");
}
}
ajax.send(postData);
}
saveFrame.PHP File
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data like you would with traditional post
$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers
$removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);
// decode it from base 64 and into image data only
$decode=base64_decode($removeHeaders);
// save to your server
$saveName = "test.jpeg";
$fopen = fopen($saveName, 'wb' );
fwrite( $fopen, $decode);
fclose( $fopen );
}
?>
What I want to be able to do is pass some more variables along side the image so that I can dynamically look up my database using PHP within the saveFrame.php file to determine what filename it should be saved as. I'm unsure how to accomplish this as I'm not accustomed to using AJAX.
Any advice is appreciated,
Alex
You can use the html5 canvaspixelarray property to obtain the canvas data.
Related
I am looking for any pointers what I am doing wrong here?
Situation:
I created a simple form on my website that requires the user to enter some text data and an image. This information is then stored on the server - picture separately, and the text data in a json file.
I have tested it with multiple image formats on my desktop (I allow only the most common types, such as jpg, png, or bmp). All seems to be fine. However, it isn't so smooth on mobile (iOS). When I attempt to upload a screenshot (shows as a png format), or a picture I just took (jpg), the response that comes back says Missing picture, which means that no data was received on the server. The thing is that this is not always the case, some screenshots come through, some don't.
I am encoding the picture as a base64 string on the client. I tried logging it to make sure it goes through, and it seems to be fine. However, when I log the received parameters on the server, in these failed cases, the picture string is really empty! All I do is I read the $_REQUEST or $_POST parameters (it's in PHP).
This error has been replicated only on mobile so far. On the front side, I guess this is the most relevant piece of code, but if you need more let me know! You can also inspect that website I included, but it will be slightly more difficult as it's minified.
function init_form_submit () {
var button = document.getElementById('form-submit-btn'),
image_upload_button = document.getElementById('picture');
if (!button || !image_upload_button) return;
image_upload_button.addEventListener('change', function (event) {
preview_image(this);
});
button.addEventListener('click', function (event) {
// Hijack the form submit.
event.preventDefault();
show_form_loader();
var form_validator = FormValidator(GLOB.form_node);
if (!form_validator.valid) {
form_submitted_callback();
}
else {
var http = new XMLHttpRequest();
var formData = new FormData();
formData.append("about", form_validator.fd.about);
formData.append("email", form_validator.fd.email || '');
formData.append("handle", form_validator.fd.handle);
formData.append("name", form_validator.fd.name);
formData.append("picture", GLOB.picture);
http.open('POST', 'https://lmen.us/royalkitten/api/apply-royal-kitten/index.php', true);
http.setRequestHeader('Content-type', 'multipart/form-data');
http.onreadystatechange = function () {
var response;
if (http.readyState !== 4 || http.status !== 200) return;
try {
response = JSON.parse(http.responseText);
}
catch (error) {
response = http.responseText;
console.log(response);
}
form_submitted_callback(response);
}
http.send(formData);
}
});
}
Here is how I store the image data in the GLOB.picture variable. This function is called only twice - once in the code above when the user chooses an image, and once in a callback after a successful submission as a way to reset the form to its original state.
function preview_image (input) {
var preview_label = document.getElementById('picture-label'),
preview_element = document.getElementById('picture-preview');
if (!input.files.length) {
if (preview_label) {
preview_label.innerHTML = 'Select a file';
}
if (preview_element) {
preview_element.src = './images/image-placeholder-600x600.jpg';
}
GLOB.picture = null;
return;
}
var reader = new FileReader(),
file = input.files[0];
if (!file) return;
reader.onload = function (event) {
var image_data = event.target.result;
if (preview_label) {
preview_label.innerHTML = file.name;
}
if (preview_element) {
preview_element.src = image_data;
}
GLOB.picture = image_data;
}
reader.readAsDataURL(file);
}
I guess, the problem is that your image is probably bigger than PHP max size allowed for a POST request. You should send your form as multipart/form-data, and send your image as a file. On the server side, you should get it via $_FILE instead of $_POST...
To send your image as a file, there are multiple solutions. First, you could send a base-64 encoded Blob, but it would be 30% larger than the original file (because of base-64 encoding).
What I would recommend to you is that you send the file in its original binary format, which is easier to implement and faster to upload.
To do so, you just need to send as-is the content of input.files[0]. let's say you set a GLOB.pictureFile=input.files[0] in your preview_image() function. you then just send it in the form like this :
formData.append("picture", GLOB.pictureFile);
I need to upload image using ajax. Elaborating my point:
I need to pass my image data to a PHP page and check the type, size, name and all other attributes of the file. If all attributes matches, then only I need to transfer the file. Problem here is passing of data should be done in JSON(AJAX) format only. One more important thing is that I don't have to convert it to base64.
If you can help me in this, You are most welcome.
Thanks in advance.
The idea in SO is to work on the OP current code. I mean, we are not here to make all the job, because it should have a price. Anyway, here is a workaround for your issue:
Convert your image to base64 using javascript. This useful method works like a charm:
// Code taken from MatthewCrumley (http://stackoverflow.com/a/934925/298479)
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to guess the
// original format, but be aware the using "image/jpg" will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Then just pass the returned string as base64 through ajax:
$.ajax({
url: 'path/to/your/script.php',
type: 'post',
data: { paramName: imagedata } // the returned data from above js method,
/*...*/
});
And, in PHP side, just return the string to an image file:
// Code taken from Austin Brunkhorst (http://stackoverflow.com/a/15153931/3648578)
function base64_to_jpeg($base64_string, $output_file) {
$ifp = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
return $output_file;
}
I have this PHP File called print.php:
<?php
require_once("modules/pdf/dompdf_config.inc.php");
$html = $_POST["toRender"];
$number = $_POST["number"];
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream($number.".pdf");
As you can see, the HTML and a Number are received via POST.
The JavaScript file looks like this:
$("#btnViewPDF").click(function() {
var theHtml = $("#printable").html();
var theNumber = $("#invoiceNumber").val();
$.ajax({
type : "post",
url : "views/print.php",
data : {toRender : theHtml, number : theNumber},
beforeSend: function() {
$(".ajax-loader-bg").fadeIn();
}
}).always(function() {
$(".ajax-loader-bg").fadeOut();
});
return false;
});
Basically it takes all the content inside a DIV called 'printable' but what I want next is the PDF that has been generated in print.php to be displayed, I haven't been able to figure out how can I make this.
I've made it work when I generate test HTML inside print.php and then I type in the url mysite.com/print.php ... it renders the PDF and allows me to download it or see it in another browser tab.
How can I achieve this via AJAX?
You can't download something via AJAX, you could simulate the behavior using an hidden iframe.
Not that you can't download it, but, it will never end up in the filesystem for saving purpose because javascript can't do that for security reasons.
Anyway people always find solutions, you can try this: https://stackoverflow.com/a/23797348/1131176
i did achieve this, by doing just a trick, this example is made in codeigniter, so you can adapt it, first, the ajax method:
$.ajax({
url: base_url+"controladorapr/exportComprobanteIngresos", //method i called
data: $(this).serialize() //i serialized data from a form,
type:"POST",
dataType: 'JSON',
success: function (data) {
//create a link to download the pdf file
var link=document.createElement('a');
//i used the base url to target a file on mi proyect folder
link.href=window.URL = base_url+"exportacion.pdf";
//download the name with a different name given in the php method
link.download=data.nombre_archivo;
link.click();
//this js function hides the loading gif i use
hideLoad();
}
});
Now, let's head to the method on my controller:
function exportComprobanteIngresos(){
//receive your ajax data
$fecha = $this->input->post("fecha_comprobante_ingresos");
$fecha = date_format(DateTime::createFromFormat('d/m/Y', $fecha), "Y-m-d");
//send data to pdf
$data["fecha"] = $fecha;
//do some query here to send data and save it into $data[] array
//pdf size
$tamaño = 'A4';
//create a file name
$nombre_archivo = "Comprobante_ingresos".date_format(DateTime::createFromFormat('Y-m-d', $fecha), "Y_m_d").".pdf";
//load dompdf method, i will show this later, and send the data from db and file name
$pdf = $this->pdf->load_view("pdf/comprobanteIngresos", $data, $tamaño, $nombre_archivo);
//save the pdf content into the file we are downloading
file_put_contents('exportacion.pdf', $pdf);
//send data back to javascript
$data2["nombre_archivo"] = $nombre_archivo;
echo json_encode($data2);
}
now, we will include dompdf, to use dompdf on codeigniter see this answer: Codeigniter with dompdf
Now, this is the code from dompdf i use in the function '$this->pdf->load_view':
$dompdf = new Dompdf();
$html = $this->ci()->load->view($view, $data, TRUE);
$dompdf->loadHtml($html);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper($size, 'portrait');
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF to variable and return it to save it into the file
$output = $dompdf->output();
return $output;
now with this, i managed to use ajax with dompdf and put a loading gif to it, and it works great, by last, the php file you load on '$this->pdf->load_view' doesn't have a header or else, is pure html and php, hope this helps!
I have been searching for a good method, and banging my head against the wall.
In a file sharing service project, I have been assigned to determine the best method available for upload large files.
After searching a lot of questions here on stackoverflow and other forums, here's what I got :
Increase the script maximum execution time, along with maximum file size allowed
This case really doesn't fit good. It will almost timeout everytime when the file is being uploaded through a normal broadband connection (1mbps-2mbps). Even if PHP scripts are executed after the upload has been done, there is still no guarantee that the upload will not timeout.
Chunked upload.
Although I kind of understand what I'm supposed to do here, but what I'm confused about is that, say a 1GB file is being uploaded, and I'm reading it in chunks of 2MB, still if the upload is slow, the php script execution will timeout and give error.
Use other languages like Java and Perl?
Is it really efficient to use java or perl for handling file uploads?
Method used by the client is not the problem here, as we'll be issuing a client SDK, and can implement the method of our choice in it. Both the client and server end implementations will be decided by us.
What method, according to you, should be the best one, considering that the memory usage should be efficient, and there may be many concurrent uploads going on?
How do Dropbox, and similar cloud storage services handle big file uploads, and still stay fast at it?
I suggest you use PHP I/O streams with AJAX. This will keep the memory footprint low on the server and you can easily build an async file upload. Note that this uses the HTML5 API which is available only in modern browsers.
Check out this post: https://web.archive.org/web/20170803172549/http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/
Pasting the code from the article here:
HTML
<input type="file" name="upload_files" id="upload_files" multiple="multiple">
JS
function upload(fileInputId, fileIndex)
{
// take the file from the input
var file = document.getElementById(fileInputId).files[fileIndex];
var reader = new FileReader();
reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
reader.onloadend = function(evt)
{
// create XHR instance
xhr = new XMLHttpRequest();
// send the file through POST
xhr.open("POST", 'upload.php', true);
// make sure we have the sendAsBinary method on all browsers
XMLHttpRequest.prototype.mySendAsBinary = function(text){
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
if(typeof window.Blob == "function")
{
var blob = new Blob([data]);
}else{
var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
bb.append(data);
var blob = bb.getBlob();
}
this.send(blob);
}
// let's track upload progress
var eventSource = xhr.upload || xhr;
eventSource.addEventListener("progress", function(e) {
// get percentage of how much of the current file has been sent
var position = e.position || e.loaded;
var total = e.totalSize || e.total;
var percentage = Math.round((position/total)*100);
// here you should write your own code how you wish to proces this
});
// state change observer - we need to know when and if the file was successfully uploaded
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
// process success
}else{
// process error
}
}
};
// start sending
xhr.mySendAsBinary(evt.target.result);
};
}
PHP
// read contents from the input stream
$inputHandler = fopen('php://input', "r");
// create a temp file where to save data from the input stream
$fileHandler = fopen('/tmp/myfile.tmp', "w+");
// save data from the input stream
while(true) {
$buffer = fgets($inputHandler, 4096);
if (strlen($buffer) == 0) {
fclose($inputHandler);
fclose($fileHandler);
return true;
}
fwrite($fileHandler, $buffer);
}
May be the tus HTTP-based resumable file upload protocol and its implementations?
https://tus.io/
https://github.com/tus
https://github.com/ankitpokhrel/tus-php
I am trying to transfer a movie-clip staged in a swf(on local machine) to a remote server. Below is a part of the action-script code concerned with it;
function createJPG(mc:MovieClip, n:Number, fileName:String) {
trace("sdf:");
var jpgSource:BitmapData = new BitmapData(mc.width,mc.height);
jpgSource.draw(mc);
var jpgEncoder:JPGEncoder = new JPGEncoder(n);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
trace("jpegStream::"+jpgStream);
var header:URLRequestHeader = new URLRequestHeader("Content-type","application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("http://example.com/arts/savefile.php?name=" + fileName + ".jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
var loader:URLLoader = new URLLoader();
trace("navigatetoURL:");
sendToURL(jpgURLRequest); }
The php script in the remote server to save the file is;
<?php
set_time_limit(0);
if( isset($GLOBALS['HTTP_RAW_POST_DATA']) ) {
$imageFile='images/'.$_GET['name'];
$fp = fopen($imageFile, 'w+');
// get bytearray
fwrite($fp, $GLOBALS['HTTP_RAW_POST_DATA']);
fclose($fp);
if( file_exists($imageFile) ) {
echo 'File saved.';
}
else {
echo 'Error: Problem writing the file.';
}
}
else {
echo 'Error: Not data available to write the file.';
}
?>
I want to close the swf when the upload is complete., I would like to know how to return a value(may be a number which I intend to use to indicate completion of file transfer) from the php script to the swf and how to receive that value in the swf?
Would really appreciate any help.
Thanks!.
The URLLoader supports an Event.COMPLETE event, which is fired when your remote operation returns data and that data has been stored in URLRequest.data.
From PHP, the data that you echo is what Flash will receive, so you might want to consider a more complex data type than a single string, maybe use json and pass an object that looks like:
{result:1,message:"some message"};
This gives you a simple 1/0 result value for easy checking and a string message for output to the user. You would do that in PHP by creating an associative array and encoding it with JSON.encode().
Then on the Flash side you will add an event listener to your URLLoader to detect the COMPLETE event, and use the JSON class from the Adobe core library to decode your PHP output to a useable object.
I always use AMFPHP nowadays http://sourceforge.net/projects/amfphp/ . Gotoandlearn has a nice free tutorial on it http://www.gotoandlearn.com/ .