jcrop önizleme vurgulanmış konum göstermiyor

Question

Önizleme div içinde jcrop ile doğru vurgulanmış kare görüntüleyemiyorum. Ben gerçek vurgulanan alanı olarak aynı değildir alanı alıyorum , aşağıdaki ekran kontrol edin:

Bu kodudur ben: ne gerekir

function updatePreview(c) { 
       if (parseInt(c.w) > 0) { 
        // Show image preview 
        var imageObj = jQuery("#imgcrop")[0]; 
        var canvas = jQuery("#preview")[0]; 
        var context = canvas.getContext("2d"); 

        context.beginPath(); 
        //context.arc(50, 50, 50, Math.PI * 2, 0, true); // you can use any shape 
        context.arc(50, 50, 50, Math.PI * 4, 0, true); // you can use any shape 
        context.clip(); 
        context.closePath(); 

        //context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 100, 100); 
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 100, 100); 
       } 
      }; 

      function getcroparea(c) { 
       jQuery('.hdnx').val(c.x); 
       jQuery('.hdny').val(c.y); 
       jQuery('.hdnw').val(c.w); 
       jQuery('.hdnh').val(c.h); 
      }; 


      function readURL(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
        var image = new Image(); 
        var image_default = jQuery('#user-avatar').find('.default img'); 
        //var image_edit = jQuery('#user-avatar').find('.edit img'); 
        var image_edit = jQuery('#edit-image-form').find('.crop-image-side img'); 
        reader.readAsDataURL(input.files[0]); 
        reader.onload = function (e) { 

         image.src = e.target.result; 
         image.onload = function() { 
          var width = this.width; 
          var value = (width - 154)/2; 
          image_edit.css('left', '-' + value + 'px'); 
          image_default.css('left', '-' + value + 'px'); 
         }; 
         //jQuery('#user-avatar').find('img').attr('src', image.src); 
         jQuery('#imgcrop').attr('src', image.src); 
         jQuery('#<%=hfImageData.ClientID %>').val(image.src); 
         jQuery('#imgcrop').Jcrop({ 
          onSelect: getcroparea, 
          onChange: updatePreview, 
          aspectRatio: 1, 
          setSelect: [70, 25, 150, 150], 
          boxWidth: 0, 
          boxHeight: 0 
         }); 
        } 
       } 
      } 

konusunda fikrin Doğru bölümün vurgulanması için değiştiriliyor muyum? Orijinal görüntü CSS ya da her türlü yoluyla boyutlandırılır ve Jcrop o koordinatlar berbat olduğunu alır gibi

sayesinde Laziale'daki

Answer 1

görünüyor. Jcrop ölçekli kutusu boyutlar içinde orantılı olarak görüntü trueSize seçeneğiyle

yapmak boxWidth/boxHeight seçenekleri ile

• kullanılabilir:

  zamanda bu sorunu gidermek için 2 yöntem vardır, here tarif DOM'deki resim nesnesinde yükseklik ve genişlik ayarlandığında. Görüntü en naturalWidth ve naturalHeight için trueSize ayarlanması

iyi iş gibi görünüyor.

İşte JSFiddle
(görüntü CSS üzerinden ölçekli ve Jcrop başlatılır nasıl kontrol olduğunu not) bulunuyor.