javascript - HTML5 中 部分的就地裁剪

Question

我有一个<canvas>已加载图像以及数组中裁剪所需的所有图形坐标(x、y、w、h)。

我想做的是直接裁剪 Canvas ，而不需要临时的其他 Canvas 进行复制(如其他答案中所建议的那样)。

我的想法是:

1)在 Canvas 左上角绘制选定区域

2)将 Canvas 尺寸缩小到该区域

$('#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/

我的代码有什么问题吗？我该如何修复它以获得就地 Canvas 裁剪？

Answer 1

更改canvas的宽度或高度将会清除它。因此，您必须先复制数据。

您可以使用putImageData()为此:

$('#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);

<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" />