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!
Sim, isso é normal, ainda não implementei essa parte, essa seria a parte. Quero resolver primeiro essa parte de Javascript no upload com Jcrop antes hehehe.. Mas valeu mesmo assim =)
No trecho
$('#cropbox').Jcrop({
onChange: updateCoords,
onSelect: updateCoords,
...
Experimenta mudar para :
$('#cropbox').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
...
Tenta com base no exemplo do manual
http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail
Pois é, esse exemplo esta funcionando, porém quando é feito o upload de uma nova imagem não funciona, some a div que tem o preview da imagem, ficando só a imagem para o corte.
Fui testar pra ver se te ajudava e quando cliquei em crop image apresentaram-se os erros abaixo.
Warning: imagecreatefromjpeg() [function.imagecreatefromjpeg]: gd-jpeg: JPEG library reports unrecoverable error: in /home2/marcelog/public_html/jcrop/index.php on line 16
Warning: imagecreatefromjpeg() [function.imagecreatefromjpeg]: 'uploads/1395692106.png' is not a valid JPEG file in /home2/marcelog/public_html/jcrop/index.php on line 16
Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in /home2/marcelog/public_html/jcrop/index.php on line 20
Warning: Cannot modify header information - headers already sent by (output started at /home2/marcelog/public_html/jcrop/index.php:16) in /home2/marcelog/public_html/jcrop/index.php on line 22
ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90 ÿÛC ÿÛC ÿÀªú"ÿÄ ÿĵ}!1AQa"q2‘¡#B±ÁRÑð$3br‚ %&'()456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyzƒ„…†‡ˆ‰Š’“”•–—˜™š¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖרÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ ÿĵw!1AQaq"2B‘¡±Á #3RðbrÑ $4á%ñ&'()56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz‚ƒ„…†‡ˆ‰Š’“”•–—˜™š¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖרÙÚâãäåæçèéêòóôõö÷øùúÿÚ?üª¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(¢Š(ÿÙ