Honey

I was asking for a solution; however, I continued to mine the forums for info and tried a half dozen techniques over the course of a few more days and stumbled upon most of the solution which I linked to in the previous post. It took nearly a week from the posting until I think I have a working solution to about 75% of the problem and I'm still working on the last bit. Apparently I should have had more faith and kept trying on my own. Sorry to pollute the forum. Won't happen again.

I decided to set up Hannacode to store my special javascript needs. In order to invoke your javascript code within a template you can do this: </article> <?php $hanna = $modules->get('TextformatterHannaCode'); echo $hanna->render("[[displayimage5]]"); ?> <div id="ShowImage"></div> </section> My Hannacode variable is [[displayimage5]] and it is showing (above) as the code for my template includes it... it renders itself as javascript and accomplishes the 'make an image of my data, attach a class to my html to make it move out of the viewport --effectively making it disappear, insert the image in the place of the original html' Remember -- my goal was to only show an image of the end result (html). Now I need to build two buttons -- probably in hannacode -- one to allow download of the image I just created and the other to generate a pdf of the image which could also be downloaded. Thanks to Pwired and this post https://processwire.com/talk/topic/27428-solved-how-to-use-an-var-in-a-hanna-code/ which is a derivative of this link from alan https://processwire.com/talk/topic/14141-outputting-a-hanna-code-via-the-api-in-a-template/

I currently have the html2canvas script sitting in my codebase standard-vertical. I'll have to change that to an include so I don't have to replicate code in each file. The bigger hangup with swapping the image for the html was futzing with the css to overcome html2canvas dom requirements (absolute positioning of the outside element vs using relative postioning) AND adding a similar set of css instructions for the child append <div> tag. The child tag was initally naked and the image was taking defaults, showing in the center of the page. Now the image draws itself over the same spot as the original html/table. Which means : Use html to generate the original table Grab the image of this table Javascript to add class that hides the original table Display the image in same place the original table used to be

Using CSS to move the original DOM off the page so you only see the image. Added this to css file: .article { width: 300px; padding: 5px; border: 2px solid #000; box-sizing: border-box; } .artgone { position : absolute; top : 0; left : -9999px; } Then modified the javascript function to add the newclass (.artgone) to the article dom. Also changed the article css to be a class and not attached to the css ID. Javascript that works: <script type="text/javascript"> function convertToImage() { //name of function html2canvas(document.getElementById("article")).then(function (canvas) { //set up dom target document.getElementById("ShowImage").appendChild(canvas); //copy image of the html output to the canvas // Adding a CSS class name to an element const element = document.querySelector('.article'); //target the original css class element.classList.add('artgone'); //add the newclass })}; //close the brackets/parens document.addEventListener("DOMContentLoaded", convertToImage); //make sure dom is ready before you invoke </script> Now to test in processwire and determine the optimum location to invoke the code. Optimize everything and replicate for all the images needed.

Here is 1/2 of the solution - automatically load the image <script type="text/javascript"> function convertToImage() { html2canvas(document.getElementById("article")).then(function (canvas) { document.getElementById("ShowImage").appendChild(canvas); })}; document.addEventListener("DOMContentLoaded", convertToImage) </script> Instead of trying to automate the button link, change the event listener to DOMContentLoaded. This works for me for I have a simple page and don't have to wait for complex images or other events to resolve prior to converting my DOM. Stepping through the above code: Initialize the script Name the function Define the function call to the 3rd party code Properly close all your brackets & parentheses Setup your event listener to determine if the page is finished loading. And call the script you named in step 2 above Close the script Add this script to your page... currently it is at the bottom of my flat HTML -- I'm working on where to put it in processwire. Eventually, I'll move the original DOM offcanvas and only load the image so you never see the original HTML Now to determine where to place this function in processwire.

This seems to be a matter of when processwire page DOM is finished and written output as well as the proper javascript code. Perhaps I should go back to html pages and get my automated javascript working and then come back to processwire and determine if the code should be invoked in _main, nfplabel, or standard-vertical ...

My Goal: Clicking the href link for the front-end page will display a portion of the DOM, pleasantly formatted, as an image with a button to download the image if desired. Current Setup: PW 3, HMTL2CANVAS, Javascript to display button onclick event (Windows box, testing works in Firefox and Opera) CurrentFlow: all my work so far is as admin. I have not tested anything as a guest or logged in user. Add New Custom Page Fill in 25 fields held by single repeater Save Page Click Href to display page just created (for now its in the navigation bar until I get the plumbing working, then it will be a listing and not in navigation bar) Fancy Formatted HTML DOM is displayed Javascript function onclick button will target the fancy DOM part, generate an image (PNG), and display it in a new div to the right of the fancy formatted DOM Additional Javascript function onclick button provides user the option to download the image Help I Need: 1. Automate the process to bypass the user interaction and automatically display just the fancy formatted DOM image Specifically: I do not want to display fancy formatted HTML as HTML but rather I want to display an image of the fancy formatted HTML. I'm using _main approach: -site --- _main --- nfplabel (custom page) ---templates ------scripts --------- converttoimage --------- downloadimage ------includes ----------standard-vertical This is in _main Head which is in the Processwire namespace.. <!DOCTYPE html> <html lang="<?php echo _x('en', 'HTML language code'); ?>"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title><?php echo $title; ?></title> <meta name="description" content="<?php echo $page->get('summary'); ?>" /> <link href="//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" /> <!-- <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/freecodecampnfp.css" /> --> <script src="<?php echo $config->urls->templates?>html2canvas/dist/html2canvas.js"></script> <!--<script src="<?php echo $config->urls->templates?>domtopdf/dist/dom-to-pdf.js"></script> --> <script src="<?php echo $config->urls->templates?>scripts/converttoimage.js"></script> <script src="<?php echo $config->urls->templates?>scripts/downloadimage.js"></script> <script src="<?php echo $config->urls->templates?>scripts/converttopdf.js"></script> <!-- <script src="<?php echo $config->urls->templates?>scripts/cloner.js"></script>--> <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/nfp-style.css"> <?php Here is the info in _main that pulls content <main id='main'> <!-- main content --> <div id='content'> <h1><?php echo $title; ?></h1> <?php echo $content; ?> </div> My intermediate file that decides which fancy format to use (nfplabel): // Primary content is the page body copy $q = $page->get('label_type'); if ($page->get('label_type')->name == "standard-vertical") { //$content .= include __DIR__ . '/includes/standard-vertical.php'; $content .= files()->render('./includes/standard-vertical.php'); Relevant code at the bottom of the Fancy formatted HTML page (standard-vertical): <button onclick="downloadimage()" class="clickbtn">Click To Download PNG</button> <button onclick="convertToImage()">Convert PNG Image</button> <h3>Preview :</h3> <div id="ShowImage"></div> Javascript onclick script I want to automate function convertToImage() { html2canvas(document.getElementById("article")).then(function (canvas) { document.getElementById("ShowImage").appendChild(canvas); }); } Javascript onclick to download which stays as onlick and user can decide when to use function downloadimage() { var container = document.getElementById("article");; //specific element on page //var container = document.getElementById("article");; // full page html2canvas(container, { allowTaint: true }).then(function (canvas) { html2canvas(document.body).then(canvas => document.body.appendChild(canvas)); var link = document.createElement("a"); document.body.appendChild(link); link.download = "en/html_article.png"; link.href = canvas.toDataURL(); link.target = '_blank'; link.click(); }); } I tried to pick a smaller, manageable project to learn the basics of processwire. But while I was able to connect the dots with 3rd party module integration, I seem to be ill-prepared to integrate javascript functions appropriately. Could someone clear the fog or at least point me towards shore? Honey