I have two identical images. One is saved as a .png in a folder, the other is saved as a SQLite blob in a database. I'm trying to figure out a good way to persist these images and show them in my view when needed.
I have two methods for trying to get these images into my view. The first one is reading the image files directly from the file system, converting them into a base64 string which I shove into a ViewBag. This method works fine.
The other method is trying to load the image blob directly from the database and then fetch the image from the Model in the view. This doesn't work so well.
Through a couple of breakpoints I've found out that there's a huge different between the base64 strings, depending on my method. I'm not sure why and what the difference between the SQLite image blob and the .png in my file system is, and any help would be appreciated since saving images in a folder seems like extra work, when I could just keep them in my database.
Loading from the file system:
public string FirstImagePath(string slideid, int well)
{
var firstPath = HttpContext.Current.Server.MapPath(slideid);
byte[] firstImageByteData = File.ReadAllBytes(firstPath + "_first" + well + ".png");
string firstImageBase64Data = Convert.ToBase64String(firstImageByteData);
string firstImageDataUrl = string.Format("data:image/png;base64,{0}", firstImageBase64Data);
return firstImageDataUrl;
}
Loading from SQLite db:
public byte[] FirstImage { get; set; }
public string FirstBase64Image
{
get { return ConvertImage(FirstImage);}
}
public string ConvertImage(byte[] imageBytes)
{
byte[] imageArray = imageBytes;
string imageBase64String = Convert.ToBase64String(imageBytes);
string imageDataString = string.Format("data:image/png;base64,{0}", imageBase64String);
return imageDataString;
}
Both methods have their advantages and disadvantages.
If you store your images in a DB it's very easy to move the application across different platforms without having to copy a lot of images. On the other hand your DB is going to get very large over time.
Storing images on disk allows you to overwrite them easily with a copy / paste job etc. However, if you have multiple web servers, you're going to have to make this change several times.
However, this isn't the main issue that I have with your approach. The problem is that you get the images, convert them to base64 and embed them in your output. This is bad practice for many reasons. Firstly, browsers are smart enough to load in multiple resources at a time. For instance, your browser can download multiple images at a time which will drastically increase page load speed. If you have the images embeded it becomes the responsibility of the html parser to render these images which in turn slows the overall download of the html document as it's larger.
I would recommend a hybrid of the two. Upload images to your database. Create an image handler in your application that retrieves an image from the DB and attempts to save it to the file system. If it's successful return this image. The next time you try to get this image (and it's not cached on the users machine) your handler can check the file system to see if it has already been created and return it.
This method gives you the advantages of both the DB and file structure methods. If you decide you need 10 web servers, all of your images will be stored in the DB, and the file system will be automatically populated with your images as and when you need them depending on which server receives the request. I recommend using a GUID or some unique id for your images.
You could even extend this further and pass height and width parameters to the image handler that will resize the image for you before sending it back to the client.
Related
I have a large number of images on a Web server that need to be cropped. I would like to automate this process.
So my thought is to create a routine that, given the URL of the image, downloads the image, crops it, then uploads it back to the server (as a different file). I don't want to save the image locally, and I don't want to display the image to the screen.
I already have a project in C#.Net that I'd like to do this in, but I could do .Net Core if I have to.
I have looked around, but all the information I could find for downloading an image involves saving the file locally, and all the information I could find about cropping involves displaying the image to the screen.
Is there a way to do what I need?
It's perfectly possible to issue a GET request to a URL and have the response returned to you as a byte[] using HttpClient.GetByteArrayAsync. With that binary content, you can read it into an Image using Image.FromStream.
Once you have that Image object, you can use the answer from here to do your cropping.
//Note: You only want a single HttpClient in your application
//and re-use it where possible to avoid socket exhaustion issues
using (var httpClient = new HttpClient())
{
//Issue the GET request to a URL and read the response into a
//stream that can be used to load the image
var imageContent = await httpClient.GetByteArrayAsync("<your image url>");
using (var imageBuffer = new MemoryStream(imageContent))
{
var image = Image.FromStream(imageBuffer);
//Do something with image
}
}
What I am trying to do is, I want to save an image ("scanned image of receipt") upon each ticket generation and store its reference(image name) in mssql database.
Scenario:
The user will select the image from a source through OpenDialogBox & will click save button. Now what I want my application to do is, copy the file from source, change its file name to TicketID (TicketID will be unique everytime so the image name will always remain unique) and then save to a specific folder (which will store all images) and store the filename in database.
I have never used images in C# before, so I have no idea on how to actually do it. So I would really appreciate if someone could link me to a tutorial or something...
P.S. I am using visual studio 2012 and MQ SQL Server 2012.
you can do the following
1- on the save event assuming that your scanned Image called image
var ticketID=Guid.NewGuid().ToString(); // this method will ensure that the name of image will be unique all the time
var path="savingPath" + "/" + ticketID + ".jpg";
// the image path you can save it in the database
image.Save(path);
2- when you want to load the image
// retrieve the image path from database
var image=Image.FromFile(path);
hope that this will help you
If you don't need anything overly fancy in terms of processing the System.Drawing library should meet your needs.
Depending on how you want to architect your app you can pass a directory path directly into the constructor of your Image implementation. e.g.
var myImage = new Bitmap("C:\\somepath\\filename.jpg");
Or you could abstract away the location access you can just pass in a stream (which comes from a byte array, file operation, web request, whatever)
var myImage = new Bitmap(stream);
Saving an image is easy. The image class has a save method
image.Save("C:\\somepath\\filename2.jpg")
http://msdn.microsoft.com/en-us/library/9t4syfhh(v=vs.110).aspx
I'm currently using an html embed tag to display a pdf file that is saved on the local server. Is there a wayo to display a pdf file on my page without having to save it to the local file system of the server? I just wand to pass it to the view from the controller in such a way that it can be displayed as a pdf in the page without having it stored on the file system directly.
Alternatively, is there a way to call a method to delete the pdf file from the server once the user has navigated away from the page they are viewing? How do I tell if th euser has navicated away from the page and how do i cause that to trigger a method that will delete the file?
I created a MVC class called PdfResult that returns a byte array as a PDF file.
The purpose is as follows (can't upload the source code, sorry):
PdfResult inherits from FileStreamResult
Set the Content-Type header to application/pdf
Set the Content-Disposition to either attachment or inline, and set an appropriate file name
Convert your data to a Stream -- if your data is a byte array, then write it to a MemoryStream.
See https://stackoverflow.com/a/16673120/272072 for a good example of how to do this.
Then, your embed code just needs to point to the action method, as if it was a PDF file.
Here's an example:
public ActionResult ShowPdf() {
// Note: the view should contain a tag like <embed src='MyController/GetPdf'>
return View();
}
public ActionResult GetPdf() {
byte[] pdfBytes = dataRepo.GetPdf(...);
return new PdfResult(pdfBytes, "Filename.pdf", false) ;
}
Here is a link to a CodeProject article and code sample titled Download and Upload Images from SQL Server via ASP.NET MVC. This gives an example of an efficient method to stream content to and from SQL Server via MVC.
You can easily adapt the code to stream your PDF file downloads.
UPDATE
The article uses a DataReader, but it can easily be adapted to Linq2Sql or EF. As an example, here is the Read method where I am reading from the database and copying to the stream:
public override int Read(byte[] buffer, int offset, int count)
{
result = _attachments.ExecuteStoreQuery<byte[]>(
"SELECT SUBSTRING(AttachmentBytes, " + position.ToString() +
", " + count.ToString() + ") FROM Attachments WHERE Id = {0}",
id).First();
var bytesRead = result.Length;
Buffer.BlockCopy(result, 0, buffer, 0, bytesRead);
position += bytesRead;
return (int)bytesRead;
}
You can read the PDF as a bytestream from the database and save it to the http response stream. If you have set the content type correctly to application/pdf, then the browser will load the document in the PDF plugin.
Update (14/Oct/2011): You need to write the bytestream to the Response.OutputStream object. How you create and write the byte stream is dependent on how you have stored in the database and how you are retrieving it. The following code snippet is from an article we have on our website - Generate PDF Forms In ASP.NET Using PDFOne .NET v3.
// Get the page's output stream ready
Response.Clear();
Response.BufferOutput = true;
// Make the browser display the forms document
// using a PDF plug-in. (If no plug in is available,
// the browser will show the File -> Save As dialog box.
Response.ContentType = "application/pdf";
// Write the forms document to the browser
doc.Save(Response.OutputStream);
doc.Close();
doc.Dispose();
The doc object is from our component. You need not use that. This code snippet is only for your understanding. For your requirement, you may have to something like bytestream.save(Response.OutputStream) I guess. BTW, this code is for ordinary ASP.NET, not MVC.
DISCLAIMER: I work for Gnostice.
If you want to create the PDF 100% dynamically, you would generate it completely in memory then stream it out directly to the requesting web browser without saving it as a file. This is very easy to do with the right tools. I would recommend AspPDF from Persits.com as a way to do this very easily. Take a look at their online documentation to see how simple this is to do without creating a bunch of rendered PDF files all over your server.
If you cannot do something like that, then simply incorporate a process to cleanup your "expired" PDF files from your server's filesystem based on their age. For example, after you have created your local PDF file, you just look through the folder containing your temporary PDF's and delete any you find over a certain age. You cannot reliably tell if or when a user has navigated away from your page or site.
For the first part of your question, like mentioned in the comments, use some type of stream object to pass the PDF data around. Right now, you are streaming the file to the local file system, then streaming it once again to the embedded tag for display. Just do away with the intermediate step of saving to the file system, and do the whole thing in memory (although, that's not really a model of efficiency, and might not scale well).
Regarding the second part of your question, that's not as straightforward. MVC really has no concept of state (viewstate, etc.), so it doesn't have events that can be fired from a state change (say, navigating away from a page).
You could use Javascript to detect a user navigating away from your page (windows.onunload), that calls a (C#/VB) method to remove the file from the file system. You would probably have to use AJAX to communicate back to the server, using an HTTP POST method, and have something listening at that URL endpoint to fire your method that removes the file.
This is a variation on a question that has been asked here several times. One example: Display an image contained in a byte[] with ASP.Net MVC3. The question is how to render an image from a byte array.
In all those questions, there is an Action similar to one of the answers in the link I provided above:
public FileContentResult Display(string id) {
byte[] byteArray = GetImageFromDB(id);
return new FileContentResult(byteArray, "image/jpeg");
}
With an image tag similar to this:
<img src="#Url.Action("Display", new { id = Model.Id })" />
This is done because it's not possible to send a byte array through a GET request, so just the id is sent allowing a lookup in the Action method. I get this part, it's not the problem. What I'm trying to do is create a 'Preview' page, where they can check their work before saving in the database. They can see the layout of the Title, Text and Image and decide whether to save, or go back and Edit some more. Therefore, the 'GetImageFromDB(id)' part won't work, since the object has not been saved yet to the database.
Is there any way to accomplish this, or do I just have to save the byte array temporarily in the database and access it that way for the Preview page?
You need to store the uploaded file somewhere on the server if you want to show it later (as a preview or full size image). Whether it is the database or the file system it is up to you. So once the file is uploaded you could store it as a temporary file on some location on the server by renaming it using some unique Guid and return this Guid to the client so that it can create an action link to a preview controller action passing the Guid which will fetch the file from the temporary location and stream it to the client.
I have a text file with a list of 300,000 words and the frequency with wich they occur. Each line is in the format Word:FequencyOfOccurence.
I want this information to be accessible from within the C# code. I can't hard code the list since it is too long, and I'm not sure how to go about accessing it from a file on the server. Ideally I'd ideally like the information to be downloaded only if it's used (To save on bandwidth) but this is not a high priority as the file is not too big and internet speeds are always increasing.
It doesn't need to be useable for binding.
The information does not need to be editable once the project has been built.
Here is another alternative. Zip the file up and stick it in the clientBin folder next to the apllication XAP. Then at the point in the app where the content is needed do something like this:-
public void GetWordFrequencyResource(Action<string> callback)
{
WebClient client = new WebClient();
client.OpenReadAsync += (s, args) =>
{
try
{
var zipRes = new StreamResourceInfo(args.Result, null)
var txtRes = Application.GetResourceStream(zipRes, new Uri("WordFrequency.txt", UriKind.Relative));
string result = new StreamReader(txtRes.Stream).ReadToEnd();
callback(result);
}
catch
{
callback(null); //Fetch failed.
}
}
client.OpenReadAsync(new Uri("WordFrequency.zip", UriKind.Relative"));
}
Usage:-
var wordFrequency = new Dictionary<string, int>();
GetWordFrequencyResource(s =>
{
// Code here to burst string into dictionary.
});
// Note code here is asynchronous with the building of the dictionary don't attempt to
// use the dictionary here.
The above code allows you to store the file in an efficient zip format but not in the XAP itself. Hence you can download it on demand. It makes use of the fact that a XAP is a zip file so Application.GetResourceStream which is designed to pull resources from XAP files can be used on a zip file.
BTW, I'm not actually suggesting you use a dictionary, I'm just using a dictionary as simple example. In reality I would imagine the file is in sorted order. If that is the case you could use a KeyValuePair<string, int> for each entry but create a custom collection type that holds them in an array or List and then use some Binary search methods to index into it.
Based on your comments, you could download the word list file if you are required to have a very thin server layer. The XAP file containing your Silverlight application is nothing more than a ZIP file with all the referenced files for your Silverlight client layer. Try adding the word list as content that gets compiled into the XAP and see how big the file gets. Text usually compresses really well. In general, though, you'll want to be friendly with your users in how much memory your application consumes. Loading a huge text file into memory, in addition to everything else you need in your app, may untimately make your app a resource hog.
A better practice, in general, would be to call a web service. The service could would perform whatever look up logic you need. Here's a blog post from a quick search that should get you started: (This was written for SL2, but should apply the same for SL3.)
Calling web services with Silverlight 2
Even better would be to store your list in a SQL Server. It will be much easier and quicker to query.
You could create a WCF service on the server side that will send the data to the Silverlight application. Once you retrieve the information you could cache it in-memory inside the client. Here's an example of calling a WCF service method from Silverlight.
Another possibility is to embed the text file into the Silverlight assembly that is deployed to the client:
using (var stream = Assembly.GetExecutingAssembly()
.GetManifestResourceStream("namespace.data.txt"))
using (var reader = new StreamReader(stream))
{
string data = reader.ReadToEnd();
// Do something with the data
}