diff --git a/src/api/save-preview.php b/src/api/save-preview.php
new file mode 100644
index 00000000..44f10b4c
--- /dev/null
+++ b/src/api/save-preview.php
@@ -0,0 +1,44 @@
+ Duration::MONTH) {
+ $preview_create = true;
+ }
+ } else {
+ $preview_create = true;
+ }
+
+ if ($preview_create && $_SESSION['user']->power >= $page->power) {
+ file_put_contents($preview_filepath, $preview);
+ }
+ }
+ break;
+}
diff --git a/src/assets/js/html2canvas.js b/src/assets/js/html2canvas.js
new file mode 100644
index 00000000..fdf75b23
--- /dev/null
+++ b/src/assets/js/html2canvas.js
@@ -0,0 +1,33 @@
+"use strict";
+
+window.addEventListener("load", (event) => {
+ /**
+ * Generate page preview
+ */
+ html2canvas(
+ document.querySelector('body'),
+ {
+ 'logging' : false,
+ 'x' : window.scrollX,
+ 'y' : window.scrollY,
+ 'width' : window.innerWidth,
+ 'height' : window.innerHeight,
+ }
+ )
+ .then(canvas => {
+ var data = new URLSearchParams();
+ data.append('preview', canvas.toDataURL());
+ data.append('api_token', api.token);
+ data.append('page', $_GET.page);
+
+ /** Save page preview */
+ fetch('/?page=api&module=save-preview', {
+ method : 'POST',
+ body : data
+ })
+ .then(handleFetchError)
+ .then(handleFetchResponse)
+ .then(function(response) {})
+ .finally(function() {});
+ });
+});
diff --git a/src/classes/page.php b/src/classes/page.php
index 27250383..bf8ebf39 100644
--- a/src/classes/page.php
+++ b/src/classes/page.php
@@ -440,6 +440,23 @@ class Page
isCrawler()) {
+ $scripthtml2canvas1 = 'node_modules/html2canvas/dist/html2canvas.min.js';
+ $scripthtml2canvas1Modified = filemtime($scripthtml2canvas1);
+ ?>
+
+
+
+