I am getting an image as response to a post request. How do I show the same on web-browser using JavaScript. Is it possible to handle binary data using JavaScript?
You might be able to create an img-tag with a base64 src:
<img alt="Embedded Image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
This can probably be done dynamically aswell, using .createElement and setting the src.
but then you need to convert your binary data to base64 using javascript somehow. It would be simpler if you could do that server-side, since handling binary data in javascript might cause you some trouble. That would however give you quite some overhead, but maybe thats not an issue.
Otherwise, see if this helps you:
http://www.webtoolkit.info/javascript-base64.html
Depending on the data format you might be able to use the data URI to load the image. Note to watch out for browser support.
using Gears you could turn the response into a blob and bind to an URL with the local cache server. after that, any reference to that URL will answer locally with the image data.
The most cross-browser way to do this would be to simply fetch the image URL as the response of the POST request, and then make a GET call to the image using img src="..."
No: images are always loaded from an URL
Related
I have an AngularJS front-end which sends small and big images to an API. It encodes the image in base64 and then send it into a JSON document.
Is there a best/faster way to do this ? Maybe not encoding the image but send a JavaScript File object ? Or something else ? (The images can be up to 5Mb).
There is a concept known as multipart-form data, that can be used for file upload. Java provides libraries to handle the uploaded file and save it in a location of our choice. Please tell me if you want me to share the exact implementation. I can do it for you. You just need a do post request to API.
I've searched for this answer in the past but have never come across an answer for this problem. I'm hoping the SO community can finally put this question to rest. I need to know how to embed an image whose source bytes are retrieved via a POST request in JavaScript/ JQuery. POST is needed because in order to generate the image the server needs to be sent a base64 encoded string of instructions from the client. Sometimes those instructions are too lengthy to be sent via GET. Also, I'm working with some legacy code right now, so I'm trying to avoid changing major functions of the server code. It's still sth that is possible to do, just not preferred as editing server code won't always be an option in future situations.
I know you can embed base64 in an img tag. I know you can also do it by rendering the data on a canvas. But both of those methods require you either have an encoded base64 string...
<img src='data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0.....AwXEQA7'>
A standard URL...
<img src="www.examplesite.com/theimage.png">
Or a URL that uses GET parameters.
<img src="www.examplesite.com/getImage.php?id=9001">
What about a URL that uses POST parameters?
<script>
var url = 'www.examplesite.com/getImage.php';
var postData = {'id': 9001};
var outDiv = document.getElementById("outputDiv");
$.post(url,postData,function(data){
// What do we do here to display the returned image?
// The image will have the Content-Type: 'image/png'.
});
</script>
From the post data, create the image on the server, then return a code to the client to access the image e.g. imagabd1. Then have a getImage.php script which returns an image via a get with a unique identifier to the image created. Add an image element to the DOM and add the get request as the src. Example:
1) Post sends base64 data.
2) Server creates image and stores on server
3) Server returns a code, e.g. imagabd1
4) Create an image element on the client and add http://server/getImage?id=imagabd1 as the source. The server should know what image to return given this get request.
Make sure the script is returning the Base64, should be as simple as:
outDiv.html('<img src="' + data '">');
Or change the SRC attr of an image:
element.attr('src', data)
I have a web service call that returns {"data": BINARYDATA}. How can I pop up a dialog to download the file based on only those binary data? It could be a file of any type. I'm probably looking for a Javascript function, or maybe a browser-specific function? Thanks.
EDIT: I am checking to see how the data are encoded. Will update soon with that (important) information.
EDIT 2: I investigated Using HTML5/Javascript to generate and save a file . Thank you for the referral.
My main problem with the dataURI method is that my files are larger than 256kB
Resolved:
The answer is that this is not a good client-side task (particularly when dealing with large files). It's much better to change the server-side code to return the appropriate HTTP response (with headers) instead of JSON.
Thanks everyone for your help in the comments.
From the point of view of uploading, we can use MIME multipart to carry multiple files within a single request. I'm wondering if it is possible for a web server returning set of images (binaries) through a single JSON message to the browser at the client side? If so, is it able to be demuxed and rendered by the browser as retrieving multiple images by using tags?
Please advise.
Thanks & regards,
William
You can use base64 to encode the image and included in json. Then use data scheme URI to retrive the image.
More about data scheme URI.
http://en.wikipedia.org/wiki/Data_URI_scheme
What is the best way to generate image data from the contents of an HTML canvas element?
I'd like to create the image data such that it can be transmitted to a server (it's not necessary for the user to be able to directly save to a file). The image data should be in a common format such as PNG or JPEG.
Solutions that work correctly in multiple browsers are preferred, but if every solution depends on the browser, recent versions of Firefox should be targeted.
Firefox and Opera have a toDataURL() method that returns a data-URL formatted PNG. You can assign the result to a form field to submit it to the server.
The data URL is base-64 encoded, so you will have to decode it on the server side. You would also need to strip off the "data:image/png;" part of course.
I think a lib you can use is Canvas2Image, it uses native features from Canvas, but it won't work on any browser. I have an optimized version of this lib, if you want to, I'll share it with you.
Then you could get the generated Data URI and send it using Ajax to the server.