Question

此插件适用于较小的图像，但在大图像上无法正确裁剪。

我的.preview_container是250px乘153px。我相信我在我的＆＃34; updateCoords＆＃34;因为它可能无法根据真实图像大小获得坐标。

裁剪时预览中的一切看起来都很棒，它只是用不正确的裁剪来保存图像。

提前致谢！

JS：

jQuery(function($){

// Create variables (in this scope) to hold the API and image size
var jcrop_api,
    boundx,
    boundy,

    // Grab some information about the preview pane
    $preview = $('#preview-pane'),
    $pcnt = $('#preview-pane .preview-container'),
    $pimg = $('#preview-pane .preview-container img'),

    xsize = $pcnt.width(),
    ysize = $pcnt.height();

console.log('init',[xsize,ysize]);


    $('#cropbox').Jcrop({
  onChange: updatePreview,
  onSelect: updateCoords,
  aspectRatio: xsize / ysize
},function(){
  // Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  // Store the API in the jcrop_api variable
  jcrop_api = this;

  // Move the preview into the jcrop container for css positioning
  $preview.appendTo(jcrop_api.ui.holder);
});


function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        console.log('update',[c.x,c.y]);

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };


  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };    

});

Answer 1

我最终使用html2canvas捕获预览div中的图像并将其保存为PNG。

使用JCrop裁剪大图像的问题

1 个答案: