如何快照HTML5画布的一部分？

Question

我正在使用HTML5画布功能绘制一个完整的窗口图，我想要做的是在这个画布中定义一个小方块的区域，并将区域的一部分缩放成某种格式，如png，jpg或base64文本。

Answer 1

首先，在背景中创建一个新画布，其中包含您要拍摄的图像的宽度和高度：

 var bgCanvas = document.createElement('canvas');
 bgCanvas.width = 200;
 bgCanvas.height = 150;

然后使用context.drawImage将原始画布的一部分复制到背景画布。此示例从200：500开始复制200x150部分。

var bgContext = bgCanvas.getContext('2d');
bgContext.drawImage(mainCanvas, // source
                    400, 500,   // source coordinates
                    200, 150,   // source dimension
                    0, 0,       // target coordinates
                    200, 150);  // target dimensions

现在你必须得到bgCanvas的base64编码版本，如前面已经解释的那样＃34; Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)＆＃34;。