jcrop preview не показывает выделенное местоположение

Question

Я не могу отобразить правильный выделенный квадрат с 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 
         }); 
        } 
       } 
      } 

Любая идея, что должно Я хочу изменить выделенный раздел?

Спасибо, Лацьале

Answer 1

Похоже, исходный размер изображения, с помощью CSS или любой другой и Jcrop получает ее координаты облажался.

Как описано here, есть 2 способа исправить это:

• с boxWidth/boxHeight опций, которые делают Jcrop масштаб изображения пропорционально в пределах размеров коробки

• с опцией trueSize, годный к употреблению когда высота и ширина уже установлены на объекте изображения в DOM.

Установка trueSize на изображение и naturalWidth-х naturalHeight кажется, работает хорошо.

Вот JSFiddle
(обратите внимание, что изображение масштабируется с помощью CSS, а также проверить, как Jcrop инициализируется).