尝试在蒙版图像中加载文本

问题描述 投票：0回答：1

我正在尝试加载黑色蒙版照片并用文本填充空间。我希望文本能够响应图像的形状，并确保 txt 文件的全部内容显示在照片上。 这是代码

我只使用 chatgpt 来编写这段代码，因为我还在学习。 我希望它能把我的 txt 文件的内容显示在图像的黑色空间内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text in Black Spaces</title>
    <style>
        .container {
            position: relative;
            display: inline-block;
        }

        #image {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        #svg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        #text {
            font-size: 20px;
            font-family: Arial, sans-serif;
            fill: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="image" src="https://i.stack.imgur.com/XXRG0.jpg" alt="Your Image">
        <div id="svg-container">
            <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                <text id="text"></text>
            </svg>
        </div>
    </div>
    <input type="file" id="fileInput" accept=".txt">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const image = document.getElementById("image");
            const svgText = document.getElementById("text");

            const fileInput = document.getElementById("fileInput");
            fileInput.addEventListener("change", function() {
                const file = this.files[0];
                const reader = new FileReader();
                reader.onload = function(event) {
                    const text = event.target.result;
                    svgText.textContent = text;
                }
                reader.readAsText(file);
            });

            const originalImage = new Image();
            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 === 0 && g === 0 && b === 0) {
                        pixels[i] = 255;
                        pixels[i + 1] = 255;
                        pixels[i + 2] = 255;
                        pixels[i + 3] = 0;
                    }
                }

                ctx.putImageData(imageData, 0, 0);

                const newDataUrl = canvas.toDataURL();
                image.src = newDataUrl;
            }
        });
    </script>
</body>
</html>

javascript html css html-helper chatgpt-api
1个回答
0
投票

我使用clippy并在你的图像上制作了一个多边形，然后我将其应用到我的示例中的

#text

这是片段，这是您想要的吗？

.container {
  position: relative;
  width: 1040px;
  height: 585px;
  background-image: url("https://i.stack.imgur.com/XXRG0.jpg");
}

#text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#text {
  color: white;
  height: 100%;
  width: 100%;
  display: block;
  shape-outside: polygon(
    0% 22%,
    12% 30%,
    17% 11%,
    14% 6%,
    15% 0%,
    63% 0%,
    61% 15%,
    65% 16%,
    70% 22%,
    73% 25%,
    76% 26%,
    77% 28%,
    79% 29%,
    79% 32%,
    79% 36%,
    81% 39%,
    80% 43%,
    81% 46%,
    89% 65%,
    90% 69%,
    87% 69%,
    87% 71%,
    90% 74%,
    94% 76%,
    96% 83%,
    97% 85%,
    99% 86%,
    100% 84%,
    100% 100%,
    0% 100%
  );
  float: right;
  clip-path: polygon(
    0% 22%,
    12% 30%,
    17% 11%,
    14% 6%,
    15% 0%,
    63% 0%,
    61% 15%,
    65% 16%,
    70% 22%,
    73% 25%,
    76% 26%,
    77% 28%,
    79% 29%,
    79% 32%,
    79% 36%,
    81% 39%,
    80% 43%,
    81% 46%,
    89% 65%,
    90% 69%,
    87% 69%,
    87% 71%,
    90% 74%,
    94% 76%,
    96% 83%,
    97% 85%,
    99% 86%,
    100% 84%,
    100% 100%,
    0% 100%
  );
}
<body>

  <style>
    .container {
      position: relative;
      width: 1040px;
      height: 585px;
      background-image: url('https://i.stack.imgur.com/XXRG0.jpg');
    }

    #text-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    #text {
      font-size: 20px;
      font-family: Arial, sans-serif;
      color: white;
      white-space: pre-wrap;
    }
  </style>

  <div class="container">
    <div id="text-container">
      <div id="text" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod quis viverra nibh cras pulvinar. Ac tortor vitae purus faucibus. Netus et malesuada fames ac turpis egestas maecenas. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt. Nunc scelerisque viverra mauris in aliquam. Et malesuada fames ac turpis. Morbi leo urna molestie at elementum eu. Elit pellentesque habitant morbi tristique senectus. Sed ullamcorper morbi tincidunt ornare massa. Massa tincidunt dui ut ornare lectus sit amet est placerat. Leo urna molestie at elementum. Aenean et tortor at risus viverra adipiscing at. Mauris ultrices eros in cursus turpis massa. Imperdiet massa tincidunt nunc pulvinar sapien et.

        Suspendisse faucibus interdum posuere lorem ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Elementum pulvinar etiam non quam. Fringilla ut morbi tincidunt augue interdum velit. Bibendum at varius vel pharetra vel turpis nunc eget. Orci phasellus egestas tellus rutrum tellus. Ipsum a arcu cursus vitae congue mauris. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Tempus egestas sed sed risus pretium. Vitae congue mauris rhoncus aenean vel. Urna nunc id cursus metus aliquam eleifend mi in. Consequat id porta nibh venenatis cras sed felis eget. Risus quis varius quam quisque id diam vel quam elementum. Lectus magna fringilla urna porttitor rhoncus dolor. Orci a scelerisque purus semper eget duis at.

        Elit ut aliquam purus sit. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Et odio pellentesque diam volutpat commodo sed egestas egestas. Non arcu risus quis varius quam quisque id diam. Sem fringilla ut morbi tincidunt augue interdum. Quis vel eros donec ac. Amet mauris commodo quis imperdiet. Senectus et netus et malesuada fames. Sed felis eget velit aliquet sagittis id consectetur. Tempus urna et pharetra pharetra massa. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada. Neque viverra justo nec ultrices dui sapien eget. Etiam non quam lacus suspendisse faucibus. Ridiculus mus mauris vitae ultricies. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Viverra suspendisse potenti nullam ac tortor vitae. Risus in hendrerit gravida rutrum quisque non. Ut faucibus pulvinar elementum integer enim. Vitae nunc sed velit dignissim.

        Venenatis urna cursus eget nunc scelerisque viverra. Rhoncus aenean vel elit scelerisque mauris pellentesque. Urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim diam vulputate ut. Et leo duis ut diam quam. Condimentum lacinia quis vel eros donec ac odio tempor. Pharetra magna ac placerat vestibulum lectus mauris ultrices. Consequat semper viverra nam libero justo laoreet sit. Lectus quam id leo in vitae. Mauris pharetra et ultrices neque. Vitae et leo duis ut diam quam nulla porttitor. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada.

        Amet nulla facilisi morbi tempus iaculis. Scelerisque purus semper eget duis at tellus at urna. Semper risus in hendrerit gravida rutrum. Turpis massa tincidunt dui ut. Aenean sed adipiscing diam donec adipiscing. Adipiscing commodo elit at imperdiet dui. In tellus integer feugiat scelerisque varius. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Quam nulla porttitor massa id neque aliquam vestibulum morbi. Adipiscing vitae proin sagittis nisl rhoncus. Vivamus arcu felis bibendum ut tristique et egestas. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Rutrum tellus pellentesque eu tincidunt. Diam quam nulla porttitor massa id neque aliquam vestibulum.

        Id neque aliquam vestibulum morbi blandit cursus risus. Odio ut sem nulla pharetra diam sit amet nisl. Amet est placerat in egestas erat imperdiet. Enim lobortis scelerisque fermentum dui. Egestas dui id ornare arcu odio ut sem. Feugiat scelerisque varius morbi enim nunc faucibus a. Risus at ultrices mi tempus imperdiet nulla malesuada. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Massa id neque aliquam vestibulum morbi blandit cursus. Tortor posuere ac ut consequat semper viverra nam. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Nulla aliquet porttitor lacus luctus accumsan.

        Pellentesque diam volutpat commodo sed. Elit eget gravida cum sociis. Est sit amet facilisis magna etiam tempor orci eu. Felis eget nunc lobortis mattis aliquam faucibus purus. In hendrerit gravida rutrum quisque non tellus. Massa sapien faucibus et molestie ac. Tempus urna et pharetra pharetra. Sed libero enim sed faucibus. Dolor purus non enim praesent elementum facilisis. Semper viverra nam libero justo laoreet sit amet cursus sit. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Non blandit massa enim nec dui nunc mattis enim.

        Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu. In metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Laoreet id donec ultrices tincidunt arcu non. In hac habitasse platea dictumst quisque sagittis. Neque aliquam vestibulum morbi blandit cursus. Ultricies integer quis auctor elit. Justo donec enim diam vulputate ut pharetra. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla urna porttitor rhoncus dolor purus non.

        Sed tempus urna et pharetra pharetra massa. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Lacus sed turpis tincidunt id. Amet nulla facilisi morbi tempus iaculis urna. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Tristique senectus et netus et malesuada fames. Est velit egestas dui id ornare. Pretium quam vulputate dignissim suspendisse in est. Eget velit aliquet sagittis id consectetur purus ut. Magna eget est lorem ipsum dolor sit amet. Eget est lorem ipsum dolor. Amet tellus cras adipiscing enim eu. Penatibus et magnis dis parturient montes. Eros in cursus turpis massa tincidunt dui ut ornare lectus. Volutpat commodo sed egestas egestas fringilla phasellus. Sit amet risus nullam eget felis eget. Ultricies mi quis hendrerit dolor. Eget arcu dictum varius duis at consectetur.

        Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Malesuada fames ac turpis egestas sed tempus. Cras adipiscing enim eu turpis egestas pretium aenean pharetra. Enim sit amet venenatis urna cursus eget. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Sed cras ornare arcu dui vivamus. Quam vulputate dignissim suspendisse in. Parturient montes nascetur ridiculus mus. Accumsan sit amet nulla facilisi morbi tempus iaculis. Enim praesent elementum facilisis leo. Quis risus sed vulputate odio. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Eu augue ut lectus arcu bibendum at varius vel pharetra. Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat.</div>
    </div>
  </div>

</body>

我希望这有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.