jcrop預覽不顯示突出顯示的位置

Question

我無法在預覽div中使用jcrop顯示正確的突出顯示的正方形。 我越來越面積是不一樣的實際突出顯示的區域，請檢查下面的截圖：

這是我的代碼有：

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 
         }); 
        } 
       } 
      } 

任何想法，應該我改變了有正確的部分突出顯示？

感謝，Laziale

Answer 1

看起來像你原來的圖像通過CSS或任何調整和Jcrop得到它的座標搞砸了。

如上所述here，有2種方法來解決這一問題：

• 與boxWidth/boxHeight選項，這使得Jcrop比例尺的圖像按比例的框尺寸內

• 與trueSize選項，可用當DOM和DOM中的圖像對象上已經設置了高度和寬度時。

設置trueSize到圖像的naturalWidth和naturalHeight似乎運作良好。

這裏的JSFiddle
（注意，圖像通過CSS縮放，並檢查Jcrop是如何初始化）。