裁剪画布中显示的图像

Question

我有一个画布标签：

<canvas width="321" height="240" id="img_source"></canvas>

我想添加裁剪功能，所以我制作了一个可调整大小的div，可以通过使用鼠标拖动div的角来识别裁剪图像的边框。它看起来像下图：

我目前正在使用＆＃34; toDataURL（）＆＃34;将数据从画布转换为可由<img>标签显示的图像。我的问题是，如何将图像转换为仅由可调整大小的div识别的画布的一部分？

Answer 1

将方法getImageData与选定的矩形坐标一起使用。例如：

var imageData = ctx.getImageData(65, 60, 100, 100);

然后创建具有所需尺寸的辅助画布，并使用puImageData设置像素：

var canvas1 = document.createElement("canvas");
canvas1.width = 100;
canvas1.height = 100;
var ctx1 = canvas1.getContext("2d");
ctx1.rect(0, 0, 100, 100);
ctx1.fillStyle = 'white';
ctx1.fill();
ctx1.putImageData(imageData, 0, 0);

最后使用toDataURL更新图片：

dstImg.src = canvas1.toDataURL("image/png");

请参阅CodePen

中为您准备的完整示例

Answer 2

创建一个目标大小的新画布，使用drawImage（）绘制裁剪后的图像，并将该画布插入DOM，避免使用img和data-uri：

var ccanvas = document.createElement("canvas"),
    cctx = ccanvas.getContext("2d");

ccanvas.width = w;
ccanvas.height = h;

// draw with crop arguments
cctx.drawImage(image_src,  x, y, w, h,  0, 0, w, h);
//                         ^^^^^^^^^^ source region
//                                      ^^^^^^^^^^ dest. region

// insert cropped image somewhere in the DOM tree:
document.body.appendChild(ccanvas);

window.onload = function() {

  var img = document.getElementById("image_src");

  document.body.appendChild(region2canvas(img, 150, 60, 220, 200));
}

function region2canvas(img, x, y, w, h) {
  var ccanvas = document.createElement("canvas"),
    cctx = ccanvas.getContext("2d");

  ccanvas.width = w;
  ccanvas.height = h;

  // draw with crop arguments
  cctx.drawImage(img, x, y, w, h, 0, 0, w, h);

  return ccanvas;
}

<img src="http://i.imgur.com/kWI4Cmz.png" id="image_src">

Answer 3

创建一个新画布，并将所选部分复制到该新画布，然后从该新画布中获取toDataURL（）。

Answer 4

从一个图像裁剪的关键是上下文的drawImage方法允许我们将源图像的裁剪部分渲染到画布。

context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

img - 源图片对象
sx - 来源x
sy - 来源y
sw - 来源宽度
sh - 来源高度
dx - 目的地x
dy - 目的地y
dw - 目的地宽度
dh - 目标身高