PhantomJS - 将屏幕捕获到 HTMLImageElement、HTMLCanvasElement 或 ImageData答案

【问题标题】：PhantomJS - Capture screen to HTMLImageElement, HTMLCanvasElement or ImageDataPhantomJS - 将屏幕捕获到 HTMLImageElement、HTMLCanvasElement 或 ImageData
【发布时间】：2014-06-17 13:38:31
【问题描述】：

PhantomJS 是否可以捕获网页屏幕不保存到文件系统？

我需要这个，因为我想对页面截图进行一些后期处理（配色方案检测）。

颜色检测也是用JS .(https://github.com/leeoniya/RgbQuant.js) 实现的，可以处理HTMLImageElement, HTMLCanvasElement, ImageData or CanvasRenderingContext2D

这里是 PhantomJS API，但是render 方法只支持一个文件路径：http://phantomjs.org/screen-capture.html

【问题讨论】：

如果你想使用 PhantomJS 可能不会。您始终可以仅将当前的page.content 替换为具有保存图像的文件路径的图像，然后注入 RgbQuant，进行调整并再次渲染。

标签： javascript phantomjs

【解决方案1】：

感谢 Artjom B. 在评论中提供的解决方案。它工作得很好。首先，我创建了页面的屏幕截图，并将其保存到文件夹screenshots，并带有一个包含此屏幕截图的html file。

page.open(url, function (status) {
    // Make screenshot and save it to './screenshots'
    var rel_path = 'screenshots/' + btoa(url) + '_' + (new Date().getTime());

    // Image path
    var img_path = rel_path + '.png';

    // HTML page path
    var html_path = rel_path + '.html';

    // Make screenshot
    page.render(img_path);

    // Create webpage with the image, but take the absolute path.
    fs.write(html_path, '<html><body><img id="image" src="' + 'file:///' + fs.absolute(img_path) + '"/></body></html>', 'w');
});

之后，我再次使用 phantom 打开了创建的文件。通过 id=image 加载图像并执行我的 RGB 量化。

p.open('file:///' + html_path, function start(status) {
    console.log('[RGB-QUANTIFICATION]: ' + self.url);

    // Inject image quantification library
    p.injectJs('ext/rgbquant.js');

    // Generate color palette
    var colors = p.evaluate(function () {
        var rgb_quant_settings = {colors: 5, method: 2, initColors: 4096, minHueCols: 0};
        var rgb_quant = new RgbQuant(rgb_quant_settings);
        rgb_quant.sample(document.getElementById('image'));
        return rgb_quant.palette(true);
    });

    ...

});

【讨论】：