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é 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