Crop de imagem usando JCrop

Eu quero mostrar como usar a biblioteca JCrop para fazer o crop em imagens usando o ColdFusion como backend.

Lembrando que vou postar somente um exemplo, e que a implementação, você pode fazer como achar melhor.

Index.html
Primeiro vamos criar um formulário simples chamando o nosso arquivo de crop, denominado crop.cfm

 <h2>Selecione uma imagem JPG ou GIF de at&eacute; 100k</h2>
<form name="form" id="form" action="crop.cfm" method="post" enctype="multipart/form-data">
    <input type="file" name="foto" id="foto" />
    <input type="submit" value="Carregar" />
</form>
[code]
Bem, feito isso, vamos ao arquivo responsável pelo crop.
<!--:--><span id="more-452"></span><!--:pt-->
<strong>crop.cfm</strong>
Primeiro fazemos o upload do arquivo e no meu caso eu verifiquei o tamanho do arquivo para não submeter arquivos pesados de mais.
[code lang='coldfusion']
<cfif isDefined("form.foto")>
        <cffile action="upload" destination="#GetDirectoryFromPath(ExpandPath("*.*"))#/upload" nameconflict="makeunique" filefield="foto">
        <cfif (file.ServerFileExt Is "jpg" or file.ServerFileExt Is "gif") and file.FileSize Lte 120000>
            <cfset filename = file.ServerFile />
        <cfelse>
            <cffile action="delete" file="#GetDirectoryFromPath(ExpandPath("*.*"))#upload/#file.ClientFileName#.#file.ClientFileExt#">
                <script language="javascript">
            alert('favor inserir um arquivo JPG ou GIF de at 150k!');
            alert('Arquivo deletado!');
            history.back();
        </script>
        </cfif>
</cfif>

Abaixo fica a parte do documento que só será executada quando o usuário fizer o crop.
No exemplo abaixo, temos as quatro linhas responsáveis por fazer o crop da imagem no ColdFusion. Vejam como é símples e prático, parece brincadeira de criança.

<cfif isDefined("form.x")>
            <cfimage source="upload/#url.img#" name="img">
            <cfset filename = url.img />
            <cfset ImageCrop(img,form.x,form.y,form.w,form.h) />
            <cfimage source="#img#" action="write" destination="upload/#url.img#"  overwrite="yes">
</cfif>

Ainda no mesmo arquivo, ficam as implementações e includes do JCrop.

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
    $(window).load(function(){
        var api = $.Jcrop('#cropbox',{ 
        bgColor: 'black', 
        onSelect: updateCoords
        });   
        // Immediately set selection (can also be set by options)
        api.setSelect([ 100,100,200,200 ]);

        // Set an event handler to animate selection
        $('#button1').click(function() {
            api.animateTo([ 120,120,80,80 ]);
        });    
    });
    
    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };

    function checkCoords()
    {
        if (parseInt($('#x').val()) || parseInt($('#x').val()) == 0) 
            return true;
        alert('Por favor selecione uma parte da imagem e depois recorte');
        return false;
    };
</script>

Mais abaixo o HTML para a exebição da imagem e da marcação para o crop.

<div id="outer">
    <div class="jcExample">
        <div class="article">
                <!-- This is the image we're attaching Jcrop to -->
            <img src="upload/«cfoutput>#filename#</cfoutput>" id="cropbox" /»

            <!-- This is the form that our event handler fills -->
            <form action="crop.cfm?action=crop&img=«cfoutput>#filename#</cfoutput>" method="post" onSubmit="return checkCoords();"»
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="submit" value="Cortar Imagem" />
            </form>
        </div>
    </div>
</div>

Então, com isso temos um crop de imagem usando a biblioteca do jquery para marcar o corte da imagem.

Como vimos, o mais demorado é fazer o html e o javascript, pois o ColdFusion como sempre, resolve seu problema rápidamente.

Bom espero que gostem, muitas pessoas pediram que eu postasse o código dessa funcionalidade então está aí.

Paulo Teixeira