使用 JCrop 裁剪大图像的问题答案

【问题标题】：Issue with cropping large images with JCrop使用 JCrop 裁剪大图像的问题
【发布时间】：2014-12-04 23:46:13
【问题描述】：

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

我的 .preview_container 是 250 像素 x 153 像素。我相信我在“updateCoords”函数中做错了，因为它可能无法根据真实图像大小获取坐标。

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

提前致谢！

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

});

【问题讨论】：

标签： jquery jcrop image-scaling image-size

【解决方案1】：

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

【讨论】：