javascript - 从 html 元素创建 img 文件(bmp、jpg、png)

Question

我有一个页面，其中包含许多 Canvas 元素，每个元素都有自己的形状(rec、line 等...)以及 css3 属性(旋转、度数、变换等...)。 我需要获取该 html 元素或页面并将其呈现为包含所有子元素及其样式的图像文件。

• html2canvas.js 在呈现 css3 属性时存在很多问题，因此该选项不在考虑范围之内。
• 我想转换为图像的元素是一组 html 元素(div、canvas、p、video 等...)，所以需要一个 canvas 元素的屏幕截图。

这个问题有解决办法吗？？？ 我必须将它转换为 img 我没有任何其他选择!!!

Answer 1

您可以使用 PhantomJS为了这。 这是节点中的示例:

var page = require('webpage').create();
page.open('http://example.org/', function() {
    var clipRect = page.evaluate(function () {
        return document.getElementById('myID').getBoundingClientRect();
    });

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };

    page.render('myCapture.png');
    phantom.exit();
});

这将转到 example.org 并截取 #myID 中的所有内容