javaScript очистить источник изображения не работает - PullRequest
Новая
       13

javaScript очистить источник изображения не работает

0 голосов
/ 18 апреля 2020

Я пытаюсь преобразовать 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>

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Вы визуализируете изображение поверх самого себя, вызывая эффект обратной связи.

Просто используйте два изображения. Отображение фона и текста при нажатии кнопки «Отрисовка» и при визуализации результата скрывает исходный фон и текст, просто показывая изображение результата.

Переместите границу за визуализированное изображение, чтобы остановить сужающийся фон.

Пример 

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 голосов
/ 18 апреля 2020

Проблема - Несколько изображений - почему?

После первого щелчка он захватывает div в canvas. Вы можете ясно видеть, что есть некоторая граница внешнее изображение. Таким образом, после того, как вы установите изображение в элементе div на границу « холст созданное изображение » останется, и элемент div, захваченный в изображение, будет иметь внутреннюю границу как ее скриншот.

Решение:

Удалить границу и избежать пробелов

Проблема - Текст поверх текста - почему?

Вы настраиваете значение span с идентификатором "wow" равно значению текстовой области всякий раз, когда вы нажимаете кнопку "click me", а затем вы делаете html2canvas, который создаст изображение div, поскольку у вас есть span внутри div с текстом, он также будет быть там на холсте. После того, как холст сгенерирован, вы устанавливаете sr c изображения в canvas.toDataURL(). Когда вы снова нажмете «щелкнуть меня» с другим текстом, текст будет помещен на текущее изображение (в котором уже есть какой-то предыдущий текст)

Решение:

Установить текст диапазона с id = "wow" после img.src=canvas.toDateURL()

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...