Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Como crear un thumbnail
Actualizado el 21 Enero, 2016 y leído 1,786 veces
Calificación: Sin calificar 10

Como crear un thumbnail

Anexsoft

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.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.