Как добавить редактируемые текстовые поля на изображение?

Question

Я пытаюсь найти способ дублировать то, что у них здесь: https://realsteelcenter.com/collections/monograms/products/family-name-circle-monogram

Я знаю, что они используют Canvas, но я все еще очень плохо знаком с JS поэтому мне трудно понять это. Есть много сайтов, использующих что-то подобное, и я удивлен, что ничего не нашел по этому поводу. Я действительно надеялся найти видео на YouTube, которое объясняет, как это сделать, но не повезло.

Любой совет, который подтолкнул бы меня в правильном направлении, приветствуется.

Answer 1

Начните с поля input type="text", в котором вы можете ввести имя и canvas, чтобы отобразить все в. В JavaScript прослушайте событие input на input, чтобы вы могли обновить текущее text каждый раз, когда значение ввода изменяется.

Теперь на холсте вы захотите вывести текстовое значение, которое было установлено вашим вводом. Вы можете сделать это в обработчике вашего input события. Поэтому каждый раз, когда пользователь изменяет ввод, очищайте холст (иначе он будет рисовать поверх предыдущего слова) с помощью метода контекста clearRect, а затем рисует слово на холсте с помощью fillText метод. Вам потребуется дополнительная математика для вычисления правильного положения текста, и вы можете сделать это с помощью метода measureText.

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

const text = document.getElementById('name');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const fontSize = 32;

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.font = `${fontSize}px sans-serif`;

text.addEventListener('input', function(event) {
  const textValue = event.target.value;
  const { width } = ctx.measureText(textValue);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(textValue, (canvas.width / 2) - (width / 2), (canvas.height / 2) + (fontSize / 2));
});

#canvas {
  display: block;
  width: 400px;
  height: 250px;
  border: 1px solid black;
  margin-bottom: 30px;
}

<canvas id="canvas"></canvas>
<label for="name">Enter a name</label>
<input type="text" id="name">

Answer 2

Хорошо, используя jQuery, это легко сделать! Вы можете начать со следующего:

<input id='myText' type='text'/>
<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>

CSS:

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

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

jQuery:

$('#myText').on('input', function() {
$('.centered').empty().html($(this).val);
}