Delay when displaying photos on canvas

0

I have to take a list of products where you can see the photos that are in a web directory and so that I stay centered, of the same height, etc ... I need the canvas of the photo with white background be square, for example 250x250px and the photo is scaled and centered within the square at 95.2% in size.

I'VE ALREADY GOT IT BUT IT 'S VERY SLOW (That' s what I have to solve)

This way of doing it ensures that works on all browsers :

I created a page get_image_marco.aspx that only has:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="get_image_marco.aspx" Inherits="get_image_marco" %>

The back code of the page get_image_marco.aspx.cs is the class:

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web;

public partial class get_image_marco : System.Web.UI.Page
{
    private string PathImageUrl = HttpContext.Current.Server.MapPath("~/fotos/fotosCuad/"); // Path de las fotos
    private int intDimensionMarco, newImgAncho, newImgAlto;
    string strName;
    private double dblPorcentaje = 95.2;    // Porcentaje de la imagen frente al tamaño del rectángulo donde se aloja
    protected void Page_Load(object sender, EventArgs e)
    {
        strName = Request.QueryString["name"];                                  // Nombre de la imagen
        intDimensionMarco = Convert.ToInt16(Request.QueryString["size"]);       // Dimensión del marco

        #region NuevaDimensio de la imagen para colocar dentro del Marco
        Bitmap imageBitmap = new Bitmap(PathImageUrl + strName);                // Objeto de la imagen (Para sus propiedades)
        int intImgAncho = imageBitmap.Width;                                    // Anchura actual de la imagen 
        int intImgAlto = imageBitmap.Height;                                    // Altura actual de la imagen   
        imageBitmap.Dispose();

        if (intImgAncho != intImgAlto)      // Si no es igual ancho y alto
        {
            if (intImgAncho > intImgAlto)
            {
                newImgAncho = Convert.ToInt16((Convert.ToDouble(intDimensionMarco) * dblPorcentaje) / 100);
                newImgAlto = (intImgAlto * intDimensionMarco) / intImgAncho;
                newImgAlto = Convert.ToInt16((Convert.ToDouble(newImgAlto) * dblPorcentaje) / 100); ;
            }
            else
            {
                newImgAlto = Convert.ToInt16((Convert.ToDouble(intDimensionMarco) * dblPorcentaje) / 100);
                newImgAncho = (intImgAncho * intDimensionMarco) / intImgAlto;
                newImgAncho = Convert.ToInt16((Convert.ToDouble(newImgAncho) * dblPorcentaje) / 100); ;
            }
        }
        else //Mide lo mismo de ancho y de alto
        {
            if (intImgAncho == 500) // Algunas imágenes miden ya 500x500 e incorporan el fondo blanco. No hay que tocarlas.
            {
                newImgAncho = intDimensionMarco;
                newImgAlto = intDimensionMarco;
            }
            else
            {
                newImgAncho = Convert.ToInt16((Convert.ToDouble(intDimensionMarco) * dblPorcentaje) / 100);
                newImgAlto = newImgAncho;
            }
        }
        #endregion

        CreaImagen(); //Creamos la imagen
    }


    public void CreaImagen()
    {
        #region Creamos el lienzo (Rectángulo en color blanco)
        Rectangle rectangle = new Rectangle(0, 0, intDimensionMarco, intDimensionMarco);
        Bitmap bitmap = new Bitmap(rectangle.Width, rectangle.Height, PixelFormat.Format32bppRgb);
        Graphics g = Graphics.FromImage(bitmap);
        g.Clear(Color.White);
        #endregion

        #region Cargamos la imagen y la colocamos dentro del lienzo
        Bitmap imageBitmap = new Bitmap(PathImageUrl + strName);
        int PosX = (rectangle.Width - newImgAncho) / 2;                 //Calculamos la distancia horizontal para central la imagen
        int PosY = (rectangle.Height - newImgAlto) / 2;                 //Distancia Vertical para centrar imagen en el rectángulo
        g.DrawImage(imageBitmap, PosX, PosY, newImgAncho, newImgAlto);  //Dibujamos la imagen centrada en el fondo blanco.
        Response.ContentType = "image/jpg";
        bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
        bitmap.Dispose();
        #endregion
    }
}

Then from any place on the web, we show the photo or the list of photos, calling this page and passing in the URL the name of the photo and the size of the square that I need, with the parameters "name" and " size ".

<img class='img-responsive' src='" + ResolveClientUrl("~/") + "get_image_marco.aspx?name=" + NameImage + "&size=250'/>

It works, it works, but if you pass a list with several photos, it stops for a while in each one. I do not know where the problem is.

    
asked by JoseDEV 12.11.2018 в 13:39
source

0 answers