2

Eu não quero deixar para diminuir imagens setando o width e o height no asp.


Exemplo:

<asp:Image Width="70" Height="90"
 ID="Image1" runat="server" ImageUrl=' <%# @"\imgpe\" + Eval("CODFOTO") + @".jpg" %>'/>

Gostaria de redimensionar o arquivo e referenciar o tamanho direto.

Exemplo: tenho uma imagem que utilizo em uma pagina, URL: /imgpe/2222222.jpg com Dimensões 267 x 400

Gostaria de mostrar uma miniatura desta imagem em outra pagina com dimensões 70 x 90.

Sem criar um novo arquivo.

Criando apenas na memoria temporariamente e fazendo com que o pagina do site seja mais rápida tendo imagens mais leves.

Vi que tem vários Plugins que fazem isso, mas por segurança não utilizo.

Como faço isso em C#?

1 Resposta 1

2

O que você quer é um serviço no backend que seja responsável por redimencionar imagens, porém sem armazená-las. Aqui vão alguns trechos de código que podem lhe ajudar:

  • Crie uma página onde você receba os parâmetros Url, width e height.
  • Valide o conteúdo recebido:

    string url = Request["Url"];
    int? width = Request["width"];
    int? height = Request["height"];
    
    Uri uriResult;
    var isUrl = Uri.TryCreate(url, UriKind.Absolute, out uriResult) &&
                    uriResult.Scheme == Uri.UriSchemeHttp;
    
  • Caso a URL seja válida, faça o download do conteúdo, e crie um objeto Image:

    var httpWebRequest = (HttpWebRequest)WebRequest.Create(url);
    using (var httpWebReponse = (HttpWebResponse)httpWebRequest.GetResponse())
    {
        using (var stream = httpWebReponse.GetResponseStream())
        {
            Image image = Image.FromStream(stream);
        }
    }
    
  • Valide as dimensões informadas. Se um dos parâmetros estiver faltando, use a dimensão correspondente da imagem original:

    if (width == null)
        width = image.Width;
    
    if (height == null)
        height = image.Height;
    
  • Reajuste a imagem para o tamanho desejado (a função ResizeImage está no final deste post):

    image = ResizeImage(image, (int)width, (int)height);
    
  • Envie o conteúdo redimencionado para o cliente:

    using(MemoryStream ms = new MemoryStream())
    {
         image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
         ms.WriteTo(context.Response.OutputStream);
    }
    

A seguir, a função de redimensionamento de imagem. Ela realiza o equivalente à regra CSS background-size: contain:

public static Image ResizeImage(Image image, int width, int height)
{
    var destRatio = ((float) width/height);
    var srcRatio = ((float) image.Width/image.Height);
    int intermediateWidth;
    int intermediateHeight;
    var widthOffSet = 0;
    var heightOffSet = 0;

    if (srcRatio <= destRatio)
    {
        intermediateWidth = width;
        intermediateHeight = (int) (intermediateWidth/srcRatio);
        heightOffSet = 0;
    }
    else
    {
        intermediateHeight = height;
        intermediateWidth = (int) (intermediateHeight*srcRatio);
        widthOffSet = (intermediateWidth - width)/2;
    }

    var bmPhoto = new Bitmap(intermediateWidth, intermediateHeight, PixelFormat.Format24bppRgb);

    Graphics.FromImage(bmPhoto).DrawImage(image, 0, 0, intermediateWidth, intermediateHeight);

    var outputImage = new Bitmap(width, height);
    var section = new Rectangle(new Point(widthOffSet, heightOffSet), new Size(width, height));

    var preoutputGrp = Graphics.FromImage(outputImage);
    preoutputGrp.InterpolationMode = InterpolationMode.HighQualityBicubic;
    preoutputGrp.DrawImage(bmPhoto, 0, 0, section, GraphicsUnit.Pixel);
    preoutputGrp.Dispose();
    bmPhoto.Dispose();

    return outputImage;
}

Estes são os resultados da minha implementação de teste:

Imagem original: http://www.wired.com/wp-content/uploads/blogs/opinion/wp-content/uploads/2013/03/socialite.jpg

Chamada da página:

http://localhost/teste.aspx?width=64&height=64&url=http://www.wired.com/wp-content/uploads/blogs/opinion/wp-content/uploads/2013/03/socialite.jpg

Versão 64x64:

inserir a descrição da imagem aqui

Versão 64x128:

inserir a descrição da imagem aqui

Versão 32x32:

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .