Method downsampleToBase

pixelizer.js:587–616

* 下采样到基准像素图

(sourceCanvas, blockSize)

     * 下采样到基准像素图
     */
    downsampleToBase(sourceCanvas, blockSize) {
        const sourceCtx = sourceCanvas.getContext('2d');
        const sourceData = sourceCtx.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height);
        
        const targetWidth = Math.floor(sourceCanvas.width / blockSize);
        const targetHeight = Math.floor(sourceCanvas.height / blockSize);
        
        const targetCanvas = document.createElement('canvas');
        targetCanvas.width = targetWidth;
        targetCanvas.height = targetHeight;
        const targetCtx = targetCanvas.getContext('2d');
        targetCtx.imageSmoothingEnabled = false;
        
        const targetData = targetCtx.createImageData(targetWidth, targetHeight);
        
        for (let y = 0; y < targetHeight; y++) {
            for (let x = 0; x < targetWidth; x++) {
                const color = this.sampleBlock(sourceData, x * blockSize, y * blockSize, blockSize);
                const targetIndex = (y * targetWidth + x) * 4;
                
                targetData.data[targetIndex] = color.r;
                targetData.data[targetIndex + 1] = color.g;
                targetData.data[targetIndex + 2] = color.b;
                targetData.data[targetIndex + 3] = color.a;
            }
        }
        
        targetCtx.putImageData(targetData, 0, 0);
        return targetCanvas;
    }

    sampleBlock(imageData, startX, startY, blockSize) {
        const { data, width, height } = imageData;