Визуализация элементов HTML в <canvas>

Question

Есть ли способ получить произвольный HTML-элемент, отображаемый на холсте (и затем получить доступ к его буферу...).

Answer 1

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

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

html2canvas проект http://html2canvas.hertzen.com/index.html (в основном попытка рендеринга HTML, построенная на Javascript + canvas)

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

Answer 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> Холст элемент.

Вот код 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;

Вот демо

Answer 3

Вот код для рендеринга произвольного 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;
}

Answer 4

CSS element() Функция может в конечном итоге помочь некоторым людям здесь, даже если это не прямой ответ на вопрос. Он позволяет использовать элемент (и все дочерние элементы, включая видео, междоменные фреймы и т. Д.) В качестве фонового изображения (и в любом другом месте, которое вы обычно используете url(...) в вашем коде CSS). Вот сообщение в блоге, которое показывает, что вы можете с ним сделать.

Он реализован в Firefox с 2011 года и рассматривается в Chromium/Chrome (не забывайте ставить вопрос, если вам небезразлична эта функциональность).

Answer 5

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

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

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

Answer 6

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

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

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