如何将HTML元素转换为canvas元素？ [英] How can I convert an HTML element to a canvas element?

问题描述

能够临时将常规ol元素转换为canvas是非常有用的。例如，说我有一个样式的div，我想翻转。我想动态创建一个画布，将HTMLElement渲染到画布中，隐藏原始元素，并对画布进行动画处理。

It would be incredibly useful to be able to temporarily convert a regular ol' element into a canvas. For example, say I have a styled div that I want to flip. I want to dynamically create a canvas, "render" the HTMLElement into the canvas, hide the original element, and animate the canvas.

可以吗？ >

Can it be done?

推荐答案

很抱歉，浏览器无法将HTML转换成画布。

Sorry, the browser won't render HTML into a canvas.

如果可以，这将是一个潜在的安全风险，因为HTML可以包括来自第三方网站的内容（特别是图像和iframe）。如果 canvas 可以将HTML内容转换为图片，然后阅读图片数据，则可能会从其他网站提取特权内容。

It would be a potential security risk if you could, as HTML can include content (in particular images and iframes) from third-party sites. If canvas could turn HTML content into an image and then you read the image data, you could potentially extract privileged content from other sites.

要从HTML中获取画布，您必须使用 drawImage 和 fillText 来从头编写自己的HTML渲染器。 code>，这是一个潜在的巨大任务。有这样的尝试，但它是有点狡猾和一个漫长的路从完成。 （它甚至尝试从头解析HTML / CSS，我认为是疯狂的！从一个真正的DOM节点开始应用样式更容易，并使用 getComputedStyle 和它的部分的相对位置使用 offsetTop 等）

To get a canvas from HTML, you'd have to basically write your own HTML renderer from scratch using drawImage and fillText, which is a potentially huge task. There's one such attempt here but it's a bit dodgy and a long way from complete. (It even attempts to parse the HTML/CSS from scratch, which I think is crazy! It'd be easier to start from a real DOM node with styles applied, and read the styling using getComputedStyle and relative positions of parts of it using offsetTop et al.)

这篇关于如何将HTML元素转换为canvas元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！