javascript将图像裁剪到 Canvas

Question

我想根据特定区域裁剪图像，下面的示例如何裁剪图像，使其只变成蓝线内的东西(像素，数据......)，并删除蓝线外的东西(像素，数据......)盒子？

下面的代码是我尝试过的，在 Canvas 绘制新图像后，不正确的区域是我想要的，我是否遗漏了什么，如何解决？

任何建议将不胜感激。请不要提供插件作为答案，css crop 不是我要找的。

更新
https://jsfiddle.net/xqpdtq76/我更新了 fiddle 和下面的代码，图像自然宽度与 css 宽度不同，所以我需要转换裁剪 x、y、宽度、高度 (sx、sy、sw、sh) 以适应自然图像大小并裁剪图像.
结果似乎可以裁剪正确的区域，但图像比例不正确..我不明白为什么

var crop = function() {

  var transformMediaBlock = $('.mediaBlock');
  var transformCropInner = $('.transformCropInner');
  var transformCropLimit = $('.transformCropLimit');
  var canvasContainer = $('.canvasContainer')

  var canvasWidth = $(transformCropLimit).width();
  var canvasHeight = $(transformCropLimit).height();
  var canvas = $('<canvas/>',{'class':''}).width(canvasWidth).height(canvasHeight);
  canvas = canvas.appendTo($(canvasContainer));
  var ctx = canvas[0].getContext('2d');

	var limitLeft = transformCropLimit.offset().left;
  var limitTop = transformCropLimit.offset().top;
  var limitRight = limitLeft + transformCropLimit.width();
  var limitBottom = limitTop + transformCropLimit.height();
  console.log('limitLeft:'+limitLeft)
  console.log('limitRight:'+limitRight)
  var imageLeft = transformMediaBlock.find('img').offset().left;
  var imageTop = transformMediaBlock.find('img').offset().top;
  var imageRight = imageLeft + transformMediaBlock.find('img').width();
  var imageBottom = imageTop + transformMediaBlock.find('img').height();
  console.log('imageLeft:'+imageLeft)
  console.log('imageRight:'+imageRight)

  if (limitLeft <= imageLeft) {
    var sx = 0;
  } else {
    var sx = limitLeft - imageLeft;
  }
  console.log('sx:'+sx)

  if (limitTop <= imageTop) {
    var sy = 0;
  } else {
    var sy = limitTop - imageTop;
  }
  console.log('sy:'+sy)

  if (limitLeft <= imageLeft) {
    var l =  imageLeft;
  } else {
    var l = limitLeft;
  }
  if (limitRight <= imageRight) {
    var r = limitRight;
  } else {
    var r = imageRight;
  }
  var sw = r - l;
  console.log('sw:'+sw)

  if (limitTop <= imageTop) {
    var t = imageTop;
  } else {
    var t = limitTop;
  }
  if (limitBottom <= imageBottom) {
    var b = limitBottom;
  } else {
    var b = imageBottom;
  }
  var sh = b - t;
  console.log('sh:'+sh);


  var dx = 0;
  var dy = 0;
  var dw = sw;
  var dh = sh;

  console.log('naturalWidth:'+transformMediaBlock.find('img')[0].naturalWidth);
  console.log('naturalHeight:'+transformMediaBlock.find('img')[0].naturalHeight);
  console.log('cssWidth:'+transformMediaBlock.find('img').width());
  console.log('cssHeight:'+transformMediaBlock.find('img').height());
  var ratio = (transformMediaBlock.find('img')[0].naturalWidth / transformMediaBlock.find('img').width());
  console.log('ratio:'+ratio);
  sx = sx*ratio;
  sy = sy*ratio;
  sw = sw*ratio;
  sh = sh*ratio;
  console.log('sx*ratio:'+sx)
  console.log('sy*ratio:'+sy)
  console.log('sw*ratio:'+sw)
  console.log('sh*ratio:'+sh)
  ctx.drawImage(transformMediaBlock.find('img')[0],
    sx, sy, sw, sh,
    dx, dy, dw, dh
  );
  
};


$('#container').on('click', '.action.crop', function (e) {
  var transformMediaBlock = $('.mediaBlock');
  transformMediaBlock.find('img').on('load', function() {
    crop();
  }).each(function() {
    if(this.complete) $(this).load();
  });
});

.mediaBlock {
  position: relative;
  display: block;
  overflow: hidden;
}
.mediaBlock img {
  max-width: 100%;
}

.transformCropLimit {
  position: relative;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

.transformCropInner {
  width: 300px;
  cursor: pointer;
  position: relative;
  top: 10px;
  left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="content main">
    <div class="transformCropLimit">
      <div class="transformCropInner">
        <div class="mediaBlock">
          <img src="http://i.imgur.com/EdQs9jA.jpg">
        </div>
      </div>
    </div>
    <div class="action crop">Crop</div>
  </div>
  <div class="canvasContainer"></div>  
</div>

Answer 1

裁剪图片

创建裁剪区域大小的 Canvas ，然后在该 Canvas 上绘制图像。例如，如果您有一张 500 x 400 的图像，您希望将其裁剪到左上角 100,100 和右下角 200,200

var crop = {
   top : 100,
   left : 100,
   right : 200,
   bottom : 200,
}

创建一个正确宽度和高度的 Canvas

var canvas = document.createElement("canvas");
canvas.width = crop.right - crop.left;
canvas.height = crop.bottom - crop.top;

然后将图像绘制到该 Canvas 上，使左上角 100,100 位于 Canvas 原点 0,0

var ctx = canvas.getContext("2d"); // so we can draw
ctx.drawImage(image, -crop.left, -crop.top);

这就是创建裁剪图像的方式(注意 Canvas 是 HTMLImageElement)

如果您有缩放图像。

var w = image.width;
var h = image.height;

然后你按比例在 Canvas 上绘制它

var myScale = 0.5; // half scale

并且您想通过缩放的 Canvas 坐标裁剪它

var crop = {  // the canvas coordinate system
   top : 100,
   left : 100,
   right : 200,
   bottom : 200,
}

缩放后的图像在 Canvas 坐标系中，左上角为 (0,0)，其宽度和高度为 w * scale, h * scale 裁剪它只是在您绘制图像时缩放图像。

创建 Canvas 。

var canvas = document.createElement("canvas");
canvas.width = crop.right - crop.left;
canvas.height = crop.bottom - crop.top;

绘制在图像坐标中缩放和偏移的图像

var ctx = canvas.getContext("2d"); // so we can draw
ctx.scale(scale,scale);
ctx.drawImage(image, -crop.left / scale, -crop.top / scale); // convert offset to 
                                                             // image coordinate system