Отображение HTML-элементов на <canvas>

Ответ 1

В настоящее время вы не получите реальную рендеринг HTML <canvas> per se, потому что контекст canvas не имеет функций для визуализации HTML-элементов.

Есть несколько эмуляций:

html2canvas project http://html2canvas.hertzen.com/index.html (в основном попытка визуализации HTML, построенная на холсте Javascript +)

От HTML до SVG до <canvas> может быть возможно в зависимости от вашего варианта использования:

https://github.com/miohtama/Krusovice/blob/master/src/tools/html2svg2canvas.js

Также, если вы используете Firefox вы можете взломать несколько расширенных разрешений, а затем визуализировать окно DOM на <canvas>

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas?redirectlocale=en-US&redirectslug=Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

Ответ 2

Посмотрите MDN

Он отобразит элемент html с помощью создания SVG-изображений.

Пример: Существует элемент <em>I</em> like <span style="color:white; text-shadow:0 0 2px blue;">cheese</span> HTML. И я хочу добавить его в элемент <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> Canvas.

Вот код Javascript для добавления HTML-элемента в холст.

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

var data   = '<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="font-size:40px">' +
                   '<em>I</em> like <span style="color:white; text-shadow:0 0 2px blue;">cheese</span>' +
                 '</div>' +
               '</foreignObject>' +
             '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
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);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

Вот Демо

Ответ 3

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

Если вам нужно получить доступ к холсту, вы можете использовать html2canvas

Я пытаюсь найти другой проект, поскольку html2canvas очень медленный в производительности

Ответ 4

В соответствии со спецификацией HTML вы не можете получить доступ к элементам Canvas. Вы можете получить его контекст и рисовать в нем, манипулировать им, но это все.

НО, вы можете поместить как Canvas, так и элемент html в тот же div с a position: relative, а затем установите холст, а другой элемент - на position: absolute. Таким образом они будут на вершине друг друга. Затем вы можете использовать свойства CSS left и right для размещения элемента html.

Если элемент не отображается, возможно, перед ним находится холст, поэтому используйте свойство z-index CSS, чтобы вывести его перед холстом.

Ответ 5

Вот код для визуализации произвольного HTML в холст:

function render_html_to_canvas(html, ctx, x, y, width, height) {
    var data = "data:image/svg+xml;charset=utf-8,"+'<svg xmlns="http://www.w3.org/2000/svg" width="'+width+'" height="'+height+'">' +
                        '<foreignObject width="100%" height="100%">' +
                        html_to_xml(html)+
                        '</foreignObject>' +
                        '</svg>';

    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, x, y);
    }
    img.src = data;
}

function html_to_xml(html) {
    var doc = document.implementation.createHTMLDocument('');
    doc.write(html);

    // You must manually set the xmlns if you intend to immediately serialize     
    // the HTML document to a string as opposed to appending it to a
    // <foreignObject> in the DOM
    doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);

    // Get well-formed markup
    html = (new XMLSerializer).serializeToString(doc.body);
    return html;
}