Как склеить текст (стилизованный css) и картинку средствами JS (пример в приложении)

#javascript #svg #png #gif #jpg

                    
Задача такая, на сайте хочу добавить возможность менять картинку, точнее добавлять
текст для гравировки на кольцо, для этого необходимо чтобы создавалась картинка с превью
в виде png,svg,jpg. Текст вводит клиент, выбирает шрифт, а уже с применением css и
эффектов это c прозрачным фоном добавляется на существующее кольцо (становится одной
картинкой) и ее уже можно отправлять мне как образец для работы над продуктом... как
такое можно сделать?


    

Ответы

Ответ 1

document.addEventListener('input', function (e) {
  document.querySelector('textPath').textContent = e.target.value;
})
path { fill: none; stroke: black; stroke-width: 1px; }
text { font-size: 15px; }