#новость дня

Если нужно превратить HTML в картинку, приходится пользоваться утилитами разной степени кривизны — ведь нужно имитировать DOM. Cтабильного решения не было вообще (наверное, только Playwright и скриншот).

Теперь начинает появляться что-то вменяемое.

WICG выкатили идею под названием HTML-in-Canvas: холст учат рисовать обычные HTML-элементы: https://github.com/WICG/html-in-canvas

Прямо так, как браузер их и так рисует в DOM — со стилями, размерами, текстом, вложенностями. Только вместо того, чтобы показывать их на странице, он превращает элемент в картинку внутри <canvas>.

На самом деле, выглядит весьма проклято, вот пример с иллюстрации:

<canvas id="canvas" width="638" height="318" layoutsubtree="true">
  <div id="drawElement" style="width: 550px;">
    Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
    <br>I'm multi-line, <b>formatted</b>,
    rotated text with emoji (&#128512;), RTL text
    <span dir=rtl>من فارسی صحبت میکنم</span>,
    vertical text,
    <p style="writing-mode: vertical-rl;">
      这是垂直文本
    </p>
    an inline image (<img width="150" src="wolf.jpg">), and
    <svg width="50" height="50">
      <circle cx="25" cy="25" r="20" fill="green" />
      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
        SVG
      </text>
    </svg>!
  </div>
</canvas>

Почему нельзя просто API для DOM? Потому что там целая плеяда сесурити-специалистов выступает против.

Работает это пока только в Chrome Canary от 138 и выше, и включать надо отдельный флаг. Плюс есть ограничения: рендерятся только те элементы, которые лежат внутри самого канваса, и некоторые штуки браузер сознательно блокирует — типа чужих iframe или странных SVG. Но в целом — оно работает.

Флаг, кстати, такой: --enable-blink-features=CanvasDrawElement.

И выглядит это как первый нормальный шаг к тому, чтобы больше не страдать с ручной отрисовкой текста и HTML внутри канваса. Если всё доедет до обычных браузеров, можно будет наконец-то спокойно выдохнуть.

#html #canvas