jcrop预览不显示突出显示的位置

我无法在预览div中使用jcrop显示正确的突出显示的正方形。我越来越面积是不一样的实际突出显示的区域，请检查下面的截图：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

来源

2016-03-30 Laziale

看起来像你原来的图像通过CSS或任何调整和Jcrop得到它的坐标搞砸了。

如上所述here，有2种方法来解决这一问题：

与boxWidth/boxHeight选项，这使得Jcrop比例尺的图像按比例的框尺寸内
与trueSize选项，可用当DOM和DOM中的图像对象上已经设置了高度和宽度时。

设置trueSize到图像的naturalWidth和naturalHeight似乎运作良好。

这里的JSFiddle
（注意，图像通过CSS缩放，并检查Jcrop是如何初始化）。

来源

2016-03-30 14:29:53 dekkard

非常感谢，像你提出的方法一样魅力。 – Laziale

jcrop预览不显示突出显示的位置

回答

相关问题