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#">

by John Whish

Versão em inglês: Adobe ColdFusion Cookbook

Creative Commons License Adobe

 

0 responses to “Redimensionar imagens on-the-fly para caber em uma grid”