Redimensionar imagens on-the-fly para caber em uma grid
Problema:
Voce tem imagens, algumas delas estào em formato retrato e outras em paisagem, em um diretório e voce quer escalar as imagens para caber no layout grid de tal forma que o lado mais longo seja de um tamnaho especificado e o menor lado escale proporcionalmente.
Solução:
ColdFusion 8 introduziu diversas e poderosas funções para manuzeio de imagens que podemos usar para resolver este problema.
Explicação detalhada:
<!--- set the size in pixels for the longest side of the thumbnail image --->
<cfset maxDimension = 100>
<!--- get all the images in a specific directory --->
<cfdirectory action="list"
directory="#ExpandPath( 'images/gallery' )#"
filter="*.jpg|*.jpeg|*.gif|*.png"
name="list">
<!--- cfdirectory creates a query object which we can loop through --->
<cfloop query="list">
<!---
Get the big image from the filesystem
Note: The ImageNew() function can also use a full url
--->
<cfset myImage = ImageNew( list.directory & "/" & list.name )>
<!--- create a thumbnail with the longest side scaled to 50px --->
<cfif ImageGetWidth( myImage ) gt ImageGetHeight( myImage )>
<!--- the width is greater than the height so portrait --->
<cfset ImageResize( myImage, maxDimension, "" )>
<cfelse>
<!--- the height is greater than the width so landscape --->
<cfset ImageResize( myImage, "", maxDimension )>
</cfif>
<!--- display images in a simple grid --->
<div style="width:110px;height:110px;float:left;border:1px solid black">
<cfimage action="writetobrowser" source="#myImage#">
</div>
</cfloop>
Vale a pena considerar que redimensionar imagens em tempo real é muito intensivo para o servidor, logo se esta é uma página que será exibida frequentemente, então voce deveria considerar a criação de imagens thumbnails em um script separado, salvando-as no seu sistema de arquivos. Voce pode então simplesmente linkar para a imagem thumbnail criada.
Para salvar imagens thumbnail no sistema de arquivos em vez de escreve-las no navegador, voce deveria usar:
<cfimage action="write"
destination="#ExpandPath( 'images/gallery/thumb/' )##list.name#"
source="#myImage#">
Versão em inglês: Adobe ColdFusion Cookbook
0 responses to “Redimensionar imagens on-the-fly para caber em uma grid”