Lesson13-截图


官方效果展示

截图的思路是:逐像素读取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;
}

点击screenshot 元素,将 ‘2DView’ 中显示的图像转成url,并将当前网页跳转到该url