我试图将带有文本和图像的 div 转换为单个图像，然后将该图像设置为我的图像源，但该图像被复制多次或出现错误且代码无法正常工作。
我从 textarea 获取文本，然后将该文本设置在图像上方，然后使用 html5canavs 将该文本和图像转换为单个图像。代码工作正常，但问题是图像被复制多次，如果我试图清除图像，它就不起作用。
这是多次重叠后的外观图像。 
这是我的代码
window.onload = function() {
}
function myFunction() {
var v = document.getElementById("mTextArea").value;
document.getElementById("wow").innerHTML = v;
html2canvas(document.getElementById("imagewrap"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.className = "html2canvas";
var image = canvas.toDataURL("image/png");
// document.body.removeChild("container2"); <<---Throwing Error
document.getElementById("img_prev").src = image;
},
useCORS: true
});
}*{
font-family: 'Roboto', sans-serif;
}
#container1{
float: left;
}
#container2{
float: right;
}
#mImage{
height: 300px;
width: 300px;
}
.desc {
position: absolute;
text-align: center;
top: 1px;
left: 30px;
}
.outer, .wrap, .html2canvas, .image_text {
display: inline-block;
vertical-align: top;
}
.wrap {
text-align: center;
}
#imagewrap {
position: relative;
background-color: white;
}
#wow {
text-align: center;
font-size: 25pt;
position: absolute;
color: red;
display: block;
top: 50px;
left: 50px;
right: 50px;
align-items: center;
word-wrap: break-word;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<title>Social Poster</title>
</head>
<body>
<h1>Social Poster</h1>
<div id="container1">
<textarea name="inputT" id="mTextArea" cols="30" rows="10"></textarea>
<button id="mButton" onclick="myFunction()">Click ME!</button>
</div>
<div id="container2">
<div class="outer">
<div id="imagewrap" class="wrap" style="border: solid;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ2w0Uf5u-qRiqYZVXmHukxNQxPENtwoEqh2qBpj871sojoaePh&usqp=CAU" id="img_prev" width="500" />
<span id="wow">WOW!</span>
</div>
</div>
</div>
</body>
</html>最佳答案
您正在将图像渲染到其自身之上，从而导致反馈效果。
只需使用两个图像。单击“渲染”时显示背景和文本，并且当结果渲染后，将隐藏原始背景和文本，仅显示结果图像。
将边框移出渲染图像以停止收缩背景。
示例
mButton.addEventListener("click",createImage);
function createImage() {
// show text and background image
wow.textContent = mTextArea.value;
wow.classList.remove("hide");
backgroundImage.classList.remove("hide");
// hide prev rendered image
resultImage.classList.add("hide");
// render to canvas
html2canvas(imagewrap, {
onrendered(canvas) {
// hide background and text image
backgroundImage.classList.add("hide");
backgroundImage.classList.add("hide");
// show rendered image
resultImage.classList.remove("hide");
resultImage.src = canvas.toDataURL("image/png");
},
useCORS: true
});
}*{
font-family: 'Roboto', sans-serif;
}
#container1{
float: left;
}
#container2{
float: right;
}
#mImage{
height: 300px;
width: 300px;
}
.desc {
position: absolute;
text-align: center;
top: 1px;
left: 30px;
}
.outer, .wrap, .html2canvas, .image_text {
display: inline-block;
vertical-align: top;
}
.wrap {
text-align: center;
}
#imagewrap {
position: relative;
background-color: white;
}
#wow {
text-align: center;
font-size: 25pt;
position: absolute;
color: red;
display: block;
top: 50px;
left: 50px;
right: 50px;
align-items: center;
word-wrap: break-word;
}
.hide {
display: none;
}
.resultBorder {
border: solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<h1>Social Poster</h1>
<div id="container1">
<textarea name="inputT" id="mTextArea" cols="30" rows="10"></textarea>
<button id="mButton" >Create Image!</button>
</div>
<div id="container2">
<div class="outer resultBorder">
<div id="imagewrap" class="wrap" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ2w0Uf5u-qRiqYZVXmHukxNQxPENtwoEqh2qBpj871sojoaePh&usqp=CAU" id="backgroundImage" width="500" />
<img class="hide" id="resultImage"></img>
<span id="wow">WOW!</span>
</div>
</div>
</div>关于javaScript 清晰图像源不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61287356/