добавление текста к изображению, без холста, ваниль javascript - PullRequest
Новая
       29

добавление текста к изображению, без холста, ваниль javascript

0 голосов
/ 09 июля 2020

Я работаю над проектом генератора мемов, чтобы попрактиковаться в манипуляциях с DOM. Итак, я должен использовать vanilla JavaScript и без холста. Мне не удается найти ответ с этими параметрами. Я почти закончил с проектом, мне просто нужно добавить текст к изображению, которое они прислали.

Я пробовал использовать innerText и inner HTML, похоже, они просто заменяют его. Я пробовал добавить дочерний элемент, аналогично тому, как я получил добавление с изображением, но я либо получаю сообщение об ошибке, либо заменяю изображение.

Я был почти уверен, что мне нужно добавить его, добавить изображение с помощью JavaScript, затем стилизуйте его с помощью CSS. Может быть, просто добавить класс с 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>

1 Ответ

1 голос
/ 10 июля 2020

Поскольку речь идет не о сохранении изображений, а просто для отображения, у меня все заработало.

Основная проблема, с которой вы столкнулись, заключалась в том, что ваш подход, похоже, больше сосредоточен на стороне javascript вещи, но упущены в части CSS.

Есть несколько способов разместить изображения за текстом, наиболее распространенными двумя являются:

  1. Установка изображений в качестве фона изображение в родительском элементе (ie div), а затем просто установите текст в этом элементе
  2. Используя CSS, чтобы разместить текст на изображении в абсолютном положении, и используйте z-index для их слоев

В качестве ответа я выбрал # 2.

Помимо неправильной c очистки кода, основная функция, которую я выполнил, была:

  1. Я создал div и присвоил ему класс meme
  2. Я добавил изображение в этот div
  3. Я добавил верхний и нижний текст в их собственные div и добавил их в мем div
  4. Используя CSS, я расположил верхний и нижний текст над изображением

Несколько других вещей, при добавлении eventListeners, если это не абсолютно необходимо, я рекомендую привязать их к определенному элементу c, а не только к документу (или вообще ни к чему, что я считаю документом в любом случае). Если применить его к документу, будет обработан любой щелчок, но при привязке его к элементу будут обрабатываться только щелчки по этому элементу. 

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>
...