Renderizando código HTML en un elemento <canvas> mediante JavaScript

Extracto de la transcripción automática del vídeo realizada por YouTube.

everybody thanks for having me my mission today is to walk you two through a bit of code to implement a vendre in JavaScript and as just said it's kind of the best thing that I bounced already does so why would we be doing this let's say for now we

just we just want to so a bit more detail what do we want to do today um so we want to misuse a few new browser features that came up with html5 and stuff I want to use a bit JavaScript to manipulate SVG HTML CSS DOM and the CSS object model in any order so

I hope you guys have some fun on the way i seriously had a lot of fun doing this so um a bit more detail so what we want to do is we want to trigger the HTML rendering capabilities of the browser from javascript so that basically what the browser is doing

at its best is it just takes HTML and shows us to us in a nice way what I want to do is get a screenshot from a random webpage oh it's not so random but and actually render HTML in the canvas or in other words basically implementing a prolly fill which

is kind of filling a gap that has not been defined by a standards body it's not there but I still think this gap is needs filling and this is how it looks like it's basically just canvas get context droid tml that's what I want to do it looks pretty

easy does it so let's see so those very quick solution of Firefox gratefully offers an API to that basically all you do is get a canvas get the context and you draw a window to that canvas or that's basically what I want to do right there's about

two that it only works as a plug-in in Firefox so if you are plug-in you allow to you make use of that from the web page you do not you do not you do not go through that so you have to you have to be a plug-in this of course is due to security concerns so

if the browser would allow you to render a random web page you could just go just like painter the open gmail tab of your user rendered to the canvas and then read back from it and that would allow us to get content that we're not allowed to see so of

course that is forbidden and yeah that's not that's not bringing us further so let's see so maybe SVG can help us here the if you guys know canvas the canvas does allow me to draw an image well SVG is an image right so let's see whether we

can move forward to that so maybe I don't know how public that knowledge is but SVG does allow you to embed foreign objects SVG is XML it does allow anything it does allow other contexts that all can also be XML and for example it could be HTML or actually

a XHTML so the example that you can see here i hope the font is big enough it's basically just a strong element inside HTML inside a foreign object in an SVG and that is a valid image can we build on that let's see um well first of all what is X HTML

so SVG as an XML standard can only m-matt foreign objects that are valid XML wall html5 goes to great lengths of allowing you to do whatever you want and still make it look pretty that doesn't work well with SVG so here's a bit of code basically creates

a document puts in some HTML then Oh provides some XML namespace ting and then figures the the Firefox external serializer to civilize that back to back to us and that is then valid XML this does not work in chrome and safari because basically what those guys

are saying is the external serializer by stand by the standard only needs to serialize xml so anyway that's a shim I wrote for that which is basically a hundred fifty lines of code it's not that difficult but we need to fall back to a pure JavaScript

[ ... ]

Nota: se han omitido las otras 1.695 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.