MiiZZo
@MiiZZo
JavaScript, React, NodeJS, Student

Как сконвертировать html строку в картинку?

Я пытался использовать библиотеку dom-to-image с помощью такого подхода:
const div = document.createElement("div");
div.innerHTML = "<h1>layout!</h1>";

DomToImage.toPng(div)
 .then((url) => {
   setUrls([url]);
 })
 .catch((e) => console.log("converting html to image error", e));

Но это не работает, получаю в результате строку "data;"
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
https://htmlcsstoimage.com/
или
https://github.com/wkhtmltopdf/wkhtmltopdf
или
https://github.com/Vijay-Gaikwad/html-to-image
или
const body = document.getElementsByTagName('BODY')[0];
const img = document.createElement('img')
img.src = 'data:image/svg+xml,' + encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <foreignObject width="100%" height="100%">
      <div xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid red;padding:20px;">
        <style>
          em {
            color:red;
          }
          .test {
            color:blue;
          }
        </style>
        What you see here is only an image, nothing
        else.<br />
        <br />
        <em>I</em> really like <span class="test">cheese.</span><br />
        <br />
        Zoom in to check the resolution!
      </div>
    </foreignObject>
  </svg>
`);
body.appendChild(img);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы