javaScript清除图像源不起作用

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

我正在尝试将包含文本和图像的div转换为单个图像，然后将该图像设置为我的图像源，但是该图像被复制了多次，或者出现了错误并且代码无法正常工作。

我正在从textarea获取文本，然后在图像上方设置该文本，然后使用html5canavs将文本和图像转换为单个图像。代码工作正常，但问题是图像被复制了多次，如果我要清除图像，它将无法正常工作。

这是重叠多次后的外观图像。Image Priview

这是我的代码

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>
javascript html5-canvas
2个回答
1
投票

您正在将图像渲染在其自身的顶部，从而引起反馈效果。

只需使用两个图像。单击渲染以及结果渲染后显示背景和文本，将隐藏原始背景和文本，仅显示结果图像。

将边框移出渲染图像以停止缩小的背景。

示例

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>
0
投票

问题-多张图像-为什么？

第一次单击后，它会将div捕获到canvas中。您可以清楚地看到外面有border图像。因此，将div中的图像设置为“ 画布创建的图像”边框后，捕获到图像中的div的边框将像其屏幕截图一样反过来。

解决方案：

删除边框并避免间距

问题-文本上方的文本-为什么？

只要单击“单击我”按钮，然后将id为“ wow”的span值设置为文本区域的值，然后执行html2canvas就会生成div的图像，因为您在div内有span生成文本后，将图像的src设置为canvas.toDataURL()。当您再次单击带有不同文本的“单击我”时，它将把文本放置在当前图像上（已经有一些先前的文本）

解决方案：

在img.src=canvas.toDateURL()之后设置id为=“ wow”的跨度文本>

function myFunction() {
   document.getElementById("wow").innerHTML =""
    html2canvas(document.getElementById("imagewrap"), {
      onrendered: function(canvas) {
        var image = canvas.toDataURL();      
      document.getElementById("img_prev").src = image
      document.getElementById("wow").innerHTML =
      document.getElementById("mTextArea").value;
      },
      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" >
                  <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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.