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:
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.
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);
}
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.
ASP.NETAJAX
Last Comment
Julian Hansen
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Alternative would be to base64 the string before sending it to the browser and simply adding the result to the img src string.
ASKER
Hi Julian,
Thank you for your answer.
I wrote something like:
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.
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 + "'>")
});
}
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.
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();
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.
ASKER
Hi Julian,
I copied your javascript code above and I am getting error;
Failed to load file:///D:/Projects/LeadTo
seems like the xhr.optn go to the local machine path instead to HTML protocol.
I copied your javascript code above and I am getting error;
Failed to load file:///D:/Projects/LeadTo
seems like the xhr.optn go to the local machine path instead to HTML protocol.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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.
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.
ASKER
can I do something like xhr.open('GET', 'http://localhost:20050/api/Raster/Load'+ url);
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();
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();
ASKER
There is any other elegant way to pass these params?
There is any other elegant way to pass these params?Such as?
What is the problem with doing it this way?
ASKER
No problem.
I just like to do it in the way I do it with ajax call.
Thank you sooooooo much Julian.
I just like to do it in the way I do it with ajax call.
Thank you sooooooo much Julian.
ASKER
Thank you Julian.
You are welcome.