Как я могу сделать HTML5 canvas display HTML?

Question

Я понимаю, что холст не может напрямую визуализировать HTML. Однако, похоже, есть возможные способы обхода. Мне не нужен HTML-код для рендеринга, но я бы хотел, по крайней мере, изображение визуализированного HTML.

С этой целью я попытался преобразовать HTML в SVG. Это работает с очень простым HTML, но ломает многие случаи использования (например, включая изображение в HTML):

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = new Image(); 

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + screen.width + '" height="' + screen.height + '">' + 
      '<foreignObject width="100%" height="100%">' + 
      '<div xmlns="http://www.w3.org/1999/xhtml">' + 
      document.body.innerHTML + 
      '</div></foreignObject></svg>' 

var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img,0,0,c.width,c.height); 
    DOMURL.revokeObjectURL(url); 
} 
img.src = url; 

Есть более простой способ получения HTML отображения правильно на холсте?

Answer 1

Комментарий, предоставленный dandavis, дал мне лучший способ выполнить эту конкретную работу.

http://html2canvas.hertzen.com

Answer 2

Вы можете создать базовую рекурсивную функцию для спуска в дочерние элементы элемента <canvas>, который использует объект-обработчик или объект обработчика событий для обработки определенных элементов. Я демонстрирую бывший здесь:

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
var y = 50; //Set to largest text 
 
var offset = 25; 
 

 
(function descend(parent){ 
 
    for(var i = 0; i < parent.childNodes.length; i++){ 
 
    var child = parent.childNodes[i]; 
 
    
 
    var name = child.tagName; 
 
    var val = child.innerHTML; 
 
    
 
    if(child.hasChildNodes()) descend(child); 
 
    
 
    switch(name){ 
 
     case 'H1': 
 
     ctx.font = "normal 48px Arial"; 
 
     y += 25; 
 
     ctx.fillText(val, offset, y); 
 
     y += 25; 
 
     break; 
 
     case 'H2': 
 
     ctx.font = "normal 36px Arial"; 
 
     y += 20; 
 
     ctx.fillText(val, offset, y); 
 
     y += 20; 
 
     break; 
 
     case 'H3': 
 
     ctx.font = "normal 24px Arial"; 
 
     y += 12; 
 
     ctx.fillText(val, offset, y); 
 
     y += 12; 
 
     break; 
 
     default: 
 
     break; 
 
    } 
 
    } 
 
})(canvas);

<canvas id="canvas" width="300" height="300"><h1>H1</h1><h2>H2</h2><h3>H3</h3></canvas>

Этот код использует функцию спускаемся в элемент дерева элемента и обрабатывает некоторые элементы с различными методами визуализации. Это может показаться немного чрезмерным, но если вы ищете эффективный способ достижения этой цели, этот метод работает. Особенно с гибкостью рендеринга, это ваша способность выбирать, как визуализировать элементы, как вы хотите, поэтому, если вы по какой-то причине хотите отобразить красный цвет >, вы можете это сделать. Функция, которую я предоставил, является чрезвычайно простой, только рендеринг <h1> - <h3>, и когда вы начинаете смешивать их внутри, он становится немного «отрывистым». Но это хорошо демонстрирует концепцию, и я думаю, что вы можете найти ее эффективной.

Хотя мысли, размещенные в комментариях, безусловно, восхитительны, если вы ищете гибкость или хотите контролировать рендеринг, это может быть решение, которое вы ищете.

Примечание: я скажу, что код не обнаруживает обновления в холсте < > элемент DOM; для этого вам понадобится наблюдатель мутаций. Вы также можете поместить код внутри функции, которая запускается при загрузке страницы, так что среда выполнения JavaScript может найти ваш элемент <canvas>.

Answer 3

Возможные решения:

• http://html2canvas.hertzen.com/

Этот скрипт позволяет делать "скриншоты" веб-страниц или частей него, прямо в браузере пользователя. Снимок экрана основан на DOM и поэтому не может быть на 100% точнее реального представления, так как он не делает фактический снимок экрана, но создает скриншот на основе информации, доступной на странице.

• https://github.com/tsayen/dom-to-image

дом к изображению является библиотека, которая может превратить произвольный узел DOM в вектора (SVG) или растрового (PNG) изображения, написанный на JavaScript.