Skip to content

Instantly share code, notes, and snippets.

@spite
Created June 25, 2025 16:24
Show Gist options
  • Save spite/4975374b449f18c84e5f00f7c058be84 to your computer and use it in GitHub Desktop.
Save spite/4975374b449f18c84e5f00f7c058be84 to your computer and use it in GitHub Desktop.
Loader
function initLoader() {
function draw( threshold ) {
for( var j = 0; j < srcBuf8.length; j += 4 ) {
var c = imgBuf8[ j ] + imgBuf8[ j + 1 ] + imgBuf8[ j + 2 ];
c /= 3;
dstBuf8[ j ] = c;
dstBuf8[ j + 1 ] = c;
dstBuf8[ j + 2 ] = c;
dstBuf8[ j + 3 ] = imgBuf8[ j + 3 ];
if( srcBuf8[ j + 3 ] > 0 ) {
if( srcBuf8[ j ] < threshold ) {
dstBuf8[ j ] = imgBuf8[ j ];
dstBuf8[ j + 1 ] = imgBuf8[ j + 1 ];
dstBuf8[ j + 2 ] = imgBuf8[ j + 2 ];
}
}
}
dstData.data.set( dstBuf8 );
resultCtx.putImageData( dstData, 0, 0 );
}
var maskCanvas = document.createElement( 'canvas' );
var logoCanvas = document.createElement( 'canvas' );
var resultCanvas = document.createElement( 'canvas' );
loadingLogo.appendChild( resultCanvas );
var maskCtx = maskCanvas.getContext( '2d' );
var logoCtx = logoCanvas.getContext( '2d' );
var resultCtx = resultCanvas.getContext( '2d' );
resultCanvas.width = logoCanvas.width = maskCanvas.width = maskLoader.width;
resultCanvas.height = logoCanvas.height = maskCanvas.height = maskLoader.height;
logoCtx.drawImage( bigLogo, 0, 0 );
maskCtx.drawImage( maskLoader, 0, 0 );
var srcData = maskCtx.getImageData( 0, 0, maskCanvas.width, maskCanvas.height );
var srcBuf8 = new Uint8ClampedArray( srcData.data );
var imgData = logoCtx.getImageData( 0, 0, logoCanvas.width, logoCanvas.height );
var imgBuf8 = new Uint8ClampedArray( imgData.data );
var dstData = resultCtx.getImageData( 0, 0, resultCanvas.width, resultCanvas.height );
var dstBuf8 = new Uint8ClampedArray( dstData.data );
return draw;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment