Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Buenas galera,
Preciso de um help de vocês, tenho o seguinte código para envio de imagem com ajax + jcrop:
function checkCoords(){
if (parseInt($('#w').val())) return true;
alert('Por favor, selecione uma região da imagem.');
return false;
};
$(document).ready(function() {
$('#photoimg').on('change', function(){
$("#img-original").html('');
$("#img-original").html('<img src="loader.gif" alt="Uploading...."/>');
var imagem;
$("#imageform").ajaxForm({
data: imagem,
success: function(imagem){
$("#img-original").html('<img src="uploads/'+imagem+'" id="cropbox">');
$(".preview-container").html('<img src="uploads/'+imagem+'" class="jcrop-preview" alt="Preview">');
$("#imagem").val(imagem);
},
complete: function(){
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#cropbox').Jcrop({
onChange: updateCoords,
onSelect: updateCoords,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updateCoords(c){
if (parseInt(c.w) > 0){
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
}
}).submit();
});
});
O que esta acontecendo:
Quando eu seleciono uma imagem para ser enviada e ser cortada a mesma vai de formal normal, porém se eu não gostar da imagem e selecionar uma outra para o envio, ela vai ser mostrada na tela, mas a tela de preview do corte não será mostrada como na primeira vez da imagem enviada.
O que eu percebi é que se eu remover a linha:
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
Do código, isso funciona normal, porém fico sem o estilo CSS do preview.
Não manjo muito de javascript, então gostaria da ajuda de vocês se possível, o código funcionando pode ser visualizado em:
http://www.marcelogarbin.com.br/jcrop/
Desde já obrigado pela ajuda!
Carregando comentários...