javascript - 如何使用 html、css 和 javascript 创建新的临时图像？

Question

在这里，我有一个背景，我想为每个用户添加一些动态文本。例如.. 图像 bg.jpg在 html 页面上，以及从用户那里获取值的输入，比如 user1 , user2 ..ETC。我每次都需要生成一个新图像，其中包含(指定的背景和上面的用户名)稍后使用它使用户能够在 Facebook 上与 data-image 中的 og:image 共享结果属性:<a href="someurl.com/some-article" data-image="article-1.jpg" data-title="Article Title" data-desc="Some description for this article" class="btnShare">Share</a>


我已经在一个 js 变量中设置了用户输入，然后将它传递给一个以图像背景为中心的 id 的 div，如下所示:

HTML:

<div class="container">
<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div id="centered-user"></div>
</div>

CSS:

/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
#centered-user {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

JS:

var user = document.form.username.value.toUpperCase();
var x = document.getElementById("myDIV");
x.innerHTML = user;

现在图像的中心有文字，我如何将生成的新图像传递给 html data-image属性？

Answer 1

您可以即时生成 SVG 并将其嵌入 <img> 中标签。

const generateImage = text =>
  document.querySelector('#bg').innerHTML =
    `<img src="data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg(text))}">`;

const svg = text => `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="960px" height="590px"
  viewBox="0 0  960 590" preserveAspectRatio="xMidYMid meet">
  <defs id="svgEditorDefs">
    <symbol id="1f60e" viewBox="0 0 64 64" preserveAspectRatio="xMidYMid meet">
      <rect x="0" y="0" width="64" height="64" style="stroke:none;fill:none;" />
      <g xmlns="http://www.w3.org/2000/svg">
        <g fill-rule="evenodd">
          <path d="M32,2c16.568,0,30,13.432,30,30S48.567,62,32,62   C15.431,62,2,48.568,2,32S15.431,2,32,2"
            fill="#ffdd67" />
          <path
            d="m36.12 21.983c-2.355 1.177-5.89 1.177-8.247 0-2.517-1.292-5.593-2.119-9.274-2.442-3.595-.314-11.215-.304-15.03 1.039-.437.153-.869.352-1.283.564-.234.119-.281.207-.281.646v.565c0 1.063-.133.649.626 1.094 1.479.865 2.32 3.116 2.771 6.214.641 4.515 2.857 7.343 6.453 8.694 3.338 1.254 7.07 1.21 10.383-.112 1.811-.724 3.402-1.867 4.666-3.724 2.215-3.257 1.551-5.289 2.695-8.09.996-2.441 3.794-2.441 4.792 0 1.143 2.798.479 4.83 2.695 8.09 1.262 1.856 2.854 3 4.665 3.724 3.311 1.322 7.05 1.366 10.384.112 3.596-1.352 5.812-4.18 6.453-8.694.449-3.098 1.291-5.349 2.77-6.214.76-.444.627-.03.627-1.094v-.565c0-.438-.047-.526-.281-.646-.414-.213-.846-.411-1.283-.564-3.813-1.343-11.434-1.354-15.03-1.039-3.683.323-6.759 1.15-9.276 2.442"
            fill="#262626" />
        </g>
        <path
          d="m21.462 43.09c1.133 1.779 2.712 3.071 4.548 3.956 1.831.886 3.908 1.326 5.991 1.328 2.081-.007 4.156-.445 5.986-1.331 1.834-.886 3.414-2.176 4.549-3.953.246 2.078-.826 4.341-2.82 5.944-1.974 1.626-4.844 2.58-7.716 2.567-2.871.008-5.738-.944-7.713-2.57-1.991-1.602-3.066-3.863-2.825-5.941"
          fill="#664e27" />
      </g>
    </symbol>
    <polygon id="svgEditorShapeDefs"
      style="fill:khaki;stroke:black;vector-effect:non-scaling-stroke;stroke-width:1px;" />
  </defs>
  <rect id="svgEditorBackground" x="0" y="0" width="960" height="590" style="fill: none; stroke: none;" />
  <use xlink:href="#1f60e" x="292" y="249" width="179" height="179" id="e5_emoji" />
  <path
    d="M9.778,96h22.222v43.962710649591656l32,-43.962710649591656h54.22200000000001c5.400000000000006,0,9.777999999999992,-4.378,9.777999999999992,-9.778000000000006v-76.445c0,-5.4,-4.378,-9.778,-9.778000000000006,-9.778h-108.445c-5.4,0,-9.778,4.378,-9.778,9.778v76.445c0,5.400000000000006,4.378,9.778000000000006,9.778,9.778000000000006Z"
    style="fill:none; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;" id="e6_shape"
    transform="matrix(1.56655 0 0 0.835931 423.742 142.001)" /><text
    style="fill:black;font-family:Arial;font-size:20px;" x="446" y="167" id="e11_texte"
    transform="matrix(1 0 0 1 32 21)">${text}</text>
</svg>
`;

#bg img {position: absolute; top: -100px; left: -200px;}

<input type="text" placeholder="Some text..." oninput="generateImage(this.value)">

<div id="bg"></div>