|
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>
Bem, feito isso, vamos ao arquivo responsável pelo crop.
crop.cfm
Primeiro fazemos o upload do arquivo e no meu caso eu verifiquei o tamanho do arquivo para não submeter arquivos pesados de mais.
<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í.
Quem tiver interesse em ver funcionando, segue o link:
http://www.pauloteixeira.blog.br/jcrop/
[]s
|
