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

在这里，我有一个背景，我想为每个用户添加一些动态文本。。 例如html页面上的图像

bg.jpg

，以及从用户处获取值的输入，例如

user1

，

user2

，等等。我每次都需要生成一个新的图像，包括（指定的背景和上面的用户名） 以后使用它，用户可以在Facebook上与

数据图像

属性中的og:image共享结果：

我在js变量中设置了用户输入，然后将其传递给一个div，其id位于图像背景的中心，如下所示：

HTML:

JS:

---

现在图像的中心有了文本，我如何将生成的新图像传递给html

数据图像

属性？

您可以动态生成SVG并将其嵌入

`；
const svg=text=>`
${text}
`;
#bg img{位置：绝对；顶部：-100px；左侧：-200px；}
除了svg，难道没有其他方法可以实现它吗？svg使其成为丑陋的矢量图像。
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div id="centered-user"></div>
</div>

/* 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%);
}

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

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);