裁剪画布中显示的图像

Question

我有一个画布标签:

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

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

我目前正在使用"toDataURL()"将数据从画布转换为可由<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);

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;
}