I have a script that uses jQuery to POST data through AJAX to a PHP script, that uses that data to create a dynamic JPG image. The PHP script returns the binary image data as output using the PHP header image/jpeg command (so far so good).
Now I want to display that image in the client, but I haven't been able to find a proper solution for this yet. After reading up a bit I understand a possible solution would be to have the PHP script encode it in base64 and return the string to the client as a data URI. However, that solution won't suffice because it is not supported by IE < 8 and still limited to 32K images in IE 8.
For the moment, I am writing the image to a temp dir on the server and return a filename to the client. However, there must be another way to solve this more elegantly through. Any advise on how I can use jQuery/JavaScript to display the returned binary image data in the browser?
Thanks!
Per my comment, here's what I had in mind. This could possibly be a solution for you, but certainly it depends on your code.
You could create the img tag dynamicaly and pass url parameters to your php script instead of doing an ajax post. The code below only writes out what the img tag would look like since I don't really have a php script that does it.
Here's a fiddle: http://jsfiddle.net/fehays/954zK/
img script param: <input type="text" /><br />
<button>click</button><br />
<div id="imgText"></div>
$(function() {
$('button').click(function() {
$('#imgText').html('<img src="imagecreator.php?param=' + $('input').val() + '" />');
});
});
Related
I have a json file like this:
{"user":{"email":"user#test.com"},
"screenshot":{"blobFile":"<!DOCTYPE html><html lang=\"en\">...</html>"}}
and I want to take a screenshot, using XMLHttpRequest sending data a PHP file.
In PHP file getting request like:
$data = json_decode(file_get_contents("php://input"), true);
$htmlStr = json_encode($data["screenshot"]["blobFile"]); // <!DOCTYPE html><html lang=\"en\">...
so far everything is ok but how to convert this string to the image file and save a server?
I've tried html2canvas in PHP file but not fire.
any ideas?
I'd try to use PhantomJS. It's headless browser, which allows to interact with web pages many ways including making screenshots. It will require some time to understand how to work with it, but it definitely will get a result. Although, PhantomJS sometimes is a headache if your page is quite complicated structured, written using some frameworks like ReactJS, AngularJS, etc.
What it does it renders HTML page with styles including scripts serverside. If you save not HTML string but exact URL with COOKIE and SESSION data and then reconstruct conditions which user had in an opened page when you did a screenshot, it'll do a job.
See example here Screen Capture on PhantomJS
So I've been researching this for a couple days and haven't come up with anything conclusive. I'm trying to create a (very) rudimentary liveblogging setup because I don't want to pay for something like CoverItLive. My process is: Local HTML file > Cloud storage (Dropbox/Drive/etc) > iframe on content page. All that works, and with some CSS even looks pretty nice despite the less-than-awesome approach. But here's the thing: the liveblog itself is made up of an HTML table, and I have to manually copy/paste the code for a new row, fill in the timestamp, write the new message, and save the document (which then syncs with the cloud and shows up in the iframe). To simplify the process I've made another HTML file which I intend to run locally and use to add entries to the table automatically. At the moment it's just a bunch of input boxes and some javascript to automate the timestamp and write the table row from the input data.
Code, as it stands now: http://jsfiddle.net/LukeLC/999bH/
What I'm looking to do from here is find a way to somehow export the generated table data to another .html file on my hard drive. So far I've managed to get this code...
if(document.documentElement && document.documentElement.innerHTML){
var a=document.getElementById("tblive").innerHTML;
a=a.replace(/</g,'<');
var w=window.open();
w.document.open();
w.document.write('<pre><tblive>\n'+a+'\n</tblive></pre>');
w.document.close();
}
}
...to open just the generated table code in a new window, and sure, I can save the source from there, but the whole point is to eliminate steps like that from the process.
How can I tell the page to save the generated code to a separate .html file when I click on the 'submit' button? Again, all of this happens locally, not on a server.
I'm not very good with javascript--and maybe a different language will be necessary--but any help is much appreciated.
I suppose you could do something like this:
var myHTMLDoc = "<html><head><title>mydoc</title></head><body>This is a test page</body></html>";
var uri = "data:application/octet-stream;base64,"+btoa(myHTMLDoc);
document.location = uri;
BTW, btoa might not be cross-browser, I think modern browsers all have it, but older versions of IE don't. AFAIK base64 isn't even needed. you might be able to get away with
var uri = "data:application/octet-stream,"+myHTMLDoc;
Drawbacks with this is that you can't set the filename when it gets saved
You cant do this with javascript but you can have a HTML5 link to open save dialogue:
<a href="pageToDownload.html" download>Download</a>
You could add some smarts to automate it on the processed page after the POST.
fiddle : http://jsfiddle.net/ghQ9M/
Simple answer, you can't.
JavaScript is restricted to perform such operations due to security reasons.
The best way to accomplish that, would be, to call a server page that would write
the new file on the server. Then from javascript perform a POST request to the
server page passing the data you want to write to the new file.
If you want the user to save the page to it's file system, this is a different
problem and the best approach to accomplish that, would be to, notify the user/ask him
to save the page, that page could be your new window like you are doing w.open().
Let me do some demonstration for you:
//assuming you know jquery or are willing to use it :)
var html = $("#tblive").html().replace(/</g, '<');
//generating your download button
$.post('generate_page.php', { content: html })
.done(function( data ) {
var filename = data;
//inject some html to allow user to navigate to the new page (example)
$('#tblive').parent().append(
'Check your Dynamic Page!');
// you data here, is the response from the server so you can return
// your new dynamic page file name here.
// and maybe to some window.location="new page";
});
On the server side, something like this:
<?php
if($_REQUEST["content"]){
$pagename = uniqid("page_", true) . '.html';
file_put_contents($pagename, $_REQUEST["content"]);
echo $pagename;
}
?>
Some notes, I haven't tested the example, but it works in theory.
I assume that with this the effort to implement it should be minimal, assuming this solves your problem.
A server based solution:
You'll need to set up a server (or your PC) to serve your HTML page with headers that tell your browser to download the page instead of processing the HTML markup. If you want to do this on your local machine, you can use software such as WAMP (or MAMP for Mac or LAMP for Linux) that is basically a web server in a .exe. It's a lot of hassle but it'll work.
I'd like to be able to set an image source from a server but also have it return extra data relating to another server-side action.
I'll try to explain.
In my index.htm file I have the following in the <body> ...
<div id="BasicDemo" >
<img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>
The setImageSource() simply does this...
$("#nscreen").attr("src", "/control?size=800x480");
I'm not an experienced HTML coder but I'm experienced enough at coding in general to understand that the above is an implicit HTTP GET request against server-side code in order to request an image which is used to set the <img> source.
What I'd like to do in psuedo-code is...
var someResponse = getImageAndExtra("/control?size=800x480");
$("#nscreen").attr("src", someResponse.imagePath);
var extraData = someResponse.extra;
I'm not directly in control of the server-side code but I know the developer and will be working on this.
What sort of call can I use to request both an image source as well as extra data and still be able to set the "src" attribute? Also at the other end, how would the server-side code construct the response?
I can't help feeling I'm missing something really simple here.
Your server code would have to return a web page independent of the image.
This web page would contain the path to the actual image, and then (independently), your additional data.
One very common format for this type of communication is JSON. The server constructs a page which looks like this:
{extra: "some-data", image: "/path/to/real/image"}
Just that, no HTML, and it sets the Content-Type of the response to application/x-json instead of text/html.
Then the JS does an XMLHTTPRequest to fetch the above JSON, parses the response, and then sets the src attribute.
There is no location to which you could set the image source which would let you extract additional info (barring image steganography or header tricks or other dirty dealings).
I'm trying to push a form button and save all the html in the document to a xml file. Also If I have 3 frames or iFrames, I want to also save everything from my 2nd iframe id 'iframe2' (except the iframe itself) into a file, but have a dialog box pop up that says are you sure you want to save this file?
I'm not sure if this is possible, but if it is it would save me a step of writing xml to a file as well as displaying it in the browser. If its not possible in html4.01 is it possible in html5?
I can look at the html using $('#iframe2').html(); but not sure how to save it.
Thanks
There are 3 ways to do this as far as I know:
You could use Flash or Java or another browser plugin to make a save file dialog (check out Downloadify)
You could use data URIs (check out this answer. You'll want to change the mime type to application/xml)
You could use the server to trigger an attachement download with the contents you want. That content could be transmitted through AJAX (check out this question).
You can probably use a backend language like PHP to accept the string as POST data and write it to an XML file in one swoop.
if (window.confirm('Are you sure you want to save this file?')) {
$.post('/save.php', { 'html': $('#iframe2').html() }, function (_dta) {
window.alert(_dta);
});
}
and on PHP
<?php
$html = $_POST['html'];
file_put_contents('./iframe2.xml', $html);
echo 'saved!';
?>
I am aware of the hidden iFrame trick as mentioned here (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) and in other answers.
I am interested in a similar problem:
How can I use Javascript to download the current page (IE: the current DOM, or some sub-set of it) as a file?
I have a web page which fetches results from a non-deterministic query (eg. a random sample) to display to the user. I can already, via a querystring parameter, make the page return a file instead of rendering the page. I can add a "Get file version" button (our standard approach) but the results will be different to those displayed because it is a different run of the query.
Is there any way via Javascript to download the current page as a file, or is copying to the clipboard my only option?
EDIT
An option suggested by Stefan Kendall and dj_segfault is to write the result server side for later retrieval. Good idea, but unfortunately writing files server side is out of the question in this instance.
How about shudder passing the innerHTML as a post parameter to another page?
You can try with the protocol data:text/attachment
Like in:
<html>
<head>
<style>
</style>
</head>
<body>
<div id="hello">
<span>world</span>
</div>
<script>
(function(){
document.location =
'data:text/attachment;,' + //here is the trick
document.getElementById('hello').innerHTML;
//document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script>
</body>
</html>
Edit after shesek comment
To add to Mic's terrific answer above, some additional points:
If you have Unicode content (Or want to preserve indentation in the source), you need to convert the string to Base64 and tell the Data URI to treat the data as such:
(function(){
document.location =
'data:text/attachment;base64,' + // Notice the new "base64" bit!
utf8_to_b64(document.getElementById('hello').innerHTML);
//utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
utf_to_b64() via MDN -- works in Chrome/FF.
You can drop this all into an anchor tag, allowing you to set the download attribute:
<a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>
This will download the current page's HTML as index.html and removes the link used to generate the output. This assumes the utf8_to_b64() function from above is defined somewhere else.
Some useful links on Data URIs:
MDN article
MSDN article
Depending on the size and if support is needed for ancient browsers, but you can consider creating a dynamic file using data: URIs and link to it. I'be seen several places that do that. To get the brorwser to download rather than display it, play around with the content type you put in the URI and use the new html5 download attribute. (Sorry for any typos, I'm writing from my phone)
I don't think you're going to be able to do it exactly the way you want to. JavaScript can't create a file and download it for security reasons. Nor can it create it on the server for download.
What I would do if I were you is, on the server side, create an output file with the session ID in the name in a temp directory as you create the output for the web page, and have a button on the web page with a link to that file.
You'll probably want a separate process to remove files over a day old or something like that.
Can you not cache the query results, and store it by some key? That way you can reference the same report output forever, or until your file garbage collector comes along. This also implies that you can create static URLs to report outputs, which tends to be nice.