HTML5中<canvas>部分的就地裁剪

Question

我已经加载了一张<canvas>图像，并且数组中的裁剪（x，y，w，h）需要所有图形坐标。

我要做的是直接裁剪画布，而不需要临时的其他画布复制到/来自（如其他SO答案所示）。

我的想法是：

1）在画布的左上角绘制选定区域

2）将画布尺寸缩小到区域

$('#edit').on("click", function() {

  var img = $('#canvas');
  var c = img[0];

  var ctx = c.getContext("2d");

  //var imageData = ctx.getImageData(0, 0, 100, 100);

  ctx.drawImage(c, 0, 0, 100, 100, 0, 0, 100, 100);

  c.width = 100;
  c.height = 100;
});


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 350, 350);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="350" height="350"></canvas>
<input id="edit" type="button" value="Edit" />

对我而言似乎很容易，但我遗漏了一些东西：当我执行时，我什么都没得到https://jsfiddle.net/qg0znpu7/

我的代码出了什么问题？如何修复它以获得就地画布裁剪？

Answer 1

更改width的{​​{1}}或height将清除。因此，您必须先复制数据。

您可以使用putImageData()：

canvas

$('#edit').on("click", function() {
  var c = $('#canvas')[0];

  var ctx = c.getContext("2d");

  var imageData = ctx.getImageData(0, 0, 100, 100);
                                   
  c.width = 100;
  c.height = 100;

  ctx.putImageData(imageData, 0, 0);
});


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 350, 350);