asked on

Return StreamContent with ajax call

Hi Guys,
I am using asp.net MVC project.
I have an AJAX call from the UI side that goes to the server and return Picture as "StreamContent" (that is a type of .net class return).

Here is the way I call this method that returns StreamContent:

 function ClickTest() {
             var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf"
             var ajaxOptions = {};
             ajaxOptions.cache = false;
             ajaxOptions.url = "http://localhost:20050/api/Raster/Load";
             ajaxOptions.type = "GET";
             ajaxOptions.headers = {};
             ajaxOptions.headers.Accept = "application/octet-stream";
             ajaxOptions.data = { uri: url, pageNumber: 1, resolution: 0, mimeType: "", bitsPerPixel: 0, qualityFactor: 0, imageWidth: 0, imageHeight: 0 };
             ajaxOptions.success = function (result) {
                 debugger;
                 console.log(result);
                 $("#imgid").html("<img src=" + result + ">");
                 //$("#imgid").html(result);
             };
             $.ajax(ajaxOptions);
         }

Open in new window

It seems that I get some binary result but when I place it in the dom I don't get the picture.

There is any way to convert this result and put it like a picture.

Example of the result I am getting.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Alternative would be to base64 the string before sending it to the browser and simply adding the result to the img src string.

Moti Mashiah

ASKER

Hi Julian,

Thank you for your answer.
I wrote something like:

function ClickTest() {
        var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf"
        var ajaxOptions = {};
        ajaxOptions.cache = false;
        ajaxOptions.url = "http://localhost:20050/api/Raster/Load";
        ajaxOptions.type = "GET";
        ajaxOptions.headers = {};
        ajaxOptions.headers.Accept = "application/octet-stream";
        ajaxOptions.data = { uri: url, pageNumber: 1, resolution: 0, mimeType: "", bitsPerPixel: 0, qualityFactor: 0, imageWidth: 0, imageHeight: 0 };
        $.ajax(ajaxOptions).done(function(result){
            debugger;
            var base64Data = btoa(result);
            $("#imgDivid").html("<img src='data:image/jpeg;base64,''" + base64Data + "'>")
        });
    }

Open in new window

Now I am getting error on "btoa(result);"

"Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range."

Btw, what is BTOA method for?? I never use that before.

Thank you Julian.

Julian Hansen

This might work better than the code above

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
	var blb = new Blob([xhr.response], {type: 'image/png'});
	var url = (window.URL || window.webkitURL).createObjectURL(blb);
	var image = document.createElement('img');
	image.src = url;
	document.getElementById('imgid').appendChild(image);
}

xhr.open('GET', '"http://localhost:20050/api/Raster/Load";');
xhr.send();

Open in new window

Julian Hansen

Btw, what is BTOA method for?? I never use that before.

Converts binary to base64 - but it has varied results - my tests were a bit frustrating. I found the XHR process above to be the most reliable.

Moti Mashiah

ASKER

Hi Julian,
I copied your javascript code above and I am getting error;

Failed to load file:///D:/Projects/LeadTools/%22http://localhost:20050/api/Raster/Load%22;: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

seems like the xhr.optn go to the local machine path instead to HTML protocol.

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Moti Mashiah

ASKER

Julian,
The URL http://localhost:20050/api/Raster/Load contain params that I must pass to the method and I am not familiar with this XMLHttpRequest call.

can you tell me how can I pass params with the URL?

thank you.

Moti Mashiah

ASKER

can I do something like xhr.open('GET', 'http://localhost:20050/api/Raster/Load'+ url);

Moti Mashiah

ASKER

like I need something like this:

  var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf"
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
            var blb = new Blob([xhr.response], { type: 'image/png' });
            var url = (window.URL || window.webkitURL).createObjectURL(blb);
            var image = document.createElement('img');
            image.src = url;
            document.getElementById('imgDivid').appendChild(image);
            
        }

        xhr.open('GET', 'http://localhost:20050/api/Raster/Load' + url);
        xhr.send();

Open in new window

Moti Mashiah

ASKER

k I got it.

 var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf"
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
            var blb = new Blob([xhr.response], { type: 'image/png' });
            var url = (window.URL || window.webkitURL).createObjectURL(blb);
            var image = document.createElement('img');
            image.src = url;
            document.getElementById('imgDivid').appendChild(image);
            
        }

        xhr.open('GET', 'http://localhost:20050/api/Raster/Load/?uri=' + url);
        xhr.send();

Open in new window

Moti Mashiah

ASKER

There is any other elegant way to pass these params?

Julian Hansen

There is any other elegant way to pass these params?

Such as?
What is the problem with doing it this way?

Moti Mashiah

ASKER

No problem.
I just like to do it in the way I do it with ajax call.

Thank you sooooooo much Julian.

Moti Mashiah

ASKER

Thank you Julian.

Julian Hansen

You are welcome.