Javascript PhantomJS-捕获到HTMLImageElement、HtmlCanvaElement或ImageData的屏幕
PhantomJS是否可以在不将网页屏幕保存到文件系统的情况下捕获网页屏幕 我需要这个,因为我想对页面截图进行一些后期处理(颜色方案检测) 颜色检测也是用JS进行的。(),可以处理Javascript PhantomJS-捕获到HTMLImageElement、HtmlCanvaElement或ImageData的屏幕,javascript,phantomjs,Javascript,Phantomjs,PhantomJS是否可以在不将网页屏幕保存到文件系统的情况下捕获网页屏幕 我需要这个,因为我想对页面截图进行一些后期处理(颜色方案检测) 颜色检测也是用JS进行的。(),可以处理HTMLImageElement,HTMLCAVEASElement,ImageData或CanvasRenderingContext2D 这里是PhantomJSAPI,但是render方法只支持一个文件路径:感谢Artjom B.在评论中提供的解决方案。它工作得很好。 首先,我创建了页面的屏幕截图,并将其保存到文件
HTMLImageElement
,HTMLCAVEASElement
,ImageData
或CanvasRenderingContext2D
这里是PhantomJSAPI,但是
render
方法只支持一个文件路径:感谢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');
});
如果您想使用PhantomJS,可能不会。您始终可以仅使用具有保存图像的文件路径的图像替换当前的页面.content
,然后注入RgbQuant,进行调整并再次渲染。
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);
});
...
});