I have a php script which outputs an image, how can I POST data to it and display the resulting image without refreshing the rest of the screen, so far I have got the code below which returns a png.
function go(){
$.post("test_image.php", $("frm").serialize(),
function(data){
//alert(data);//proves a png image is returned.
//How do I now display the returned image (preferably to '$("#modified")')
});
}
I can't display the returned image.
You could take the resulting data and put it into a data: URI (more info here) but that won't work in IE, is likely to be slow, is not cachable in any way and uses 33% more memory than necessary due to the base64 encoding.
The most elegant way would be for your script to write the image data to a file, and to return the URL of that new image.
Your Ajax callback could then do a simple
$("#myimage").src = data;
Related
I currently have a large base64 image uri (Received via external JS script) and want to embed it into the HTML page. I did this successfully locally but now that it pulls it from another place it seems to not work, it loads part of the image then says "Image corrupt or truncated. URI in this note truncated due to length." This occurs both just in the <img> tag and using <canvas>, is there any way to load large images from uri? Or another way to display images from a base64 string?
What doesn't make sense is it works fine if I specify the base64 string as a javascript variable, but when I include it as a variable in an external script, it gives this error. Would breaking up the string then putting it back together fix this?
You shouldn't use data-URLs for huge files.
You could try to convert your base64 URL into a blob object and the blob object into a temporary blob url using the following javascript function:
function dataurlToBlobUrl(url){
var parts = url.split(',',2);
var mime = parts[0].substr(5).split(';')[0];
var blob = b64toBlob(parts[1],mime);
return URL.createObjectURL(blob);
}
And the b64toBlob function from here:
https://stackoverflow.com/a/16245768/5406901
Just make sure to use "URL.revokeObjectURL" whenever you no longer need the blob url.
I am generating WAV data using JavaScript, and I'm able to generate the data and store it in a variable waveFileOutput, then send it to an embedded player by setting the source to following dataURI I set up:
var dataURI = "data:audio/wav;base64," + escape(btoa(waveFileOutput));
I'm also able to get the file to (sort of) "save" by opening a window using the same data after encoding it and saving the window as a file. The problem is that the data is not properly encoded as a WAV file in the new window, even though the embedded play is fine with the encoding. I need to figure out the correct way to encode it. Here are a couple of things I've tried (but neither works):
Try #1: window.open("data:application/octet-stream," +
encodeURIComponent(waveFileOutput));
Try #2: window.open("data:application/octet-stream," +
escape(btoa(waveFileOutput)));
I can post the whole (working) file if that helps, but seemed like it might be a waste of space.
Suggestions for how to get the data encoded properly when "saving" it using this approach?
I've been working on using gif.js (http://jnordberg.github.io/gif.js/) to create gifs on the site.
I realized gif.js returns the gif image in blob format.
in the demo is like:
gif.on('finished', function(blob) {
window.open(URL.createObjectURL(blob));
});
seems that the URL(URL.createObjectURL(blob)) it returns only lives on the browser memory which means the next time I open the page, the URL will be 404.
I'd like to save the gifs into database using mySQL, so I have a gif gallery to show.
I tried to console log and see the blob, it seems to be an object that contains the size(ex:12345) and type(ex:image/gif). I couldn't even find the image information.
How couldn't I save the gifs into database and be able to retrieve it to make a gallery?
Thanks very much.
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() + '" />');
});
});
I've got an HTML5 Canvas. I .toDataURI it and send that off to PHP with AJAX. PHP stores that in a database.
Then I have a different page that has an img element to request that data from the database and render it. But it... won't. The data's getting through, I can see it with the browser's view source function:
<img id="embedded" src="data:image/png;base64,iVBORw...5CYII=" />
(ellipsis added)
It's not being truncated or anything stupid like that, I have document.write's and echo's in every script from where the data is generated by the canvas to where it's embedded into the final element, and it's getting through completely intact.
I've tried it with image URIs generated by other sources and there's no problem. I've tested this in Chrome 12 and Firefox 5, behavior was identical in both.
A final oddity is that when the canvas is totally blank, the image data it generates IS displayed: I get a blank image with the same dimensions as the original canvas. But as soon as I draw anything on it, nothing. Just the familiar little error-loading-image icon.
This is my code for the receiving end:
http://pastebin.com/Hw1ykd1i
And for the sending end:
http://pastebin.com/hwsEfsaD
If I've fully understood your problem - you're saying the receiver isn't working (i.e. the thing that mirrors out the output).
You need to encode your data:
function postToServer(data) {
data = "data=" + encodeURIComponent(data);
// continue with XHR POST
This works with the blank canvas because it's made up of letters without any symbols. As soon as you draw, the canvas base64 value has characters such as + in it, which in POST language means space. So if you encodeURIComponent your value, those symbols will get sent intact to your server, and the receiver thingy should be able to render the output correctly.