jcrop previewで強調表示された場所が表示されない

Question

jcropでハイライトされた正方形をプレビューdivに表示できません。 私は実際の強調表示された領域と同じではありませんエリアを取得し、下のスクリーンショットをチェックしてくださいね。

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

何べき任意のアイデア：

をこれは私が持っているコードです。私は正しいセクションが強調表示されるように変更しますか？元の画像はCSSまたは何を経由してリサイズされJcropが、それは座標がめちゃくちゃだなるよう

おかげで、Laziale

Answer 1

が見えます。 、trueSizeオプションに比例ボックス寸法

内Jcropスケールを作るboxWidth/boxHeightオプションと

• 画像使える：

  としては、これを修正する2つの方法があり、hereを記載しました高さと幅がすでにDOMのイメージオブジェクトに設定されている場合画像のnaturalWidthとnaturalHeightにtrueSizeの設定

  は

うまく動作するようです。ここで

は（画像はCSSを経由してスケーリングされていることに注意してください、とJcropが初期化される方法を確認してください）JSFiddle
です。