Question

我有一个页面，其中包含许多画布元素，每个元素都有自己的形状（rec，line等...）以及css3属性（rotate，deg，transform等...）。我需要将该html元素或页面呈现为包含所有子元素及其样式的图像文件。

html2canvas.js在渲染css3属性方面存在很多问题，因此选项不在桌面上。
我要转换为图像的元素是一个html元素数组（div，canvas，p，video等...）所以画布元素的截图要做。

有这个问题的解决方案吗？我必须将它转换为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

内所有内容的屏幕截图

从html元素创建img文件（bmp，jpg，png）

1 个答案: