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

Question

[Никита]

Я пытался использовать библиотеку 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;"

Answer 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);

Comments

[Никита]

Возможно, мне не нужна картинка или canvas для решения задачи: нужно отображать превью верстки, которая приходит с бека, в карточках, у вас есть идеи, как это сделать?

[Ку куруза]

Никита, превью - уменьшенное изображение исходной картинки, так? тогда нужно сделать картинку, уменьшить и сохранить две - img_code.jpg(большую) и prev_img_code.jpg(маленькую)
А далее:

<a href="/img/img_code.jpg" targer="_blank"><img class="img-prev" src="/img/prev_img_code.jpg" /></a>

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

[Никита]

Ку куруза, но картинку-то мне где взять? У меня верстка с бека приходит, а не картинка.

[Ку куруза]

Никита, как приходит? через ajax-запрос?

[Никита]

Ку куруза, какая разница, как она приходит. У меня есть массив проектов, у них есть верстка, мне нужна превью этой верстки в карточках.
Пример: ["some layout 1", "some layout 2"]

[Ку куруза]

Делаешь цикл, в процессе которого считываешь данные с файлов в переменную, после переменную преобразуешь в картинку и сохраняешь в каталогах в формате ["some layout 1", "some layout 2"]

[Никита]

Ку куруза, у меня нет файлов, у меня html строки. Каким образом вы бы мне посоветовали преобразовать строки в картинку, чтобы отобразить?

[Ку куруза]

массив строк перебираешь по одной и вставляешь в код выше (encodeURIComponent(html-строка))

[Никита]

Ку куруза, data:image/ + encodeURIComponent?

[Никита]

Ку куруза, я каким-то образом не пытался, оно не работает.
const layout = "2345234234";
const src = encodeURIComponent(layout) - не сработает
const src = 'data:image/png;base64,' + encodeURIComponent не сработает

img.src = src;
document.appendChild(img);

[Никита]

Ку куруза, извиняюсь! Я только сейчас обратил внимание, что там не просто svg иконка какая-нибудь. Сейчас попробую