在这里，我有一个背景，我想为每个用户添加一些动态文本..例如..在html页面上的图像bg.jpg，以及从用户获取值的输入，比如user1，user2 ..等等我每次都需要生成一个由（指定的背景和用户名）组成的新图像，以便稍后使用它，以便用户在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属性？
您可以动态生成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>var h1 = document.getElementsByTagName("H1")[0]; // Get your element
var att = document.createAttribute("class"); // Create at attribute
att.value = "democlass"; // Set value to the attribute
h1.setAttributeNode(att);