StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Ok first problem is that resizing an image with any language takes a little processing time. So how do you support thousands of clients? We'll you cache it so you only have to generate the image once. The next time someone asks for that image, check to see if it has already been generated, if it has just return that. If you have multiple app servers then you'll want to cache to a central file-system to increase your cache-hit ratio and reduce the amount of space you will need.</p> <p>In order to cache properly you need to use a predictable naming convention that takes into account all the different ways that you want your image displayed, i.e. use something like myimage_blurred_320x200.jpg to save a jpeg that has been blurred and resized to 300 width and 200 height, etc.</p> <p>Another approach is to sit your image server behind a proxy server that way all the caching logic is done automatically for you and your images are served by a fast, native web server.</p> <p>Your not going to be able to serve millions of resized images any other way. That's how Google and Bing maps do it, they pre-generate all the images they need for the world at different pre-set extents so they can provide adequate performance and be able to return pre-generated static images.</p> <p>If php is too slow you should consider using the 2D graphic libraries from Java or .NET as they are very rich and can support all your requirements. To get a flavour of the Graphics API here is a method in .NET that will resize any image to the new width or height specified. If you omit a height or width, it will resize maintaining the right aspect ratio. Note Image can be a created from a JPG, GIF, PNG or BMP:</p> <pre><code>// Creates a re-sized image from the SourceFile provided that retails the same aspect ratio of the SourceImage. // - If either the width or height dimensions is not provided then the resized image will use the // proportion of the provided dimension to calculate the missing one. // - If both the width and height are provided then the resized image will have the dimensions provided // with the sides of the excess portions clipped from the center of the image. public static Image ResizeImage(Image sourceImage, int? newWidth, int? newHeight) { bool doNotScale = newWidth == null || newHeight == null; ; if (newWidth == null) { newWidth = (int)(sourceImage.Width * ((float)newHeight / sourceImage.Height)); } else if (newHeight == null) { newHeight = (int)(sourceImage.Height * ((float)newWidth) / sourceImage.Width); } var targetImage = new Bitmap(newWidth.Value, newHeight.Value); Rectangle srcRect; var desRect = new Rectangle(0, 0, newWidth.Value, newHeight.Value); if (doNotScale) { srcRect = new Rectangle(0, 0, sourceImage.Width, sourceImage.Height); } else { if (sourceImage.Height > sourceImage.Width) { // clip the height int delta = sourceImage.Height - sourceImage.Width; srcRect = new Rectangle(0, delta / 2, sourceImage.Width, sourceImage.Width); } else { // clip the width int delta = sourceImage.Width - sourceImage.Height; srcRect = new Rectangle(delta / 2, 0, sourceImage.Height, sourceImage.Height); } } using (var g = Graphics.FromImage(targetImage)) { g.SmoothingMode = SmoothingMode.HighQuality; g.InterpolationMode = InterpolationMode.HighQualityBicubic; g.DrawImage(sourceImage, desRect, srcRect, GraphicsUnit.Pixel); } return targetImage; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload