HTTP POST call embedded in a static html page

Question

I want to embed an HTTP call which returns a png image into an html page.

I will run the page on github's gh-pages if that makes a difference.

The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png

Note that sometimes the url doesn't return the png as the service is sometimes down.

I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.

Do I use an iframe, form, javascript?

Thanks! Scott

What is the idea behind doing this? Why can't you just embed the image? ``? — Roddy of the Frozen Peas, Aug 23 '12 at 22:05
The URL is making a call to a server, which runs some `R` code, which spits out a png, so it's not a link to an image, but a function that runs which results in an image. — sckott, Aug 23 '12 at 22:11
Well, if the call makes an image and you put it in an image tag, the client will get an image _and_ it'll display immediately. — TheZ, Aug 23 '12 at 22:12
Good point. Seems to work. I just thought it had to be more complicated than that. — sckott, Aug 23 '12 at 22:16
Well, if (as you say) it can be down sometimes then you can end up getting a broken image if you embed it before checking. Here's a vanilla-js fiddle I whipped up that will only append the image to the screen if it loads successfully http://jsfiddle.net/BwJeC/ — TheZ, Aug 23 '12 at 22:19

score 2 · Accepted Answer · answered Aug 23 '12 at 22:58

[I might as well answer properly]

When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.

However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.

Here's the concept in vanilla-js:

img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";

You can also see it in action here: http://jsfiddle.net/BwJeC/

answer accepted...by the way, does your js fiddle site prepare .js files for you to run locally? — sckott, Aug 23 '12 at 23:26
@ScottChamberlain No, it is simply a testbed site that makes it easy to share html/css/js examples (and it has several js libraries for easy loading). Running AJAX locally can be quite a pain unless you know how to set your browser to allow it. Thankfully, loading images isn't seen as this kind of problem ;) — TheZ, Aug 23 '12 at 23:30

score 0 · Answer 2 · edited Feb 09 '16 at 07:05

0

I really don't understand why you want to POST.

Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />

The best would still be to to a simple get call:

<img src="/dynamicallyGeneratedPicture" />

with a route or script that return a document of type image.

edited Feb 09 '16 at 07:05

marc_s

732,580
175
1,330
1,459

answered Aug 23 '12 at 22:17

3on

6,291
3
26
22

This should give you the other half of the solution, it's essentially getting binary data back via a HttpRequest and then converting it to a Base64 string: http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html – joocer Aug 23 '12 at 22:20
Thanks for the help, looking into these various solutions – sckott Aug 23 '12 at 23:25

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

You could use XHR to load the binary data from the external, dynamic page and set the content of the image.

This question, is very much similar Or this

edited May 23 '17 at 10:29

Community

1
1

answered Aug 23 '12 at 22:19

HLL

169
10

HTTP POST call embedded in a static html page

3 Answers3