javascript - 使用 Canvas 创建元素的位图副本

Question

我已经为客户创建了一个简单的页面布局程序，并希望提供页面的缩略图 View ，例如 InDesign 中的页面调色板。是否可以使用 HTML5 canvas 元素创建单个元素的副本。

例如，每个页面都是一个文章标签。我想使用 Canvas 复制这篇文章并将其缩小到 10%，然后将其绘制到屏幕上。

Answer 1

目前在 Canvas 规范中没有获取页面部分快照的方法。 Firefox 使用名为 drawWindow() 的方法扩展 Canvas 元素, 它接受您要拍照的区域的坐标和尺寸。但是，出于安全考虑，此方法仅适用于以 chrome 级别权限运行的脚本。代码中对该方法的注释表示将来可能会发生变化:

// We can't allow web apps to call this until we fix at least the
// following potential security issues:
// -- rendering cross-domain IFRAMEs and then extracting the results
// -- rendering the user's theme and then extracting the results
// -- rendering native anonymous content (e.g., file input paths;
// scrollbars should be allowed)

http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352