PyQt/QWebEngineView/ScreenShotPage.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

"""
Created on 2019年7月8日
@author: Irony
@site: https://pyqt.site , https://github.com/PyQt5
@email: 892768447@qq.com
@file: ScreenShotPage
@description: 网页整体截图
"""
import base64
import cgitb
import os
import sys

try:
    from PyQt5.QtCore import QUrl, Qt, pyqtSlot, QSize, QTimer, QPoint
    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
except ImportError:
    from PySide2.QtCore import QUrl, Qt, Slot as pyqtSlot, QSize, QTimer, QPoint
    from PySide2.QtGui import QImage, QPainter, QIcon, QPixmap
    from PySide2.QtWebChannel import QWebChannel
    from PySide2.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
    from PySide2.QtWidgets import QWidget, QApplication, QVBoxLayout, QPushButton, \
        QGroupBox, QLineEdit, QHBoxLayout, QListWidget, QListWidgetItem, \
        QProgressDialog

# 对部分内容进行截图
CODE = """
var el = $("%s");
html2canvas(el[0], {
    width: el.outerWidth(true), 
    windowWidth: el.outerWidth(true),
}).then(function(canvas) {
    window._self.saveImage(canvas.toDataURL());
    canvas = null;
});
"""

# 创建交互桥梁脚本
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://pyqt.site"))

    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, QPoint())
            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'
    cgitb.enable(format='text')
    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_())