using a webengineview here to be able to possibly capture screenshot

Want to figure out if I can inject html2canvas to capture a screenshot
of the webengineview offscreen and thus generate thumbnails of the
different slides in a RevealJS presentation.
This commit is contained in:
Chris Cochrun 2023-10-28 14:32:22 -05:00
parent 5ead356289
commit 0654a9fb9d

View file

@ -3,6 +3,7 @@ import QtQuick.Dialogs 1.0
import QtQuick.Controls 2.15 as Controls import QtQuick.Controls 2.15 as Controls
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtWebEngine 1.10
import org.kde.kirigami 2.13 as Kirigami import org.kde.kirigami 2.13 as Kirigami
import "./" as Presenter import "./" as Presenter
import org.presenter 1.0 import org.presenter 1.0
@ -18,6 +19,7 @@ Controls.Page {
property int totalSlides: SlideMod.count() property int totalSlides: SlideMod.count()
property url imageBackground: presentation.imageBackground property url imageBackground: presentation.imageBackground
property url videoBackground: presentation.vidBackground property url videoBackground: presentation.vidBackground
property url webSource
property string currentText: presentation.text property string currentText: presentation.text
property int blurRadius: 0 property int blurRadius: 0
@ -131,6 +133,22 @@ Controls.Page {
} }
} }
WebEngineView {
id: web
anchors.left: parent.right
url: "file:///home/chris/org/lessons/2023_24_3_noah_lesson.html"
visible: false
WebEngineScript {
name: "html2canvas"
sourceUrl: "file:///home/chris/dev/lumina/src/qml/presenter/html2canvas.min.js"
}
onLoadingChanged: {
if (loadRequest.status == 2)
showPassiveNotification("yahoo?");
getRevealThumbs("file:///home/chris/org/lessons/2023_24_3_noah_lesson.html");
}
}
/* Loader { */ /* Loader { */
/* id: presWinLoader */ /* id: presWinLoader */
/* active: false */ /* active: false */
@ -310,4 +328,22 @@ Controls.Page {
presentation.forceActiveFocus(); presentation.forceActiveFocus();
presentation.focusTimer = true; presentation.focusTimer = true;
} }
function getRevealThumbs(file) {
console.log(file);
webSource = file;
web.runJavaScript("
import('./html2canvas.min.js').then((html2canvas) => {
const screenshotTarget = document.body;
html2canvas(screenshotTarget).then((canvas) => {
const base64image = canvas.toDataURL('image/png');
return base64image;
});});", function(image) { console.log(image); });
/* web.runJavaScript(" */
/* const index */
/* for (let i = 0; i < index; i++) { */
/* Reveal.next(); */
/* }") */
}
} }