在canvas中插入html(网页截图技术的实现)(翻译稿) serendipity的_H5之家

mdn上翻译的文章，里面其实涉及了非常多的知识，值得学习，这个技术也是一些在线截图工具的解决方案吧。。

https://developer.mozilla.org/zh-CN/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

尽管不常见(出于安全考虑), 但是将DOM内容—比如HTML—绘制到画布中是有可能的. 这篇文章源自Robert O’Callahan的博客, 讲到如何有把握地, 安全地实现它, 并且按照规范来.

概览

你不能把HTML画到canvas上。相反,你需要使用一个SVG图像,其中包含你想要呈现的内容。可以使用<foreignobject> 元素包含HTML内容,之后把这个svg绘制到你的canvas中。

步骤

唯一真正棘手的事情——这可能是一个夸张——创建SVG图像。所有你需要做的是创建一个包含XML字符串的SVG，然后按照下面的步骤构造一个 Blob

blob对象的媒体类型mime为 “image/svg+xml”.
<svg> 元素.
在svg元素中包含 <foreignobject> 元素.
(格式化好的) HTML ,被包裹到<foreignobject>中.

By using a object URL as described above, we can inline our HTML instead of having to load it from an external source. You can, of course, use an external source if you prefer, as long as the origin is the same as the originating document.

如上所述通过使用一个object URL,我们可以内联HTML而不是从外部源加载它。当然,如果你喜欢你可以使用外部源,只要域与原始文件相同。

Example

Example <!DOCTYPE html> <html> <body> <p><canvas></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var data = "<svg xmlns='http://www.w3.org/2000/svg'>" + "<foreignObject>" + "<div xmlns='http://www.w3.org/1999/xhtml'>" + "<em>I</em> like <span>cheese</span>" + "</div>" + "</foreignObject>" + "</svg>"; var DOMURL = self.URL || self.webkitURL || self; 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; </script> </body> </html>

例子的效果:

data变量设置了SVG图像的内容(这包括HTML)我们希望绘制到我们的canvas中。

通过调用 new Image()我们建立一个新的html <img> 元素,添加数据进去，指定一个object URL, 之后在图片onload的时候调用 drawImage() 来把图片绘制到画布中.

安全性

您可能想知道这种方式是否安全,担心canvas会读取敏感数据。答案是这样的:这个解决方案的实现依赖的SVG图像是非常严格的。SVG图像不允许加载任何外部资源,即使似乎来自同一个域。资源(如栅格图像(如JPEG图像)或<iframe>s 需要用 data: URIs来内联引入.

此外,你不能在一个SVG图像中引入脚本文件,所以没有从其他脚本访问DOM的风险,而且DOM元素在SVG图像中不能接收事件的输入,所以没有办法通过把隐私信息加载到一个表单控件(如一个文件的完整路径 <input> 元素)然后渲染出来,之后通过读取像素把这些信息取出。

访问过的链接风格并不应用于SVG图像中呈现的链接,所以历史信息也不能被检索,本地的主题也不呈现在SVG图像中,这使得它很难确定用户的平台。(这里的意思应该是windows跟mac风格吧)

生成的canvas元素是纯净的,意味着你可以通过调用 toBlob(function(blob){…})来返回canvas的blob ，或者 toDataURL()来返回 Base64-编码的 data: URI.

Testing origin from their containing documents.

绘制HTML

SVG必须是合法的XML，你需要解析并把HTML转为规范的符合格式的。下面的代码可以很方便的解析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);