javascript将图像裁剪为画布 [英] javascript crop image to canvas

问题描述

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

I want to crop the image based on specific area, below example how to crop image so it becomes only the things (pixel, data...) inside blue line, and delete things (pixel, data...) outside the box?

下面的代码就是我尝试过的，画布后绘制新图像，不正确的区域我想要什么，我想念一些东西，如何解决？

Below code is what I tried, after canvas draw new image, not correct area what I want, do I miss something, how to fix it ?

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

Any suggestion will be appreciated. Please don't provide plugin as an answer, and css crop is not what I'm looking for.

UPDATE < br>
https://jsfiddle.net/xqpdtq76/
我更新小提琴在代码下面，图像naturalWidth与css宽度不同，所以我需要转换裁剪x，y，宽度，高度（sx，sy，sw，sh）以适合自然图像大小并裁剪图像。

结果似乎可以裁剪正确的区域，但图像尺度不正确..我不明白为什么

UPDATE
https://jsfiddle.net/xqpdtq76/ I update the fiddle and below code, the image naturalWidth is different with css width, so I need to convert the crop x,y,width,height (sx,sy,sw,sh) to fit the natural image size and crop the image.
the result it seems work to crop the correct area but image is not correct scale .. I don't get why

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>

推荐答案

< h2>裁剪图像

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

To crop image

Create a canvas the size of the crop area, then draw the image on that canvas. For example if you have a 500 by 400 image and you want to crop it to the top left 100,100, and bottom right 200,200

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

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

Create a canvas the correct width and height

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

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

Then draw the image onto that canvas so that the top left 100,100 is at the canvas origin 0,0

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

这就是你创建裁剪图像的方法（Note canvas是一个HTMLImageElement）

And that is how you create a cropped image (Note canvas is a HTMLImageElement)

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

您可以在画布上按比例绘制

and you draw it on a canvas at a scale

var myScale = 0.5; // half scale

你想通过缩放的画布坐标裁剪它

and you want to crop it via the scaled canvas coordinates

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

您的图像缩放在画布坐标系左上角为（0,0），宽度和高度为 w * scale ， h * scale 要裁剪它，只需在绘制时缩放图像。

Your image scaled is in the canvas coordinate system with top left at (0,0) and its width and height are w * scale, h * scale To crop it just scale the image when you draw it.

创建画布。

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

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

draw the image scaled and offset in the image coordinates

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

这篇关于javascript将图像裁剪为画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！