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 x 100px的裁剪图像数据第二种情况我得到了完整的图像到DataUrl：document.getElementById("canvas").toDataURL('image/gif');

我如何获得像getImageData(150,200,200,100)但是 toDataUrl 格式的裁剪图像 也许有人有其他优惠

Answer 1

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

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