@7revor/html2canvas 中文文档教程

Question

@7revor/html2canvas

Why @7revor/html2canvas

issues#2107

添加行到 src/render/canvas/canvas-renderer.ts

renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number) {
      this.ctx.textBaseline = 'ideographic';
        if (letterSpacing === 0) {
            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
        } else {
            const letters = toCodePoints(text.text).map(i => fromCodePoint(i));
            letters.reduce((left, letter) => {
                this.ctx.fillText(letter, left, text.bounds.top + text.bounds.height);

                return left + this.ctx.measureText(letter).width;
            }, text.bounds.left);
        }
    }

主页 | 下载 | 问题

JavaScript HTML renderer

该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。 屏幕截图基于 DOM，因此可能无法 100% 准确地反映真实情况，因为它并未制作实际屏幕截图，而是根据页面上可用的信息构建屏幕截图。

How does it work?

该脚本通过读取 DOM 和应用于元素的不同样式，将当前页面呈现为画布图像。

它不需要服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。 但是，由于它严重依赖于浏览器，因此该库不适合在 nodejs 中使用。 它也没有神奇地规避任何浏览器内容策略限制，因此呈现跨源内容将需要一个代理来将内容获取到同源。

该脚本仍处于非常实验性的状态，因此我不建议在生产环境中使用它，也不建议开始使用它构建应用程序，因为仍然会有重大更改。

Browser compatibility

该库应该可以在以下浏览器上正常工作（使用 Promise polyfill）：

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

由于每个 CSS 属性都需要手动构建才能获得支持，因此有许多属性尚不支持。

Usage

html2canvas 库使用 Promise 并期望它们在全局上下文中可用。 如果你想 支持原生不支持 Promise 的旧版浏览器，请包含一个 polyfill，例如 es6-promise 在包含 html2canvas 之前。

要使用 html2canvas 呈现一个 element，只需调用： html2canvas(element[, options]);

该函数返回一个 Promise 包含 元素。 只需使用 then 将承诺履行处理程序添加到承诺中：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Building

您可以在此处 下载现成的构建。

克隆 git 存储库：

$ git clone git://github.com/niklasvh/html2canvas.git

安装依赖项：

$ npm install

构建浏览器包

$ npm run build

Examples

有关更多信息和示例，请访问主页或尝试测试控制台。

Contributing

如果您想为该项目做出贡献，请将拉取请求发送到开发分支。 在提交任何更改之前，尝试并测试这些更改是否适用于所有支持的浏览器。 如果某些 CSS 属性不受支持或不完整，请在提交任何代码更改之前为其创建适当的测试。