向图像添加文本，无 canvas，普通 javascript

Question

我正在做一个模因生成器项目，这是为了练习 DOM 操作。所以，我应该使用 vanilla JavaScript 而不是 canvas。我无法使用这些参数找到答案。我的项目快完成了，我只需要在他们提交的图片上添加文字。

我试过使用 innerText 和 innerHTML 它们似乎只是替换它。我试过追加 child，类似于我用图像获得追加 child 的方式，但我要么得到错误，要么替换图像。

我很确定我需要添加它，添加带有 JavaScript 的图片，然后使用 CSS 设置样式。也许只需添加一个 class 和 classList.

console.log('Currentfile: memegenerator');
let img = document.getElementsByTagName('img');

addEventListener('submit', function(e) {
      e.preventDefault();

      let UIurl = document.getElementById('picurl');
      let memeToBe = UIurl.value;

      let img = document.createElement('img');
      img.setAttribute('src', memeToBe);
      img.setAttribute('class', 'meme');

      // append to the document with set attribute using said variable
      let memeLocation = document.getElementById('location');
      memeLocation.appendChild(img);

      //url for pic test
      //https://www.fillmurray.com/640/360

      //add text to image
      //get text values
      let inputText = document.getElementById('text_top');
      let textValue = inputText.value;

      addEventListener('click', function(e) {
        let clickedElement = e.target;
        console.log(clickedElement);

        let targetCheck = clickedElement.classList.contains("meme");

        if (targetCheck) {
          clickedElement.remove();
        }
      })

h1 {
  color: navy;
}

.center {
  text-align: center;
}

.main {
  width: 50%;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.meme {
  width: 99%;
  /* margin: 2 auto; */
  justify-content: center;
  background-color: lightblue;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

main:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

meme:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

body {
  background-color: #f0feff;
}

.button {
  float: right;
}


/* divider styles */

hr.rounded {
  border-top: 2px solid #bbb;
  border-radius: 5px;
  width: 90%;
}

.border_lower {
  border-bottom: 1px solid #bbb;
  border-radius: 5px;
  width: 90%;
}


/* form styles */

form {
  width: 60%;
  margin: 0 auto;
}

form input {
  margin: 2px;
}

form label {
  margin: 2px;
}


/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text */

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


/* Top left text */

.location {
  position: absolute;
  top: 8px;
  left: 16px;
}

<main class="main">
  <h1 class="center">MEME GENERATOR!</h1>
  <hr class="rounded" />
  <form action="#" class="form">
    <label for="text_top">Text Upper:</label>
    <input type="text" name="text_top" id="text_top" /><br />
    <label for="text_lower">Text Lower:</label>
    <input type="text" name="text_lower" id="text_lower" /><br />
    <label for="picturl">Picture:</label>
    <input type="url" name="picurl" id="picurl" /><br /><br /><br />
    <input class="button " type="submit" value="Add Meme:" /><br />
    <hr />
  </form>
  <div id="location"></div>
  <hr class="border_lower" />
  <p class="center"><small>Thanks for visiting!</small></p>
</main>

Answer 1

因为这不是关于保存图像而只是为了显示目的，所以我让它工作了。

您遇到的主要问题是您的方法似乎更多地关注事物的 javascript 方面，但错过了其中的 CSS 部分。

有多种方法可以将图片放在文本后面，最常见的两种是：

将图像设置为父元素上的背景图像（即 div），然后仅在该元素中设置文本
使用 CSS 绝对定位图像上的文本并使用 z-index 对它们进行分层

我的答案选择了#2。

除了杂项代码清理，我做的主要功能是：

我创建了一个 div，并给它一个 class 的 meme
我将图像添加到 div
我将顶部和底部文本添加到它们自己的 div 中，并将它们附加到模因中 div
使用 CSS，我将顶部和底部文本置于图像上方

其他一些事情，在添加 eventListeners 时，除非绝对需要，否则我建议将它们绑定到特定元素，而不仅仅是文档（或者我认为无论如何都不是文档的任何内容）。通过将其应用于文档，将处理任何点击，但通过将其绑定到元素，将仅处理对该元素的点击。

console.log('Currentfile: memegenerator');
let img = document.getElementsByTagName('img');
let form = document.querySelector('form');

form.addEventListener('submit', function(e) {
      e.preventDefault();
      let meme = document.createElement("div");
      let top_text = document.createElement("div");
      let bottom_text = document.createElement("div");
      let img = document.createElement("img");
      
      let btn = document.createElement("button");
      btn.setAttribute("type","button");
      
      img.src = document.getElementById('picurl').value;
      top_text.classList.add("top_text");
      top_text.innerHTML = document.getElementById('text_top').value;
      
      bottom_text.classList.add("bottom_text");
      bottom_text.innerHTML = document.getElementById('text_lower').value;
      
      btn.innerHTML = "REMOVE";
      
      meme.classList.add("meme");
      meme.appendChild(top_text);
      meme.appendChild(bottom_text);
      meme.appendChild(img);
      meme.appendChild(btn);
      
      let memeLocation = document.getElementById('location');
      memeLocation.appendChild(meme);

      document.getElementById('picurl').value = "";
      document.getElementById('text_top').value = "";
      document.getElementById('text_lower').value = "";

      btn.addEventListener('click', function(e) {
          meme.remove();
      })
});

h1 {
  color: navy;
}

.center {
  text-align: center;
}

.main {
  width: 50%;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.meme {
  width: 99%;
  /* margin: 2 auto; */
  justify-content: center;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position:relative;
}

.top_text{
position:absolute;
top:10px;
left:30px;
color:#ffffff;
z-index:3
}

.bottom_text{
position:absolute;
bottom:20px;
left:30px;
color:#ffffff;
z-index:3
}

.meme img{
max-width:100%;
z-index:2
}

main:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

meme:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

body {
  background-color: #f0feff;
}

.button {
  float: right;
}


/* divider styles */

hr.rounded {
  border-top: 2px solid #bbb;
  border-radius: 5px;
  width: 90%;
}

.border_lower {
  border-bottom: 1px solid #bbb;
  border-radius: 5px;
  width: 90%;
}


/* form styles */

form {
  width: 60%;
  margin: 0 auto;
}

form input {
  margin: 2px;
}

form label {
  margin: 2px;
}


/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text */

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


/* Top left text */

.location {
  position: absolute;
  top: 8px;
  left: 16px;
}

<main class="main">
  <h1 class="center">MEME GENERATOR!</h1>
  <hr class="rounded" />
  <form action="#" class="form">
    <label for="text_top">Text Upper:</label>
    <input type="text" name="text_top" id="text_top" /><br />
    <label for="text_lower">Text Lower:</label>
    <input type="text" name="text_lower" id="text_lower" /><br />
    <label for="picturl">Picture:</label>
    <input type="url" name="picurl" value="https://www.fillmurray.com/640/360" id="picurl" /><br /><br /><br />
    <input type="submit" value="Add Meme:" /><br />
    <hr />
  </form>
  <div id="location"></div>
  <hr class="border_lower" />
  <p class="center"><small>Thanks for visiting!</small></p>
</main>

向图像添加文本，无 canvas，普通 javascript

adding text to an image, no canvas, vanilla javascript

javascript

css

dom

appendchild