PyQt5#58 增加QWebEngineView截图支持

.settings/org.eclipse.core.resources.prefs

@@ -58,6 +58,7 @@ encoding//QTreeWidget/ParsingJson.py=utf-8
 encoding//QTreeWidget/testTreeWidget.py=utf-8
 encoding//QWebEngineView/GetCookie.py=utf-8
 encoding//QWebEngineView/JsSignals.py=utf-8
+encoding//QWebEngineView/ScreenShotPage.py=utf-8
 encoding//QWebView/DreamTree.py=utf-8
 encoding//QWebView/GetCookie.py=utf-8
 encoding//QWebView/JsSignals.py=utf-8

QWebEngineView/README.md

@@ -3,6 +3,7 @@
 - 目录
   - [获取Cookie](#1获取Cookie)
   - [和Js交互操作](#2和Js交互操作)
+  - [网页整体截图](#3网页整体截图)
 
 ## 1、获取Cookie
 [运行 GetCookie.py](GetCookie.py)
@@ -18,4 +19,12 @@
 
 具体看代码中的注释
 
-![JsSignals](ScreenShot/JsSignals.gif)
+![JsSignals](ScreenShot/JsSignals.gif)
+
+## 3、网页整体截图
+[运行 ScreenShotPage.py](ScreenShotPage.py)
+
+1. 方式1：目前通过不完美方法（先调整`QWebEngineView`的大小为`QWebEnginePage`的内容大小，等待一定时间后截图再还原大小）
+2. 方式2：通过js库`html2canvas`对指定元素截图,得到`base64`编码的数据并调用接口函数传递到py代码中
+
+![ScreenShotPage](ScreenShot/ScreenShotPage.gif)

QWebEngineView/ScreenShotPage.py

@@ -0,0 +1,198 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+"""
+Created on 2019年7月8日
+@author: Irony
+@site: https://pyqt5.com https://github.com/PyQt5
+@email: [email protected]
+@file: ScreenShotPage
+@description: 网页整体截图
+"""
+import base64
+import cgitb
+import os
+import sys
+
+from PyQt5.QtCore import QUrl, Qt, pyqtSlot, QSize, QTimer
+from PyQt5.QtGui import QImage, QPainter, QIcon, QPixmap
+from PyQt5.QtWebChannel import QWebChannel
+from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
+from PyQt5.QtWidgets import QWidget, QApplication, QVBoxLayout, QPushButton,\
+    QGroupBox, QLineEdit, QHBoxLayout, QListWidget, QListWidgetItem,\
+    QProgressDialog
+
+
+__Author__ = "Irony"
+__Copyright__ = "Copyright (c) 2019"
+__Version__ = "Version 1.0"
+
+# 对部分内容进行截图
+CODE = """
+var el = $("%s");
+html2canvas(el[0], {
+    width: el.outerWidth(true), 
+    windowWidth: el.outerWidth(true),
+}).then(function(canvas) {
+    window._self.saveImage(canvas.toDataURL());
+});
+"""
+
+# 创建交互桥梁脚本
+CreateBridge = """
+new QWebChannel(qt.webChannelTransport,
+    function(channel) {
+        window._self = channel.objects._self;
+    }
+);
+"""
+
+
+class Window(QWidget):
+
+    def __init__(self, *args, **kwargs):
+        super(Window, self).__init__(*args, **kwargs)
+        self.resize(600, 400)
+        layout = QHBoxLayout(self)
+
+        # 左侧
+        widgetLeft = QWidget(self)
+        layoutLeft = QVBoxLayout(widgetLeft)
+        # 右侧
+        self.widgetRight = QListWidget(
+            self, minimumWidth=200, iconSize=QSize(150, 150))
+        self.widgetRight.setViewMode(QListWidget.IconMode)
+        layout.addWidget(widgetLeft)
+        layout.addWidget(self.widgetRight)
+
+        self.webView = QWebEngineView()
+        layoutLeft.addWidget(self.webView)
+
+        # 截图方式一
+        groupBox1 = QGroupBox('截图方式一', self)
+        layout1 = QVBoxLayout(groupBox1)
+        layout1.addWidget(QPushButton('截图1', self, clicked=self.onScreenShot1))
+        layoutLeft.addWidget(groupBox1)
+
+        # 截图方式二（采用js）
+        groupBox2 = QGroupBox('截图方式二', self)
+        layout2 = QVBoxLayout(groupBox2)
+        self.codeEdit = QLineEdit(
+            'body', groupBox2, placeholderText='请输入需要截图的元素、ID或者class：如body、#id .class')
+        layout2.addWidget(self.codeEdit)
+        self.btnMethod2 = QPushButton(
+            '', self, clicked=self.onScreenShot2, enabled=False)
+        layout2.addWidget(self.btnMethod2)
+        layoutLeft.addWidget(groupBox2)
+
+        # 提供访问接口
+        self.channel = QWebChannel(self)
+        # 把自身对象传递进去
+        self.channel.registerObject('_self', self)
+        # 设置交互接口
+        self.webView.page().setWebChannel(self.channel)
+        # 支持截图
+        settings = QWebEngineSettings.globalSettings()
+        settings.setAttribute(QWebEngineSettings.ScreenCaptureEnabled, True)
+        self.webView.loadStarted.connect(self.onLoadStarted)
+        self.webView.loadFinished.connect(self.onLoadFinished)
+        self.webView.load(QUrl("https://pyqt5.com"))
+
+    def onLoadStarted(self):
+        print('load started')
+        self.btnMethod2.setEnabled(False)
+        self.btnMethod2.setText('暂时无法使用（等待页面加载完成）')
+
+    @pyqtSlot(bool)
+    def onLoadFinished(self, finished):
+        if not finished:
+            return
+        print('load finished')
+        # 注入脚本
+        page = self.webView.page()
+        # 执行qwebchannel,jquery,promise,html2canvas
+        page.runJavaScript(
+            open('Data/qwebchannel.js', 'rb').read().decode())
+        page.runJavaScript(
+            open('Data/jquery.js', 'rb').read().decode())
+#         page.runJavaScript(
+#             open('Data/promise-7.0.4.min.js', 'rb').read().decode())
+        page.runJavaScript(
+            open('Data/html2canvas.min.js', 'rb').read().decode())
+        page.runJavaScript(CreateBridge)
+        print('inject js ok')
+        self.btnMethod2.setText('截图2')
+        self.btnMethod2.setEnabled(True)
+
+    def onScreenShot1(self):
+        # 截图方式1
+        page = self.webView.page()
+        oldSize = self.webView.size()
+        self.webView.resize(page.contentsSize().toSize())
+
+        def doScreenShot():
+            rect = self.webView.contentsRect()
+            size = rect.size()
+            image = QImage(size, QImage.Format_ARGB32_Premultiplied)
+            image.fill(Qt.transparent)
+
+            painter = QPainter()
+            painter.begin(image)
+            painter.setRenderHint(QPainter.Antialiasing, True)
+            painter.setRenderHint(QPainter.TextAntialiasing, True)
+            painter.setRenderHint(QPainter.SmoothPixmapTransform, True)
+
+            self.webView.render(painter)
+            painter.end()
+            self.webView.resize(oldSize)
+
+            # 添加到左侧list中
+            item = QListWidgetItem(self.widgetRight)
+            image = QPixmap.fromImage(image)
+            item.setIcon(QIcon(image))
+            item.setData(Qt.UserRole + 1, image)
+
+        # 先等一下再截图吧
+        QTimer.singleShot(2000, doScreenShot)
+
+    def onScreenShot2(self):
+        # 截图方式2
+        code = self.codeEdit.text().strip()
+        if not code:
+            return
+        self.progressdialog = QProgressDialog(self, windowTitle='正在截图中')
+        self.progressdialog.setRange(0, 0)
+        self.webView.page().runJavaScript(CODE % code)
+        self.progressdialog.exec_()
+
+    @pyqtSlot(str)
+    def saveImage(self, image):
+        self.progressdialog.close()
+        # data:image/png;base64,iVBORw0KG....
+        if not image.startswith('data:image'):
+            return
+        data = base64.b64decode(image.split(';base64,')[1])
+        image = QPixmap()
+        image.loadFromData(data)
+        # 添加到左侧list中
+        item = QListWidgetItem(self.widgetRight)
+        item.setIcon(QIcon(image))
+        item.setData(Qt.UserRole + 1, image)
+
+
+if __name__ == "__main__":
+    # 开启F12 控制台功能，需要单独通过浏览器打开这个页面
+    # 这里可以做个保护, 发布软件,启动时把这个环境变量删掉。防止他人通过环境变量开启
+    os.environ['QTWEBENGINE_REMOTE_DEBUGGING'] = '9966'
+    sys.excepthook = cgitb.enable(1, None, 5, '')
+    app = QApplication(sys.argv)
+    w = Window()
+    w.show()
+
+    # 打开调试页面
+    dw = QWebEngineView()
+    dw.setWindowTitle('开发人员工具')
+    dw.load(QUrl('http://127.0.0.1:9966'))
+    dw.show()
+    dw.move(100, 100)
+    sys.exit(app.exec_())

README.md

@@ -132,6 +132,7 @@ https://pyqt5.com 社区是专门针对PyQt5学习和提升开设的博客网站
   - [QWebEngineView](QWebEngineView)
     - [获取Cookie](QWebEngineView/GetCookie.py)
     - [和Js交互操作](QWebEngineView/JsSignals.py)
+    - [网页整体截图](QWebEngineView/ScreenShotPage.py)
     - [浏览器下载文件](Test/partner_625781186/6.QWebEngineView下载文件)
     - [打印网页](Test/partner_625781186/17_打印预览qwebengineview)