html - Canvas如何将getImageData转为toDataUrl格式

Question

如何将 getImageData 转换为 todataUrl

code lines: 
var data = ctx.getImageData(150,200,200,100);
var data = document.getElementById("canvas").toDataURL('image/gif');

第一种情况:1 个参数 x 空间，2 个 y 空间，3 和 4 个 x,y 示例图像:http://postimg.org/image/lfogtwjn7/ 所以我得到了 200px 的裁剪图像数据× 100 像素 第二种情况我得到完整图像 toDataUrl:document.getElementById("canvas").toDataURL('image/gif');

我如何像 getImageData(150,200,200,100) 那样获取裁剪后的图像，但采用 DataUrl 格式 也许有人有其他报价

Answer 1

您可以在其中使用额外的 Canvas 绘制图像，然后获取 toDataURL()

var destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(sourceCanvas, 150,200,200,100);
var dataUrl =destCtx.toDataURL('image/png');