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

问题描述

能够临时将常规元素转换为 canvas 会非常有用.例如，假设我有一个想要翻转的样式 div.我想动态创建一个画布，将 HTMLElement 渲染"到画布中，隐藏原始元素并为画布设置动画.

It would be incredibly useful to be able to temporarily convert a regular 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.

可以吗?

推荐答案

抱歉，浏览器不会将 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 渲染器，这可能是一项艰巨的任务.这里有一个这样的尝试，但它是有点狡猾，离完成还有很长的路要走.(它甚至试图从头开始解析 HTML/CSS，我认为这很疯狂！从应用了样式的真实 DOM 节点开始会更容易，并使用 getComputedStyle 和relative部分位置使用 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 元素转换为画布元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！