截图的思路是:逐像素读取canvas里面的图形的rgba值,然后显示在另外一个canvas里。
知识点
逐像素读取
var gl = state.getGraphicContext();
if ( gl.checkFramebufferStatus( gl.FRAMEBUFFER ) === gl.FRAMEBUFFER_COMPLETE ) {
gl.readPixels( 0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels );
// invert image
// slow part...
// so use a optimized inplace image flip.
var offsetStart = 0;
var offsetEnd = buffSize - rowSize;
var i, k;
for ( i = 0; i < halfHeight; i++ ) {
// copy start into temp
// typedarray set doesn't take a end param.
// forEach cannot be cancelled.
// so it's a for.
for ( k = 0; k < rowSize; k++ ) {
rowPixelsStart[ k ] = pixels[ offsetStart + k ];
rowPixelsStart[ k + 1 ] = pixels[ offsetStart + k + 1 ];
rowPixelsStart[ k + 2 ] = pixels[ offsetStart + k + 2 ];
rowPixelsStart[ k + 3 ] = pixels[ offsetStart + k + 3 ];
}
// copy end over start
pixels.copyWithin( offsetStart, offsetEnd, offsetEnd + rowSize );
// copy temp over end
pixels.set( rowPixelsStart, offsetEnd );
// move ptr
offsetStart += rowSize;
offsetEnd -= rowSize;
}
var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
imageData.data.set( pixels );
ctx.putImageData( imageData, 0, 0 );
takeShot = false;
}