How to Download image in c# using webclient and use Javascript to get image from aspx page

Question

I've seen fragments of various answers to this questions here and there, and I can't get any of them to work.

The purpose of the code is so I can download an image from the internet via an aspx page. so from Javascript, I'll call the aspx page, which should serve up the data, which I then feed into an Image element, but so far no dice.

I'm currenty trying: in GetHotlink.aspx page:

System.Net.WebClient wc = new System.Net.WebClient();
byte[] data = wc.DownloadData("http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg");
Context.Response.Clear();
Context.Response.ContentType = "image/JPEG";
Context.Response.OutputStream.Write(data, 0, data.Length);
Context.Response.Flush();
Context.Response.Close();
Context.Response.End();

and in Javascript:

var url = "GetHotlink.aspx";
var tmptxt = call_genpic(url);          // call server with filename and minimum layer value.
var imageObj = new Image();
imageObj.setAttribute('src', 'data:image/jpeg;base64,' + tmptxt);
document.body.appendChild(imageObj);


function call_genpic(url) {
    var reqObj = createRequest();
    reqObj.onreadystatechange = function () {
        if (reqObj.readyState == 4) {
            //callback  
        }
    }
    reqObj.open("GET", url, false);
    reqObj.send(null);
    var V = "";
    V = reqObj.responseText;
    return V;
    return(reqObj.responseText);
}

I can see that I'm getting a nice chunk of data back from the server when I call the aspx page, but the image that I add to the DOM comes up as the broken image icon. No Darth Vader! I suspect that somewhere along the way Darth is getting into the wrong format, or is getting the wrong header or so. Any ideas?

I would start with saving the contents from your webclient out to a file and see if that image shows, make sure of the content. Then move to the javascript side if it works fine. — tbddeveloper
– tbddeveloper, Commented Sep 8, 2014 at 20:00
@Hammerstein, good idea. I dumped the data array to a file, using a filestream and binary writer and the resulting image looks fine. So I can say that the data array is populated correctly. The Javascript side also looks ok to me. When I use a string that represents a jpg image, instead of the data from serverside, the image element I add to the DOM looks fine. So there is still something wrong in between! — Jralford
– Jralford, Commented Sep 8, 2014 at 20:16
@Hammerstein saving the image to a file is inefficient and more complex way to do things. You should give write permissions to a temp folder on the server, there should be a way to clear temp images and so on. Serving the data directly is better. Of course there may be other issues that make saving to disk a good option like caching or supporting browsers which do not support base64 images — Stilgar
– Stilgar, Commented Sep 8, 2014 at 20:34
@Stilgar wasn't suggesting it as a permanent solution, simply as a step to debugging. I agree, saving it would be inefficient. — tbddeveloper
– tbddeveloper, Commented Sep 9, 2014 at 12:21

Stilgar · Accepted Answer · 2014-09-08 20:30:20Z

1

You are using base64 data as your image source but you are not encoding your response as base64 string. Use this method to convert the byte array to string and serve it back to the client as string not as binary data.

Also your JavaScript code looks all messed up. Why do you have two returns one after another. You should create the image and set its data in the callback (right where you have a comment)

answered Sep 8, 2014 at 20:30

Stilgar

23.8k16 gold badges68 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jralford Over a year ago

thank you. The base64 encoding was what I was missing. And thanks for the code tips... A cleanup is overdue!

Collectives™ on Stack Overflow

How to Download image in c# using webclient and use Javascript to get image from aspx page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related