Fix hình ảnh tự động

Khi thiết kế web, ta thường phải tạo hình thumbnail cho sản phẩm, tin tức, ... làm cho web load nhẹ hơn, thay vì resize hình bằng cách set width/height vừa với khung hình sẽ hay làm hình bị méo mó vì tỷ lệ width/height của hình khác tỷ lệ width/height của khung.

Có 2 cách tạo thumbnail thông thường:

 + Cách 1: Tạo thumbnail thủ công: mở hình bằng photoshop, crop/resize để có hình thumb.

 + Cách 2: Lập trình để tạo thumb tự động, lợi ích của cách này là

  - Tiết kiệm công sức, thử tượng tượng bạn mệt thế nào khi phải tạo thumbnail cho 1000 sản phẩm bằng các crop/resize bằng photoshop

  - Chỉ cần upload 1 hình gốc, các hình thumbnail sẽ được tự tạo ra thay vì phải upload cả hình gốc và hình thumbnail

  - Có thể tạo nhiều thumbnail với kích thước khác nhau, chỉ việc truyền tham số width/height là có 1 thumbnail.

Bài viết nài tôi xin trình bày cách tạo thumbnail tự động.

Hãy xem 3 hình được tạo từ một hình gốc Bar Refaeli

(tự động fix 400x400 - <img src="http://docbao.5s.com.vn/category/autofiximage.axd?picture=2011/5/18/Bong-Da-Day-song-%C4%91am-me-boi-Bar-Refaeli-.jpg&width=400&height=400" />)

(tự động fix 250x400 - <img src="http://docbao.5s.com.vn/category/autofiximage.axd?picture=2011/5/18/Bong-Da-Day-song-%C4%91am-me-boi-Bar-Refaeli-.jpg&width=250&height=400" />)

(tự động fix 400x250 - <img src="http://docbao.5s.com.vn/category/autofiximage.axd?picture=2011/5/18/Bong-Da-Day-song-%C4%91am-me-boi-Bar-Refaeli-.jpg&width=400&height=250" />)

Code

//Bước I: tỷ lệ hình gốc
		float oWH = (float)img.Width / (float)img.Height;
		//tỷ lệ khung
		float nWH = (float)width / (float)height;


		//Bước II: nếu tỷ lệ gốc > tỷ lệ khung
                if (oWH > nWH)
                {
                    //resize theo chiều cao
                    int w = Convert.ToInt16((float)(oWH * height));
                    img = Utils.Resize(img, w, height);
                }
		// ngược lại: tỷ lệ gốc <= tỷ lệ khung
                else
                {
                    //resize theo chiều rộng
                    int h = (int)(width / oWH);
                    img = Utils.Resize(img, width, h);
                }
		// ==> sau bước ngày thì:
		// + hoặc chiều rộng hình = chiều rộng  khung
		// + hoặc chiều cao hình = chiều cao khung

                //Bước III: crop theo kích thước khung
		//bỏ đi phần thừa (trên/dưới, hoặc trái/phải)
		//giữ lại phần giữa

                img = Utils.Crop(img, width, height);

Các hàm tham khảo

        using Drawing = System.Drawing;     
        using System.Drawing.Drawing2D;

 
	//Resize
        public static Drawing.Image Resize(Drawing.Image img, int width, int height)
        {
            Drawing.Bitmap bmp = new Drawing.Bitmap(width, height);
            Drawing.Graphics graphic = Drawing.Graphics.FromImage((Drawing.Image)bmp);
            graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphic.DrawImage(img, 0, 0, width, height);
            graphic.Dispose();

            return (Drawing.Image)bmp;
        }

	//Crop
        public static Drawing.Image Crop(Drawing.Image img, int width, int height)
        {
            int x = (int)((img.Width - width) / 2);
            if (x < 0)
                x = 0;
            int y = (int)((img.Height - height) / 2);
            if (y < 0)
                y = 0;
            Drawing.Rectangle rect = new Drawing.Rectangle(x, y, width, height);
            Drawing.Bitmap src = new Drawing.Bitmap(img);
            Drawing.Bitmap target = src.Clone(rect, src.PixelFormat);

            src.Dispose();
            img.Dispose();

            return (Drawing.Image)target;
        }