javascript将图像裁剪到画布

Question

我想根据特定区域裁剪图像，在下面的示例中，如何裁剪图像，使其仅成为蓝线内的东西（像素，数据...），并删除框外的东西（像素，数据...）？

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

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

更新
https://jsfiddle.net/xqpdtq76/ 我更新了小提琴和下面的代码，图像naturalWidth与CSS宽度不同，因此我需要转换裁剪x，y，width，height（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

裁剪图像

创建一个具有裁切区域大小的画布，然后在该画布上绘制图像。例如，如果您有一个500 x 400的图像，并且想要将其裁剪到左上角100,100和右下角200,200

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

创建正确宽度和高度的画布

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

然后将图像绘制到该画布上，以便左上角100,100位于画布原点0,0

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

这就是创建裁剪图像的方式（注意画布是HTMLImageElement）

如果您已缩放图像。

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

然后按比例画在画布上

var myScale = 0.5; // half scale

而您想通过缩放的画布坐标进行裁剪

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

缩放的图像位于画布坐标系中，左上角为（0,0），其宽度和高度为w * scale。h * scale要进行裁剪，只需在绘制时缩放图像即可。

创建画布。

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