Rendering di elementi HTML su

C’è un modo per avere un elemento HTML arbitrario reso in una canvas (e quindi accedere al suo buffer …).

Al momento non eseguirai il rendering HTML reale su , perché il contesto canvas non ha funzioni per il rendering di elementi HTML.

Ci sono alcune emulazioni:

html2canvas project http://html2canvas.hertzen.com/index.html (fondamentalmente un tentativo di renderer HTML creato su Javascript + canvas)

Da HTML a SVG a potrebbe essere ansible in base al tuo caso d’uso:

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

Inoltre, se si utilizza Firefox, è ansible modificare alcune autorizzazioni estese e quindi eseguire il rendering di una finestra DOM su

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

Dai un’occhiata a MDN

Renderà l’elemento html usando la creazione di immagini SVG .

Ad esempio: c’è I like cheese elemento HTML. E voglio aggiungerlo in Canvas Element.

Ecco il codice Javascript per aggiungere elementi HTML su canvas .

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = '' + '' + '
' + 'I like cheese' + '
' + '
' + '
'; 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;

Ecco la demo

RasterizeHTML è un ottimo progetto, ma se hai bisogno di accedere alla canvas non funzionerà su Chrome. a causa dell’uso di foreignObject

Se hai bisogno di accedere al canvas, puoi usare html2canvas

Sto cercando di trovare un altro progetto perché html2canvas è molto lento nelle prestazioni

Ecco il codice per il rendering di HTML arbitrario in una canvas:

 function render_html_to_canvas(html, ctx, x, y, width, height) { var data = "data:image/svg+xml;charset=utf-8,"+'' + '' + html_to_xml(html)+ '' + ''; 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 //  in the DOM doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI); // Get well-formsd markup html = (new XMLSerializer).serializeToString(doc.body); return html; } 

Secondo le specifiche HTML non è ansible accedere agli elementi della canvas. È ansible ottenere il suo contesto e disegnarlo manipolarlo, ma questo è tutto.

MA, puoi mettere sia l’elemento Canvas che l’elemento html nello stesso div con aa position: relative e quindi imposta il canvas e l’altro elemento in position: absolute . In questo modo saranno in cima a vicenda. Quindi è ansible utilizzare le proprietà CSS left e right per posizionare l’elemento html.

Se l’elemento non appare, forse la canvas è prima di esso, quindi usa la proprietà CSS z-index per portarla prima del canvas.