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

Question

我正在用HTML5画布功能绘制一个全窗口图，我想要做的是在这个画布中定义一个小方格的区域，并将区域的一部分变成一定的格式，比如png、jpg或base64文本。

Answer 1

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

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

然后使用context.drawImage将原始画布的一部分复制到背景画布上。此示例从400: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的have 64编码版本，就像在"从base64画布(readAsBinaryString)获取二进制(ReadAsBinaryString)数据“中已经解释过的那样。