Jcrop

Question

kullandığı resmi yeniden boyutlandır Benim resimleri kırpmak için Jquery Jcrop kullanıyorum. Şimdi görüntüyü yeniden boyutlandırmak için bir kaydırıcı uygulayacağım. Aynı sayfada dilimleme ve yeniden boyutlandırma yapmak istiyorum.

ben böyle yapmak:

$(document).ready(function() { 


    var img = $('#cropbox')[0]; // Get my img elem 
    var orgwidth, orgheight; 
    $("<img/>") // Make in memory copy of image to avoid css issues 
     .attr("src", $(img).attr("src")) 
     .load(function() { 
      orgwidth = this.width; // Note: $(this).width() will not 
      orgheight = this.height; // work for in memory images. 
     }); 

    $('#cropbox').Jcrop({ 
     onSelect: updateCoords 
    }); 

    $("#imageslider").slider({ 
     value: 100, 
     max: 100, 
     min: 1, 
     slide: function(event, ui) { 
      //$('ul#grid li').css('font-size',ui.value+"px"); 
      resizeImage(orgwidth, orgheight); 
     } 
    }); 

}); 

Ve basit resizeImage fonksiyonunu:

function resizeImage(orgwidth, orgheight) { 
    var value = $('#imageslider').slider('option', 'value'); 
    var width = orgwidth * (value/100); 
    var height = orgheight * (value/100); 
    $('#cropbox').width(width); 
    $('#cropbox').height(height); 
    $('#tester').val("org: "+orgwidth+" now: "+width); 
} 

sorundur en kısa sürede Jcrop açmak, ben görüntüyü yeniden boyutlandırmak olamaz. Her iki işlevi aynı anda nasıl kullanabilirim? ne istediğini yeniden boyutlandırma orantılı olması gerektiğini ise

Answer 1

Yeniden boyutlandırdıktan ve yeniden boyutlandırdıktan sonra yeniden yerleştirirken jCrop'u yok ettim. Yine de teşekkürler. Kod:

 function resizeImage(orgwidth, orgheight) { 
     jcrop_api.destroy(); 

     var value = $('#imageslider').slider('option', 'value'); 
     var width = orgwidth * (value/100); 
     var height = orgheight * (value/100); 
     $('#cropbox').width(width); 
     $('#cropbox').height(height); 
     $('#rw').val(width); 
     $('#rh').val(height); 

     initJcrop(); 

    } 

Answer 2

, ben (o jCrop ile uyumsuz görünüyor beri) Kaydırıcıyı gerek olduğunu sanmıyorum. Sen (yani, resizeImage fonksiyonunu modifiye uygulamak edilir) jCrop kullanabilir ve onChange durumunda, nisbili¤ini sağlamak olabilir.
Ben de öyle düşünüyorum.

Answer 3

Yapmak için aynı görevi gerçekleştirdim: resmi jCrop uygulandığı bir kaydırıcıyla yeniden boyutlandırın. Yeniden boyutlandırmak zorunda olduğunuz bazı öğeler de vardır; jCrop sadece görüntüyü değil. Ben jCrop eklentisi yama sona erdi ve burada en son jCrop-0.9.10 için yama.

jCrop'nuzu yayanın.

var jCropApi; 
$('#photo').Jcrop({}, function() 
{ 
    jCropApi = this; 
}); 

Calc yeni yükseklik:

--- /home/dr0bz/Desktop/jquery.Jcrop.js 
+++ /home/dr0bz/workspace/profile_tuning/js/lib/jquery.Jcrop.js 
@@ -1573,6 +1573,15 @@ 
     ui: { 
     holder: $div, 
     selection: $sel 
+  }, 
+  
+  resizeImage: function(width, height) { 
+  boundx = width; 
+  boundy = height; 
+  $([$img2, $img, $div, $trk]).each(function(index, element) 
+  { 
+   element.width(width).height(height); 
+  }); 
     } 
    }; 

jCrop API alın: Eğer yama nasıl uygulanacağını bilmiyorsanız, sadece jCrop ait (tabii unimified versiyon) 1578 satır resizeImage işlevini koymak ve genişlik. senin bir kaydırıcı ile bunu yapıyor ise sürgü görüntünün yeni genişliğini döndürür diyelim ve resmin en boy oranına sahip yeni yüksekliği:

var aspectRatio = width/height; 
// newWidth returned by slider 
var newHeight = Math.round(width/aspectRatio); 
jCropApi.resizeImage(newWidth, newHeight); 

göz kulak olunması gereken diğer noktalar vardır. Her yeniden boyutlandırıldıktan sonra, kırpma alanının hala görüntünün görünüm alanında olduğunu görün. İhtiyacınız varsa, tam kaynağı, benim için nasıl yaptığımı gönderebilirim: resmi yeniden boyutlandırmak için jCrop + jquery ui kaydırıcısı.

Selamlar Ne de yapabilirsiniz kaydırıcı değişiklikleri, Jcrop API ile setImage arayıp böyle yeni genişlik ve yükseklik değerlerini ayarladığınızda Jcrop ait setImage fonksiyonu faydalanmak olduğunu

Answer 4

:

var jcrop_api; 

$('#cropbox').Jcrop({ 
    onSelect: updateCoords 
}, function() { 
    jcrop_api = this; 
}); 

$("#imageslider").slider({ 
    value: 100, 
    max: 100, 
    min: 1, 
    slide: function(event, ui) { 
     var value = $('#imageslider').slider('option', 'value'); 
     var width = orgwidth * (value/100); 
     var height = orgheight * (value/100); 
     jcrop_api.setImage($(img).attr("src"), function() { 
      this.setOptions({ 
       boxWidth: width, 
       boxHeight: height 
      }); 
     }); 
     $('#tester').val("org: "+orgwidth+" now: "+width); 
    } 
}); 

Bu teknikten emin olmadığım şey en iyi çözümdür çünkü setImage işlevini her çağırdığınızda jcrop yeni bir Image nesnesi oluşturur.

Answer 5

Hermann Bier yanıtının bir uzantısı olarak jquery animasyonunu ekledim.etrafında jquery.Jcrop.js içinde

ui: { 
    holder: $div, 
    selection: $sel 
    } 

: jquery.Jcrop.js v0.9.12

kodu bulun: yeniden boyutlandırma yolu daha iyi animasyonlu ne zaman :)

Jcrop versiyonu Uygulanacak görünüyor hat 1573 ve ile değiştirin: yeniden boyutlandırma Canlandıracağımız işlevine

ui: { 
    holder: $div, 
    selection: $sel 
    }, 
    resizeImage: function(width, height) { 
    animationsTid = 500; 
    boundx = width; 
    boundy = height; 

    $($img2).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    $($img).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    $($div).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    $($trk).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    /* 
    //Old way of resizing, but without animation 
    $([$img2, $img, $div, $trk]).each(function(index, element){ 
     element.width(width).height(height); 
    }); 
    */ 
    } 

Çağrısı. https:/Ben sadece burada bir çekme isteği gönderdiğiniz bir üs olarak bu kullanma :) Kodlama