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

标签 javascript phantomjs

是否可以使用 PhantomJS捕获网页屏幕而不将其保存到文件系统?

我需要这个,因为我想对页面屏幕截图进行一些后期处理(配色方案检测)。

颜色检测也是用 JS 进行的。( https://github.com/leeoniya/RgbQuant.js ),可以处理 HTMLImageElementHTMLCanvasElementImageData CanvasRenderingContext2D

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

最佳答案

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

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);
    });

    ...

});

关于javascript - PhantomJS - 将屏幕捕获到 HTMLImageElement、HTMLCanvasElement 或 ImageData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24265361/

相关文章:

node.js - 幻 Node 模块无法加载外部资源

javascript - casperjs 按钮点击不导航到下一页

css - 无法在 CasperJS 中使用 CSS 选择器找到元素

javascript - 迭代对象值 - javascript

javascript - 带有共享修饰符的 jQuery "OR"选择器?

javascript - ngFor 项目 Angular 8 的动态 routerLink 值

javascript - phantomjs 不评估 javascript 表

java - 有什么方法可以使用 PhantomJSDriver 在 PhantomJS 中设置用户代理吗?

javascript - Firefox 中的神秘空白

.net - 选择哪个ui框架