When i am searching image through Google Link to view
it load blur image first then load high-quality image progressively as image below
after some time
but by inspecting that image i found This Link and by going that link it load complete image or loaded image is viewed as top to down preview as below picture.
how it happened?
what technique Google use for Progressive loading of image.
how can i do loading of image as Google do in my site?
is it possible using c# ?
It seems to me that there is no actual progressive loading going on in Google Images.
When you click on an image thumbnail, there is a quick animation "unveiling" the full resolution image. While the animation is happening, the image that is partly displayed is actually just the thumbnail (size 251x201), but upscaled to the resolution of the larger image (1280X1024).
The way to do this upscaling in HTML should be something like this:
<img src="thumbnail.jpg" width="251" height="201">
The full resolution image is then displayed when the animation is completed, replacing the upscaled thumbnail. So this is not a progressive loading after all.
Still, you might want to read about Progressive JPEG: http://en.wikipedia.org/wiki/JPEG#JPEG_compression.
Related
I would like to add a gif image to my app. The app has to record audio in mp3 format. I would like to have a gif image for recording which would just flash or show loading gif when recording is started. Kind of indication for the user saying the recording is going on.
If gif is not possible then any other suggestions are welcome.
I have a project I am working on where the user can upload a frame image in PNG format. After they upload the frame they can upload a photo that will be placed behind the frame. The photo can be resized and moved so they can fit their photo into the frame. Once they are happy with their work, they can save their work.
The canvas is a fixed size on the client. This is an ASP.Net MVC4 application and we are using JavaScript / JQuery. I have only worked a little with the System.Drawing library and not sure how this will all fit together, yet. If this can be done easily in using just .Net and JavaScript / JQuery that would be great, but I am not opposed to using a 3rd party .Net library alongside JavaScript / JQuery.
UPDATE
I am goign share the step the user will go through to Resize, Move, and crop the image.
Step 1: The user loads the frame by clicking on some UI and it opens a popup with a working area of 432px x 348px. The frame is a PNG with a transparent center and outer edge. On that window will be an area for the user to upload an image. As you can see in figure 1, the image is loaded at 100% and goes past the window. The user can choose to move the image around and crop or move onto step 2.
Step 2: The user will move the image around to find the handles so they can resize the image. They can chose to crop at this point without resizing, as well, or move onto step 3.
Step 3: The user will resize the image and move it into place. Once they are finished they will crop the uploaded image.
Step 4: This is the final result after the data is sent to the server to be processed.
It can be done in pure .NET. No other libraries have to be used.
In order to add image uploading feature to Your application, take a look at the answer here: Upload Photo To MVC 4 Applications.
If You make user upload the image with a frame in png format with transparency support, You should be able to just draw one image on another, like in a sample code here (a gif is used there): http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c.
You can also support frames in other formats (like jpg or bmp), however, in order to support this scenario, You should manually choose which pixels to draw on the original image. One of the easiests solutions would be to make one of the colors a transparency key, so when a pixel is in this color, it won't be drawn in the resulting image. You can choose bright pink or another color that is rarely used (or even allow a user to choose it). It's still not very complex, buy it requires a little bit more code, some additional work to make it fast and a treshold to detect similar pixels in case of bad quality frame images.
If You want some help with the code, let me know.
this may seem like an odd question, and I don't know the formats of images so I'll just go ahead and ask...
I'm making a minesweeper game (relevant to different things too) which utilizes a grid of buttons, then I'm adding a sprite to the buttons using backgroundImage. If the grid is 9x9 it's fine. 15x15 it slows down and 30x30 you can visibly see each button being loaded.
That raises me to my question: Which image format would load fastest? Obviously, file size takes a part in the loading speed, however, I am enquiring as to if, say, a jpeg - with the same filesize as a gif - will load faster. or a bmp, png, etc.
I'm asking this as to see if I can get my grid to load faster using a different format.
Thanks!
You want an image format that paints faster. There's only one, the one whose pixel format directly matches the video adapter's setting so that the pixel data can be directly copied without needing format adjustments.
On most any modern machine, that's PixelFormat.Format32bppPArgb. It draws ten times faster than all the other ones.
You won't get that format when loading an image from a resource or a file, you have to create it.
Do note that this still won't give you stellar paint speed if every cell in the grid is a control. Particularly if it is a button, they are very expensive to draw since they support transparency effects. You'll only get ahead here if you draw the entire grid in one Paint event handler. Like the form's.
A completely different approach is to cover up the visible delays with this hack.
use the 8-bit PNG or GIF format and reduce the number of colors in the palette. Some image programs such as PhotoShop allow you to save the image for the web and fine-tune the image settings. By reducing the color palette from 256 to something like 32, you greatly reduce the size of the file. The less colors that the image has, the smaller the file size is going to be.
PNG has a similar feature called "Interlaced". You may want to turn this feature off so that the full image downloads quicker.
Because the 8-bit PNG and GIF formats have the potential to result in much smaller image files, try to keep this in mind when creating graphics and illustrations for your application. Try to keep the amount of colors to a minimum and use flat graphics instead of photographs. This way you can create images with palettes of 16 colors, keeping the file size extremely small and fast to load.
Best Regards
Are you reloading the image every time you paint a button? If so, there's your problem - solve it with a cache.
Are you painting the image at its native size? Runtime resampling can create a performance hit.
use PNG or GIF it's faster types of images
I am looking for a solution for a question that was already posted but did not answer correctly, thanks in advance.
Show first frame of video in WPF MediaElement
The solution in the other thread should work but you could approach it differently.
Basically, to avoid having to load the video just to grab the first frame you could generate a static image that is the frame you want to show. If you are encoding the video most encoding software will generate a thumbnail for you for this purpose. If not you can screen shot a frame and use that
Then display that image in a normal WPF image control when the movie is not playing. When the user plays the video use a trigger to hide the image and show the video.
This will give you the effect you want.
Downside: This static image will get out of sync with the video if your video file is updated (you would need to regenerate the thumbnail in this case)
I am looking for an image editor which can be incorporated into my asp.net application. My scenario is user select image from the image gallery and opens with the image editor, after edit the image and save it back on the web server. Image editor must have a paint brush. Crop and resizing of the image is not necessary.
I am looking for such a tools for the last 3 days, but not able to find any. I will go for paid software also.
If you want to do this on the browser, you will need to use something like flash. There are plenty of image editing components in flash - here is one.
See the answers to this SO quesion (Client-side image processing).
Apart from the Flash editors specified by Oded,
You can look at the Javascript + SVG based online image editor svg-edit. Its free.
I think you can take a look at picnik http://www.picnik.com/ .