Como crear un thumbnail

Vamos a ver como crear una copia de la imagen original

Rodríguez Patiño, Eduardo
2,059 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Este concepto de thumbnail lo usamos cuando tenemos una imagen con resoluciones altas ejm: (1024x1024) y queremos crear copias con menores resoluciones manteniendo el mismo aspecto para su posterior uso, ya que una resolución de este tamaño no la voy a mostrar en una grilla, esteticamente se vera mal y peor aún hacerlo en doro alterando el tamaño de una imagen mediante el atributo style o width-height.

Entonces la solución fue crear una clase en C# que permite generar los thumbs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Web;

namespace Helper
{
    public class ImageHelper
    {
        private string _path = "";
        private string _img;
        private int[] _scales = { 400, 250, 45 };

        private List _images = new List();
        public string Path
        {
            get { return this._path; }
            set { this._path = value; }
        }
        public string Img
        {
            get { return this._img; }
            set { this._img = value; }
        }
        public int[] Scales
        {
            get { return this._scales; }
            set { this._scales = value; }
        }
        public List getNewImages()
        {
            return this._images;
        }

        public void resizes()
        {
            Image objImg = null;
            int i = 0;
            foreach (int scale in this.Scales)
            {
                objImg = Image.FromFile(this.Path + this.Img);
                //Cuando el ancho es mas grande que el alto en base a la medida que deseamos
                if (objImg.Width > scale & objImg.Height < scale)
                {
                    decimal _width = scale;
                    decimal _height = (objImg.Height) * ((decimal)scale / objImg.Width);

                    Bitmap _img = new Bitmap(objImg, new Size(Convert.ToInt32(_width), Convert.ToInt32(_height)));
                    objImg.Dispose();

                    if (i == 0)
                    {
                        _img.Save(this.Path + this.Img, ImageFormat.Jpeg);
                        _images.Add(this.Img);
                    }
                    else
                    {
                        _img.Save(this.Path + i + "-" + this.Img, ImageFormat.Jpeg);
                        _images.Add(i + "-" + this.Img);
                    }
                }
                else if (objImg.Width < scale & objImg.Height > scale)
                {
                    decimal _width = objImg.Width * ((decimal)scale / objImg.Height);
                    decimal _height = scale;

                    Bitmap _img = new Bitmap(objImg, new Size(Convert.ToInt32(_width), Convert.ToInt32(_height)));
                    objImg.Dispose();

                    if (i == 0)
                    {
                        _img.Save(this.Path + this.Img, ImageFormat.Jpeg);
                        _images.Add(this.Img);
                    }
                    else
                    {
                        _img.Save(this.Path + i + "-" + this.Img, ImageFormat.Jpeg);
                        _images.Add(i + "-" + this.Img);
                    }
                }
                else if (objImg.Width > scale & objImg.Height > scale)
                {
                    //Cuando el ancho y el alto son mas grandes que la medida que deseamos
                    decimal _width = 0;
                    decimal _height = 0;
                    if (objImg.Width > objImg.Height)
                    {
                        _width = scale;
                        _height = (objImg.Height) * ((decimal)scale / objImg.Width);
                    }
                    else
                    {
                        _width = objImg.Width * ((decimal)scale / objImg.Height);
                        _height = scale;
                    }
                    Bitmap _img = new Bitmap(objImg, new Size(Convert.ToInt32(_width), Convert.ToInt32(_height)));
                    objImg.Dispose();

                    if (i == 0)
                    {
                        _img.Save(this.Path + this.Img, ImageFormat.Jpeg);
                        _images.Add(this.Img);
                    }
                    else
                    {
                        _img.Save(this.Path + i + "-" + this.Img, ImageFormat.Jpeg);
                        _images.Add(i + "-" + this.Img);
                    }
                }
                else
                {
                    _images.Add(this.Img);
                }
                i += 1;
            }
        }
        public static void resize(string img, int scale)
        {
            Image objImg = null;

            objImg = Image.FromFile(img);
            //Cuando el ancho es mas grande que el alto en base a la medida que deseamos
            if (objImg.Width > scale & objImg.Height < scale)
            {
                decimal _width = scale;
                decimal _height = (objImg.Height) * ((decimal)scale / objImg.Width);

                Bitmap _img = new Bitmap(objImg, new Size(Convert.ToInt32(_width), Convert.ToInt32(_height)));
                objImg.Dispose();
                _img.Save(img, ImageFormat.Jpeg);
                //Cuando el alto es mas grande que el ancho en base a la medida que deseamos
            }
            else if (objImg.Width < scale & objImg.Height > scale)
            {
                decimal _width = objImg.Width * ((decimal)scale / objImg.Height);
                decimal _height = scale;

                Bitmap _img = new Bitmap(objImg, new Size(Convert.ToInt32(_width), Convert.ToInt32(_height)));
                objImg.Dispose();
                _img.Save(img, ImageFormat.Jpeg);
            }
            else if (objImg.Width > scale & objImg.Height > scale)
            {
                //Cuando el ancho y el alto son mas grandes que la medida que deseamos
                decimal _width = 0;
                decimal _height = 0;
                if (objImg.Width > objImg.Height)
                {
                    _width = scale;
                    _height = (objImg.Height) * ((decimal)scale / objImg.Width);
                }
                else
                {
                    _width = objImg.Width * ((decimal)scale / objImg.Height);
                    _height = scale;
                }
                Bitmap _img = new Bitmap(objImg, new Size(Convert.ToInt32(_width), Convert.ToInt32(_height)));
                objImg.Dispose();
                _img.Save(img, ImageFormat.Jpeg);
            }
        }
        public static string TryParse(HttpPostedFileBase file, int kb = 0)
        {
            if (file == null) return "Debe seleccionar un archivo";

            string rpta = "";

            if (file.ContentType.ToLower() == "image/jpg"
                || file.ContentType.ToLower() == "image/jpeg"
                || file.ContentType.ToLower() == "image/pjpeg"
                || file.ContentType.ToLower() == "image/gif"
                || file.ContentType.ToLower() == "image/x-png"
                || file.ContentType.ToLower() == "image/png")
            {
                if (kb > 0)
                {
                    if (Convert.ToInt32(file.ContentLength / 1000) > kb)
                    {
                        rpta = "La imagen no puede ser mayor a los " + kb + "kb";
                    }
                }
            }
            else
            {
                rpta = "El archivo a intentar a subir debe ser una imagen";
            }

            return rpta;
        }
    }
}

Lo que tenemos que hacer ahora, en nuestro controlador en la acción que se encargue subir la imagen indicarle lo siguiente:

public JsonResult SubirFoto(HttpPostedFileBase file)
{
    // Indicamos a que medidades queremos reducir
    int[] medidas = {400, 250, 50};
    
    // Le pasamos el archivo a validar y la cantidad máxima que debe pesar
    string ValidacionFoto = ImageHelper.TryParse(file, 1000);
    if (ValidacionFoto.Length > 0)
    {
        return Json new { error =  ValidacionFoto}; // Un mensaje de error ya que no paso los criterios de validacion
    }
    else 
    {
        // Instanciamos la clase
        ImageHelper imghelper = new ImageHelper();
        
        // El nombre actual de la foto usando la clase DATE para no repetir las imagenes
        string foto = "mi_foto_" + System.DateTime.Now.ToString("yyyyMMddHHmmss") + Path.GetExtension(file.FileName);
        
        // Indicamos la ruta de la foto, en nuestro proyecto debe haber una carptea llamda Uploads justo en la raiz
        string ruta = System.Web.HttpContext.Current.Server.MapPath("~/Uploads/" + foto);

        // Guardamos la foto en la ruta
        file.SaveAs(ruta);

        // Llenamos los parametros de nuestra clase
        imghelper.Path = System.Web.HttpContext.Current.Server.MapPath("~/Uploads/");
        imghelper.Img = foto;
        imghelper.Scales = medidas;
        imghelper.resizes(); // Redimensiona las imagenes

        // Retornara una lista con el nombre de las nuevas imagenes
        List imagenes = imghelper.getNewImages(); // Ej: "mi_foto_20140202_1.jpg, mi_foto_20140202_2.jpg, mi_foto_20140202_3.jpg"

        /* Lo que queremos hacer con la imagen */
        return Json new { error = null }
    }
}

Luego de implementar esta lógica, cuando hagamos imghelper.getNewImages() recibiremos un listado con las nuevas imagenes redimensionadas, ahora lo que nos quedaría hacer es seguir el flujo de nuestra lógica, en mi caso guardaria el nombre de las imagenes en mi tabla para asi llamarlo más adelante.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín