当回调的时候runJavaScript
被触发则脚本完成。然而,窗户应该重新粉刷(或者至少准备重新粉刷)才能使用QWidget::render(&pixmap)
.
似乎某些绘制事件对于检测小部件的重新绘制很有用。不幸的是QWebEngineView
几乎不捕获任何事件(除了鼠标进入和退出,最近添加的未处理的键盘事件),例如参见“[QTBUG-43602] WebEngineView 不处理鼠标事件”.
几乎所有事件(如鼠标移动或绘画)都由QWebEngineView
私有类型的子代表RenderWidgetHostViewQtDelegateWidget
这是源自QOpenGLWidget
.
有可能捕获新的孩子QWebEngineView
类型的QOpenGLWidget
并在此子项上安装所有所需事件的事件过滤器挂钩。
该解决方案依赖于未记录的结构QWebEngineView
。因此,未来的 Qt 版本可能不支持它。但是,它可用于具有当前 Qt 版本的项目。也许将来会出现一些更方便的接口来捕捉QWebEngineView
活动将被实施。
下面的例子实现了这个魔法:
#ifndef WEBENGINEVIEW_H
#define WEBENGINEVIEW_H
#include <QEvent>
#include <QChildEvent>
#include <QPointer>
#include <QOpenGLWidget>
#include <QWebEngineView>
class WebEngineView : public QWebEngineView
{
Q_OBJECT
private:
QPointer<QOpenGLWidget> child_;
protected:
bool eventFilter(QObject *obj, QEvent *ev)
{
// emit delegatePaint on paint event of the last added QOpenGLWidget child
if (obj == child_ && ev->type() == QEvent::Paint)
emit delegatePaint();
return QWebEngineView::eventFilter(obj, ev);
}
public:
WebEngineView(QWidget *parent = nullptr) :
QWebEngineView(parent), child_(nullptr)
{
}
bool event(QEvent * ev)
{
if (ev->type() == QEvent::ChildAdded) {
QChildEvent *child_ev = static_cast<QChildEvent*>(ev);
// there is also QObject child that should be ignored here;
// use only QOpenGLWidget child
QOpenGLWidget *w = qobject_cast<QOpenGLWidget*>(child_ev->child());
if (w) {
child_ = w;
w->installEventFilter(this);
}
}
return QWebEngineView::event(ev);
}
signals:
void delegatePaint();
};
#endif // WEBENGINEVIEW_H
孩子添加被捕获WebEngineView::event
。保存子指针并将事件过滤器安装到该子指针上。在子绘制事件上发出信号WebEngineView::delegatePaint
发射于WebEngineView::eventFilter
.
信号delegatePaint
当某些脚本或由于鼠标悬停或任何其他原因突出显示某些 Web 控件而更改 Web 视图时,始终会发出此消息。
该信号是在实际执行之前从事件过滤器发出的QOpenGLWidget::paintEvent()
。因此,看起来只有在完整绘制完成后才需要拍摄页面快照(也许使用异步Qt::QueuedConnection
联系)。看来此时在事件过滤器中的时候delegatePaint
由于小部件已准备好使用 JavaScript 而被触发render()
。但是,由于某些其他原因(例如由于窗口激活)可能会收到绘制事件,这可能会导致警告消息:
QWidget::repaint:检测到递归重绘
所以,还是用比较好Qt::QueuedConnection
以避免此类问题。
现在的技巧是使用事件delegatePaint
仅当 JavaScript 完成时一次。该部分可以根据实际需要进行调整。
由于某些脚本或加载新图像,页面视图可以随时重新绘制。假设我们需要捕获脚本执行后页面的外观。所以,可以连接delegatePaint
发信号给saveSnapshotScroll
仅在脚本回调中使用槽并断开该连接saveSnapshotScroll
。以下测试循环生成三个不同滚动位置的快照。类似的快照按文件夹组织0
, 1
and 2
:
void MainWindow::runJavaScript()
{
// count initialized by 0
if (++count > 1000)
return;
QString script = QString::asprintf("window.scrollTo(0, %d);", 708 * (count % 3));
view->page()->runJavaScript(script,
[&] (const QVariant&) {
connect(view, &WebEngineView::delegatePaint,
this, &MainWindow::saveSnapshotScroll,
Qt::QueuedConnection);
}
);
}
void MainWindow::saveSnapshotScroll()
{
disconnect(view, &WebEngineView::delegatePaint,
this, &MainWindow::saveSnapshotScroll);
QPixmap pixmap(view->size());
view->render(&pixmap);
pixmap.save(QString::number(count % 3) + "/" +
QString::number(QDateTime::currentMSecsSinceEpoch()) + ".png");
runJavaScript();
}
在这些情况下,当事件由其他一些窗口交互触发时,可能会得到错误的快照。如果在脚本执行期间未触摸窗口,则结果是正确的。
为了避免处理错误的绘制事件,可以将 Web 视图像素图与以前保存的图像进行比较。如果这些图像之间的差异很小,则意味着应跳过当前的绘制事件,并需要等待下一个绘制事件:
void MainWindow::saveSnapshotScroll()
{
QSharedPointer<QPixmap> pixmap(new QPixmap(view->size()));
view->render(pixmap.data());
// wait for another paint event if difference with saved pixmap is small
if (!isNewPicture(pixmap))
return;
pixmap->save(QString::number(count % 3) + "/" +
QString::number(QDateTime::currentMSecsSinceEpoch()) + ".png");
disconnect(view, &WebEngineView::delegatePaint,
this, &MainWindow::saveSnapshotScroll);
runJavaScript();
}
bool MainWindow::isNewPicture(QSharedPointer<QPixmap> pixmap)
{
// initialized by nullptr
if (!prevPixmap) {
prevPixmap = pixmap;
return true;
}
// <pixmap> XOR <previously saved pixmap>
QPixmap prev(*prevPixmap);
QPainter painter;
painter.begin(&prev);
painter.setCompositionMode(QPainter::RasterOp_SourceXorDestination);
painter.drawPixmap(0, 0, *pixmap);
painter.end();
// check difference
QByteArray buf;
QBuffer buffer(&buf);
buffer.open(QIODevice::WriteOnly);
prev.save(&buffer, "PNG");
// almost empty images (small difference) have large compression ratio
const int compression_threshold = 50;
bool isNew = prev.width() * prev.height() / buf.size() < compression_threshold;
if (isNew)
prevPixmap = pixmap;
return isNew;
}
上述解决方案只是一个示例,它基于Qt提供的工具。可以考虑其他的比较算法。相似度阈值也可以根据具体情况进行调整。如果滚动视图与前一个图像非常相似(例如,在长空白空间的情况下),则这种比较存在限制。