原地作物 <canvas> HTML5中的部分

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

更改canvas的width或height会清除它。 因此，您必须先复制数据。

您可以putImageData()使用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" />