Image Dwarf Creator

function processImage(originalImg, headRatio = '0.35', bodyCompression = '0.35', widthExpand = '1.15') {
    const headRatioFloat = Math.max(0, Math.min(1, parseFloat(headRatio)));
    const bodyCompFloat = Math.max(0.01, parseFloat(bodyCompression));
    const widthExpFloat = Math.max(0.1, parseFloat(widthExpand));

    const canvas = document.createElement('canvas');
    const W = originalImg.width;
    const H = originalImg.height;

    // Define three vertical regions: Top (head, 1.0 scale), Middle (transition), Bottom (body, compressed scale)
    const y1 = Math.max(0, H * (headRatioFloat - 0.05));
    const y2 = Math.min(H, H * (headRatioFloat + 0.15));
    
    const hTop = y1;
    const hTrans = y2 - y1;
    const hBot = H - y2;
    
    const dTop = hTop; // The head maintains its original aspect ratio vertically
    
    // We will slice the transition to make the "squish" effect smooth and natural
    const slices = 100;
    let dTrans = 0;
    const srcSliceH = hTrans > 0 ? hTrans / slices : 0;
    const scales = [];
    
    for (let i = 0; i < slices; i++) {
        const t = (i + 0.5) / slices;
        // Smooth non-linear interpolation (easing in-out) for a natural distortion
        const easeT = t * t * (3 - 2 * t);
        const currentScale = 1.0 * (1 - easeT) + bodyCompFloat * easeT;
        scales.push(currentScale);
        dTrans += srcSliceH * currentScale;
    }
    
    const dBot = hBot * bodyCompFloat;
    
    const finalWidth = Math.floor(W * widthExpFloat);
    const finalHeight = Math.floor(dTop + dTrans + dBot);

    canvas.width = finalWidth;
    canvas.height = finalHeight;

    const ctx = canvas.getContext('2d');
    
    // Draw Top Region (Head)
    if (hTop > 0) {
        ctx.drawImage(originalImg, 0, 0, W, hTop, 0, 0, finalWidth, dTop);
    }
    
    // Draw Transition Region (Neck/Upper Body)
    let currentSrcY = hTop;
    let currentDestY = dTop;
    if (hTrans > 0) {
        for (let i = 0; i < slices; i++) {
            const destSliceH = srcSliceH * scales[i];
            ctx.drawImage(
                originalImg, 
                0, currentSrcY, W, srcSliceH, 
                // Expanding destination height by +1 to overlap and avoid sub-pixel transparent seams
                0, currentDestY, finalWidth, destSliceH + 1 
            );
            currentSrcY += srcSliceH;
            currentDestY += destSliceH;
        }
    }
    
    // Draw Bottom Region (Lower Body)
    if (hBot > 0) {
        ctx.drawImage(originalImg, 0, y2, W, hBot, 0, currentDestY, finalWidth, Math.max(0, canvas.height - currentDestY));
    }

    return canvas;
}