This one will be interesting...
I have seen many asp.net thumbnail generation tutorials / sample code, but no one has considered the problem of concurrency access when generating thumbnail image dynamically, when one or more user access the same page when the thumbnail needs to be generated.
A simple case, i have a site with property images (houses etc.), images are stored in a folder, the thumbnails are generated (for gallery) when someone first time accesses particular offer, then a handler makes the thumbnails from original larger images, the handler generate each thumbnail only once and then use the generated image in further requests.
What happens if two users access this page in the same time, the handler could run twice on the same file or more, there could be concurrency problem, file opening errors and so on (file needs to be opened for thumbnail generation).
Normally one user gets the thumbnail and other get a blank box without image till they refresh the page (since the first user triggered the thumbnail creation)
So the question is, how to avoid this situations ?
Normally if you are only opening the original image file for reading in order to generate the thumbnail there is no problem accesing it concurrently. Multiple users can open the same file for reading at the same time. Problems arise if you start writing at the same time.
Related
In my application, I post articles and the entire document is stored as html in the database. In different places in the articles I use images. (By uploading it or just placing img urls).
On the homepage I want to make thumbnails of my desired size, so that I can place some recent articles along with their preview images there.
So, how can I extract larger images from any html document? (So that only relevant images are selected, not any other images)
And from the list of images, how to determine and select image which occurred at first?
I want to use that "one" image to make thumbnail programatically on the server. I
will cache it and then display it on the page.
Like a wordpress application or any other CMS does.
Currently, I use the following approach which is I think is not correct:
At the time of posting an article when I upload images in the editor, I keep the imageId of the of the last uploaded image and store it into the database along with the article. So I have a separate column for imageId for each article I post.
Problem starts when I do not upload any image, then I have to insert a default imageId automatically to avoid problems. This process is annoying. Please help me out. Please guide me the most practiced and the easiest solution available.
The site where I implement all this is http://disneyduniya.in
You can use demo of below code: Generate Web Page Thumbnail Screenshot Image:
Demo link Its working : http://pietschsoft.com/post/2008/07/C-Generate-WebPage-Thumbmail-Screenshot-Image
It will create image file ,save this file As and customize height and width
.
for the past 3 days I've been trying to create an upload system for multiple files, possibly large, with progress bars.
I've been roaming the web relentlessly for the past few days, and I can say, I am now familiar with most difficulties.
sadly, all the solutions I've found online are not written c# or vbscript, in fact most of them are written in php.
I wouldn't mind switching to another language but the entire website is written in vb.net and for the sake of coherence I thought it might be best to keep with it.
File uploads:
Problem 1 - progress bar:
I understand file uploads will not work with ajax, since the ajax response will only occur after the file had completed its upload.
I understand there is a solution using iFrames but I cannot seem to find any online examples (preferably using vb.net or c#).
I understand there is another alternative using flash. how???
I also understand people are mostly against using iframes but I can't find what the reason might be.
Problem 2 - Multiple Files:
I can have multiple file support with HTML5. great, but IE doesn't support it? well... IE users will just have to upload one file at a time.
Problem 3 - Large files:
how?
I heard something about chunking, and blobs, but these are still just random gibberish words for me. can somebody explain, the meaning and the implementation?
references to reading material are much appreciated even though, if it's on the web, I've probably already read it in my search for my solution.
#DevlshOne has a decent thread with some good information.
Here are the three basic requirements for what I did:
Create Silverlight app for clientside access and upload control. (use app of your choice)
Create an HttpHandler to receive the data in chunks and manage requests.
Create the database backend to handle the files.
Silverlight worked well because I was already in VB (ASP.NET). When used in-browser, as opposed to out-of-browser, the ASP.NET session was shared with Silverlight, so there was no need to have additional security/login measures. Silverlight also allowed me to limit what file types could be selected and allow the user to select multiple files from the same folder.
The Silverlight app grabs the files selected by the user, displays them for editing of certain properties, and then begins the upload when the user clicks the 'upload' button. This sets off a number of threads that each upload chunks of data to the httphandler. The HttpHandler and Silverlight app send and receive in chunks, with the HttpHandler always sending an OK or ERROR message when the request has been processed for the uploaded chunk.
Our specific implementation of file uploading also required some database properties (fields) to be filled out by the user, so we also had inputs for those properties and uploaded them to the server with the file data.
An in-browser Silverlight app can also have parameters passed into it through the html, so I do this with settings like 'max chunk size' or 'max thread count'. I can change the setting in the database and have it apply to all users.
The database backend is basically a few stored procedures (insert your data management preference here) that control the flow of the logic. One table holds completed files (no file data), and a second holds the temp files that are in progress of being uploaded. One stored procedure initiates a new file record in the temp table and processes additional chunk uploads, and another controls the migration of the completely uploaded file from the temp table to the completed table. (A piece of VB code in the HttpHandler migrates the actual binary file data from the temp table to a physical file.)
This seems pretty complex, but the most difficult part would be the interaction with the handler and passing the chunks around (response/requests, uploading successive chunks, etc.). I left out a lot of information, but this is the basic implementation.
I have a website written in .NET 4.5 / MVC 4 that allows users to upload images, among other things. These images can be displayed throughout the site in a variety of sizes. Currently, the way this works is as follows:
The image is uploaded and re-sized in memory to a max width of 640px (the largest the site will display).
The resized image is saved to disk at /assets/photos/source/{id}-{timestamphash}.jpg.
When a request for the image in various sizes comes through, I get the filename by combining {id}-{hash} where {hash} is the hash of a combination of ids, height, width and some other information I need to get the image.
If that image exists in /assets/photos/cache, I simply return it, otherwise I create it in memory using the source image and then save it to the cache directory.
I like this approach because it happens quickly and it all happens in-memory or via disk retrieval.
I'd like to eventually move my site to Azure. How would a workflow like this happen in Azure given that all of my images would be stored as blobs? Is it still efficient to use a re-sizing/caching strategy like this or are there other alternatives? Wouldn't you incur network latency as the image is uploaded to Azure from the server where today, it just gets saved to disk which is obviously a lot faster?
Just looking for some direction on how to migrate a workflow like this to something workable and scalable with Azure.
Given your comment above, why not create a background task that resizes to all acceptable sizes on upload, storing each one into the Azure blob storage. You are correct that if you resize on request, you would suffer some latency and lag as you would need to download the source image, resize, then upload to blob storage, then redirect the user to your blob storage url. Given the 'cheapness' of blob storage, I would submit that paying a few dimes more for extra storage would outweight the potential slowness of the scenario above.
Pseudo Code Below:
[HttpPost]
public ActionResult FileUpload(HttpPostedBaseFile file){
if(ValidateFile(file)){
//fire off a background tasks that resizes and stores each file size to the azure
//blog storage. You could use a naming scheme such as id_size.imageTypeExtension
}
}
Now, when asked for a file, you could still use your same routine, but instead of returning a file result, you would return a redirect result
public ActionResult GetImage(string hash){
//do stuff to get image details
return Redirect("http://yourAzureBlobStorageDomain.com/Assets/Images/Cache/" + imageDetails")
}
This is cool because you don't need to download the image to your web server and then serve it, but simply redirect the request directly to the blob storage! This would have the affect that an image tag such as below
<img src="#Url.RouteUrl("GetImage", "Images" new {hash = hash})"/> would hit your web application, forcing a redirect to the actual image location in blob storage.
You are correct that you do not want to store anything on the Azure web role permanently as the web roles can be moved around at any time, losing any locally stored data.
This is just a simple way to sort of keep your code base the way it is now with minimal changes. You could modify this to behave more like what you have now in that you could query the blob storage if an image exists, if it does, redirect, if it does not then generate, store and redirect, but I believe you would find you will have more issues with the latency at this point given you would need to download the source image, do your stuff and then reupload the image before instructing the user's browser where to go find it.
However, this would be something for you to decide if it was worth the extra time it would take to resize on demand vs the cost of storing multiple sizes of each image. As a side note, we have not noticed a significant latency issue when using blob storage from our web/worker roles. Obviously it is higher than retrieval from disks, but it has not really posed a significant increase that we have been able to see.
I have one page that generates png images on the fly,project is not over yet so I didn't test it but I can assume that I will have problem with images chaching.
The images my page generates will be used mostly on forums, as signature. Since no code is allowed except some BBCode(images,links) Im not sure is it even possible disable caching from my page that generates image?
I can already imagine situation: User puts img tags in his forum signature leading to my page that generates dynamic images for his signature. When he first opens page, his browser caches image, and each time he opens that page even if I stream different image, he will see the old one?
Will that really happen, or did I assume wrong? If this does happen, is there any way around it?
You can set the Cache-Control "no-cache" header
Response.Cache.SetCacheability(HttpCacheability.NoCache);
I have an image gallery that is created using a repeater control. The repeater gets bound inside my code behind file to a table that contains various image paths.
The images in my repeater are populated like this
<img src='<%# Eval("PicturePath")' %>' height='200px' width='150px'/>
(or something along those lines, I don't recall the exact syntax)
The problem is sometimes the images themselves are massive so the load times are a little ridiculous. And populating a 150x200px image definitely should not require a 3MB file.
Is there a way I can not only change the image dimensions, but shrink the file size down as well?
Thanks!
I would recommend creating a handler that can resize images for you on the fly and encode them in whatever format you like.. kind of like a thumbnail generator. This will cost CPU on the server but you can cache images and severely reduce bandwidth costs ETC. Let me see if I can find the link to a good article I read on something similar.
You can look at this article it isn't the one I had read but it has some info about how you can go about implementing this.
You're looking for the GetThumbnailImage method of the Image class. You will either want to generate the thumbnail images ahead of time or create the image the first time it is accessed and save it to disk for later use (so first access would be slow but subsequent requests would be quick).
You could try either of these 2 projects on CodePlex.com, both offer dynamic image generation with caching.
Dynamic Image Process
ASP.NET Image Generation
The later is straight from Microsoft.