terça-feira, dezembro 27, 2005

 

Redimensionando imagens dinamicamente com ASP.NET

REDIMENSIONANDO IMAGENS EM TEMPO REAL USANDO ASP.NET E VB

O objetivo deste artigo é mostrar o poder do ASP.NET na manipulação de imagens e como isso pode ajudar o desenvolvedor a criar sistemas para exibição de “Thumbnails” e mesmo galeria de fotos.

Parâmetros do sistema:

. Atualizado diretamente do sistema de gestão de imobiliárias SINAI.
. As fotos são enviadas “como estão”, sem nenhum tipo de tratamento anterior.

O problema:

Exibir as fotos dos imóveis em tamanho compatível com o layout proposto e diminuir o tamanho, em bytes, da imagem exibida.

A solução
Criar uma página que redimensione as imagens através dos parâmetros
. Caminho da imagem
. Largura imagem
e envie diretamente para o browser do visitante.

Desenvolvendo a solução (usando VB.NET):

. Crie um novo projeto “ASP.NET Web Application” no Visual Studio
. Após a criação do projeto crie uma pasta para armazenar as imagens (o nome fica por sua conta).
. Crie uma nova página ASPX e renomeie para ShowThumb.aspx

O código fonte (ShowThumb.aspx.vb) para esta página segue abaixo:


Imports System.Drawing.Imaging
Imports System.IO

Public Class ShowThumb
Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
Private Sub InitializeComponent()

End Sub

'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'MUDE CONTENT TYPE CASO VOCÊ UTILIZE OUTROS TIPOS DE IMAGEM
Response.ContentType = "image/jpeg”
generateThumb(Request.QueryString("img"), Integer.Parse(Request.QueryString("width")))
End Sub

Public Sub generateThumb(ByVal ImgUrl As String, ByVal ImageWidth As Integer)
'VERIFICA SE O PARÂMETRO CAMINHO DA IMAGEM FOI FORNECIDO
If ImgUrl <> "" Then
'RECUPERA O CAMINHO FISICO DA IMAGEM NO DISCO
Dim PathArquivo = Server.MapPath(ImgUrl)
If File.Exists(PathArquivo) Then
Try
'CRIA UM NOVO BITMAP A PARTIR DA IMAGEM FORNECIDA
Dim bm As Bitmap = System.Drawing.Image.FromFile(PathArquivo)

'DECLARA A NOVA LARGURA DA IMAGEM
Dim newWidth As Integer = ImageWidth

'CALCULA A NOVA ALTURA A PARTIR DA LARGURA ENVIADA COMO PARÂMETRO
Dim newHeight As Integer = (newWidth / bm.Width) * bm.Height

'CRIA UM NOVO BITMAP COM A NOVA LARGURA E ALTURA
Dim Resized As Bitmap = New Bitmap(newWidth, newHeight)

'CRIA UM NOVO OBJETO GRÁFICO PARA EXECUÇÃO DO REDIMENSIONAMENTO
Dim g As Graphics = Graphics.FromImage(Resized)

'REDIMENSIONA A IMAGEM ORIGINAL E SALVA NO NOVO BITMAP
g.DrawImage(bm, New Rectangle(0, 0, Resized.Width, Resized.Height), 0, 0, bm.Width, bm.Height, GraphicsUnit.Pixel)

'LIBERA OS RECURSOS UTILIZADOS PELO OBJETO GRÁFICO
g.Dispose()

'SALVA A IMAGEM DIRETAMENTE NO RESPONSE OBJECT (DIRETO PARA O BROWSER) NO FORMATO JPEG
'MUDE O IMAGEFORMAT AQUI CASO TRABALHE COM OUTROS TIPOS DE IMAGEM
Resized.Save(Response.OutputStream, ImageFormat.Jpeg)
Catch ex As Exception
Response.Write(ex.ToString)
End Try
End If
End If
End Sub

End Class


Testando o ShowThumb.aspx:

Coloque uma imagem qualquer (JPEG) na pasta que você criou para tal, no meu exemplo estou usando uma imagem chamada PREDIO1.JPG, armazenada na pasta “IMAGENS”, que tem 500x300 pixels.

Vou redimensionar esta imagem para a largura de 250px;

. Compile seu projeto
. Abra seu browser e aponte para a pasta onde você criou o projeto. No meu caso está assim:

http://localhost/imaging/ShowThumb.aspx?img=imagens/PREDIO1.JPG&width=250

Preste atenção aos parâmetros “img” (caminho relativo da imagem em relação ao ShowThumb.aspx) e width (aqui você passa o tamanho que você deseja para a imagem)

Se tudo correr bem você verá sua imagem redimensionada no seu browser.

Você pode usar o ShowThumb.aspx como source das suas imagens.

Ex:
<img src="’ShowThumb.aspx?img="imagens/PREDIO1.jpg&width="250’">


Basta apontar os parâmetros corretamente e você terá um redimensionador genérico e muito versátil.


João Márcio Gonçalves Prado é empresário, dono da Magix Tecnologia e presta serviços de criação de websites e sistemas para internet.

Certificado Microsoft desde de 2003.

This page is powered by Blogger. Isn't yours?