I am newish to aspx pages but not to c#.
I have an SQL statement that will get images from ms sql database and I can do that fine and have a list or datatable of byte arrays for the images.
I think I want to use a
The part where I'm most confused is how to display a byte array as an image?
Thank you.
You need to write an handler (*.ashx) to do the job of getting an image's bytes and writing them to the response stream. Then you reference this handler in the src="" attribute of your . Here's a tutorial on how to do this:
http://www.developerfusion.com/code/5223/using-ashx-files-to-retrieve-db-images/
You could use inline images if image in DB is rather small.
// This is just example, you get it from DB
byte[] image = System.IO.File.ReadAllBytes(#"c:\\test.png");
string imageBase64 = Convert.ToBase64String(image);
...
// Output in your HTML page
<img src="data:image/png;base64,<%= imageBase64 %>" alt="Test inline" />
Related
This is for hybrid application which runs in android mobile webview container but has mvc code behind. That's why I cannot use window.open to show pdf.
I need to use iframe or embed may be to show it on the mvc view.
I get data as bytes from database.
byte[] RptData;
SqlReportData = reader.GetSqlBytes(0);
RptData = SqlReportData.Value;
return RptData;
then I convert it to Base64String and pass in viewModel.
viewModel.PdfDataString = Convert.ToBase64String(pdfData);
I tried pretty much top suggestions I could find but none of them working for me.
Iframe src set large base64 data
how to display base64 encoded pdf?
Display ASP.NET generated pdf byte[] to web page without saving the file
<div><iframe src="" type="application/pdf"></iframe>
</div>
<div>
<embed src="" width="100%" height="100%" type="application/pdf"/>
</div>
<script>
var pdfData = '#Model.PdfDataString';
$("iframe").attr("src", 'data:application/pdf;base64,{0}'.replace('{0}', pdfData));
$("embed").attr("src", 'data:application/pdf;base64,{0}'.replace('{0}', pdfData));
</script>
I want to show this Base64String data as pdf on mvc view.
I am trying with iframe and embed both.
iframe shows blank and embed is not displaying.
Chrome debugger shows:
Resource interpreted as Document but transferred with MIME type application/pdf: "data:application/pdf;base64,JVBERi0xLjcKCjQgMCB....(ShowMore 1.6MB)
I'm working on a photo gallery using ASP.NET.
I'm storing user's images in a SQL database. I'm not sure how should displaying images look like.
Let's say there is 1 picture per user, I was doing something like that:
get image from database
save it on server's disc as "file.jpg"
ASP:Image.uri = "file.jpg"
And that worked fine until I found out that If few users loads that page at the very same time, It might not work properly.
Then I though changing "file.jpg" into some random string would help me:
get image from database
save it on server's disc as "ABCDUDHDJSAKFHADGJKHAKADFAD.jpg"
ASP:Image.uri = "ABCDUDHDJSAKFHADGJKHAKADFAD.jpg"
File.Delete("~/ABCDUDHDJSAKFHADGJKHAKADFAD.jpg");
But it wasnt possible to delete this file because it was still being used by a server.
What would be the proper way to solve my problem? User in my photo gallery will eventually see 12 photos at the same time.
What I usually do is serve images from DB using a generic handler (ashx file).
What you need to do is create an ashx file and use something along these lines:
context.Response.BinaryWrite(myImage);
The you create image tags like so:
<img alt="whatever" src="/images.ashx?iid=1243 />
Where iid is the unique ID of the image in the DB.
You should not store the file actually. You should stream it. For example create a handler which returns the image from an user with a specific ID and call it with that ID like image.ashx?id=1. The handler could look like
Image image; // image from your database
using(MemoryStream ms = new MemoryStream())
{
image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
ms.WriteTo(context.Response.OutputStream);
}
Response.ContentType = "image/png";
This handler you can use like a static image file. So, you might even use it for a background-image:
<div style="background-image: url(image.ashx?id=1)">Username</div>
I know it is be possible to do this:
<asp:Image runat="server" ImageUrl="~/MyImageHandler.ashx?imageid=2" />
...but I have a case where the byte array data is only available to the Page (ie, not available in the session, and cannot be referenced by an id) so I can't point the ImageUrl to a different page.
Is there a way of giving an asp:Image the byte array to render as an Image?
The major hurtle you're going to have to deal with is that an <asp:Image/> element gets rendered as a regular <img />, which needs a src attribute that points at a URL.
That being the case, I see two hairy alternatives:
Use the technique described here to embed your image encoded in Base64 in the src attribute. Note that this does not work with Internet Explorer.
Embed your Base64-encoded image into the page as a hidden <input /> element. You could then use JavaScript to POST that data back to the server, which would just send it back to the browser using Response.Write() (being sure to set the Content-Type appropriately, of course).
The only decent solution to this is to put the byte array in session. If you're concerned about uniqueness (multiple people getting each other's byte arrays), use a random GUID as the key.
I have a method that returns an Image.
How can I assign that Image to my ImageButton control so it has that image set?
Since you're dealing with HTML, you'll need to save the Image to a file, then use that file in the ImageButton's ImageUrl property.
I believe an ImageButton takes the path to an Image, not an actualy Image object, as the browser renders it a an tag.
What you could do is save thr image to disk, return the path to the image form your method and then have
<asp:ImgageButton id="imgButton1" runat="server" imageUrl="<%= GetImageUrl()>" />
The above syntax is not exact, it might be "<% Response.Write(GetImageUrl())>" but you get the picture
If this method returns an Image object, you will need to save out the image to a physical location on your webserver (somewhere like Server.MapPath("~/images/")). Then you will need to set the ImageUrl property of the ImageButton control to this location.
If this method returns a relative path to the image file, simply set the ImageUrl property of the ImageButton to the path returned by the method.
In short, you can't. Well not directly anyway.
You will have to write your image to file and point the image button at your image file
or you can have a web page that returns the image in the response and use that as your ImageUrl
The reason for this is that your ImageButton just renders to HTML which has no support for attaching images ATM.
You can try the following approach:
1) Firstly, get the binary data from the image:
public byte[] ImageToByteArray(System.Drawing.Image image)
{
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
return ms.ToArray();
}
2) Secondary use Inline Images with Data URLs idea:
Inline images use the data URI scheme
to embed images directly within web
pages. As defined by RFC 2397, data
URIs are designed to embed small data
items as "immediate" data, as if they
were referenced externally. Using
inline images saves HTTP requests over
externally referenced objects.
System.Drawing.Image image = GetImageFromSomewhere(...);
byte[] imageData = ImageToByteArray(image);
string imageBase64 = Convert.ToBase64String(imageData);
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
imgButton.Src = imageSrc;
But unfortunately, this won't work for IE5-7 (should work in IE8).
My controller, in a nutshell is this:
chart1.SeriesCollection.Add(SC);
using (MemoryStream ms = chart1.GetChartStream())
{
return File(ms.ToArray(), "image/png");
}
My view is this:
$('#targetDiv').load("Home/GetImage");
And I'm getting garbled characters when rendered. Any ideas?
thanks,
rodchar
You need to use an img tag:
<img src="Home/GetImage" alt="" />
When you write $('#targetDiv').load("Home/GetImage"); you are basically saying: send a GET requets to Home/GetImage using Ajax and if the request succeeds update the contents of #targetDiv with the result. As your controller action sends binary data, this binary data will be injected into the div.
You should set the content type of your response to accommodate the fact you're sending back an image. If you don't your binary stream will be interpreted as text, hence the garbled stuff you get.
There's a related question here: Can an ASP.NET MVC controller return an Image?
Try adding this to your code, before you read the file and send it back
this.Response.Clear();
this.Response.ContentType = "image/png";
on the markup side instead of putting the content into a div you need to put it into an image tag.