如何将TXT内容填充至图片黑色遮罩区域并适配其形状？

问题说明 #

需要实现以下功能：加载带有黑色遮罩的图片，将本地TXT文件内容填充到图片的黑色区域，文本需适配黑色区域形状并完整显示全部内容。现有代码仅将黑色像素转为透明，文本未被限制在原黑色区域内，无法达到预期效果。

修正后的实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本填充黑色区域</title>
    <style>
        .container {
            position: relative;
            display: inline-block;
        }

        #image {
            display: block;
            max-width: 100%;
            height: auto;
        }

        #svg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        #text-content {
            fill: white;
            font-family: Arial, sans-serif;
            word-wrap: break-word;
            padding: 8px;
            line-height: 1.4;
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="image" src="https://i.sstatic.net/XXRG0.jpg" alt="带黑色遮罩的图片">
        <svg id="svg-overlay" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <defs>
                <clipPath id="black-area-clip">
                    <image id="mask-image" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
                </clipPath>
            </defs>
            <g clip-path="url(#black-area-clip)">
                <foreignObject id="text-container" width="100%" height="100%">
                    <div xmlns="http://www.w3.org/1999/xhtml" id="text-content"></div>
                </foreignObject>
            </g>
        </svg>
    </div>
    <input type="file" id="fileInput" accept=".txt">

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const image = document.getElementById("image");
            const maskImage = document.getElementById("mask-image");
            const textContent = document.getElementById("text-content");
            const textContainer = document.getElementById("text-container");
            const fileInput = document.getElementById("fileInput");

            // 处理图片生成黑色区域蒙版
            const originalImage = new Image();
            originalImage.crossOrigin = "anonymous";
            originalImage.src = image.src;
            originalImage.onload = function() {
                const canvas = document.createElement("canvas");
                canvas.width = originalImage.width;
                canvas.height = originalImage.height;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(originalImage, 0, 0);

                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const pixels = imageData.data;

                // 非黑色区域设为透明，黑色区域保留作为蒙版
                for (let i = 0; i < pixels.length; i += 4) {
                    const r = pixels[i];
                    const g = pixels[i + 1];
                    const b = pixels[i + 2];
                    // 可调整阈值处理接近黑色的区域
                    if (!(r < 15 && g < 15 && b < 15)) {
                        pixels[i + 3] = 0;
                    }
                }

                ctx.putImageData(imageData, 0, 0);
                maskImage.href = canvas.toDataURL();
                adjustTextSize();
            };

            // 加载TXT文件内容
            fileInput.addEventListener("change", function() {
                const file = this.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = function(event) {
                    textContent.textContent = event.target.result;
                    adjustTextSize();
                };
                reader.readAsText(file);
            });

            // 动态调整字体大小适配区域
            function adjustTextSize() {
                let fontSize = 22;
                textContent.style.fontSize = `${fontSize}px`;
                // 缩小字体直到文本完全容纳
                while (textContent.scrollHeight > textContainer.clientHeight && fontSize > 8) {
                    fontSize--;
                    textContent.style.fontSize = `${fontSize}px`;
                }
            }
        });
    </script>
</body>
</html>

关键改进点 #

• 蒙版裁剪：通过Canvas处理原图生成仅保留黑色区域的蒙版，利用SVG的<clipPath>实现文本仅在黑色区域内显示
• 自适应文本：使用<foreignObject>嵌入HTML文本支持自动换行，通过动态调整字体大小确保内容完整填充目标区域
• 鲁棒性优化：添加跨域图片支持，调整颜色阈值兼容接近黑色的区域，提升场景适配性

内容的提问来源于stack exchange，提问作者Larsen Esteban