Question

Suppose I need to call an RPC HTTP api that requires the client to HTTP POST (potentially with a file) a uri and on success results in a “Content-Type: image/png” binary. Is there any way I can do this within html/js and insert the png into the HTML document? Or will I need to provide a proxy service that supports HTTP GET?

Answer 1

There is an answer here that looks like it will help you. I did not know this solution myself, but did some research for you:

http://blog.calyptus.eu/tags/binary-javascript/

IF you check out the source, you can see an example of how to display the base64 data that you get from the api response (the parameter being passed to show() here)

function show(data){
var png = new PNG(data);
var img = document.getElementById('image'), limg = document.getElementById('largeimage');
document.getElementById('nativeimage').src = 'data:image/png;base64,' + data;

img.innerHTML = '';
limg.innerHTML = '';
img.style.width = png.width + 'px';
img.style.height = png.height + 'px';

limg.style.width = (png.width * 3) + 'px';
limg.style.width = (png.height * 3) + 'px';

var line;
while(line = png.readLine())
{
    for (var x = 0; x < line.length; x++){
        var px = document.createElement('div'), px2 = document.createElement('div');
        px.className = px2.className = 'pixel';
        px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight('0', 6);
        img.appendChild(px);
        limg.appendChild(px2);
    }
}

This might be a good starting point to experiment with. His example looks to be exactly what you’re trying to do