裁剪 Canvas 中显示的图像

Question

我有一个 canvas 标签：

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

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

我目前正在使用 "toDataURL()" 将数据从 canvas 转换为可由 <img> 标签显示的图像。我的问题是，如何将由可调整大小的 div 识别的 canvas 的一部分转换为图像？

Answer 1

创建一个新的 canvas，并将所选部分复制到新的 canvas，然后从新的 canvas.

获取 toDataURL()

Answer 2

对选定的矩形坐标使用方法getImageData。例如：

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

然后创建具有所需尺寸的辅助 canvas 并使用 putImageData 设置像素：

let canvas1 = document.createElement("canvas");
canvas1.width = 100;
canvas1.height = 100;
let 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 3

以目标大小创建一个新的 canvas，使用 drawImage() 绘制裁剪后的图像并将 canvas 插入 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 4

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

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

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

裁剪 Canvas 中显示的图像

Crop an image displayed in a Canvas

html

javascript

css

jquery

canvas