Add a render function

Renders the document to an image and opens it in a new window.
no-gravity · Apr 15, 2024 · ec47bf6 · ec47bf6
1 parent 62b79e8
commit ec47bf6
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -106,11 +106,14 @@
             </label> |
             <a href=# onClick="update()">update</a> |
             <a href=# onClick="goFullscreen()" >fullscreen</a> |
+            <a href=# onClick="render()" >render</a> |
             <a href="https://github.com/no-gravity/html_editor"
                target=_blank>github</a>
         </div>
         <iframe name=hello style="width: 100%; height: 100%"></iframe>
 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
         <script>
 
             function update()
@@ -139,6 +142,13 @@
                 update();
             }
 
+            async function render() {
+                let inny=document.querySelector("iframe").contentDocument.body;
+                let dataUrl = await domtoimage.toPng(inny);
+                let w = window.open();
+                w.location.href=dataUrl;
+            }
+
             dataArea=document.getElementById("data");
             dataArea.onkeyup=realtime;