git issue 1665 png output (#1668)

* Save as PNG --------- Co-authored-by: jrobinso <933148+jrobinso@users.noreply.github.com>
igvteam · Aug 14, 2023 · 3c98b23 · 3c98b23
1 parent 320532a
commit 3c98b23
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 1 deletion.
diff --git a/dev/misc/png.html b/dev/misc/png.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>PNG Output Demo</title>
+
+
+</head>
+
+<body>
+
+<div>
+    <div id='app-container'></div>
+</div>
+
+<div>
+    <button id='igv-save-as-png-button' type="button">
+        <label>Save As PNG</label>
+    </button>
+</div>
+
+<div id="igv-svg-container">
+</div>
+
+</body>
+
+<script type="module">
+
+    // import igv from '../../js/index.js'
+    import igv from '../../dist/igv.esm.js'
+
+    const bedgraph_options = {
+        locus: '19:49301000-49305700',
+        genome: "hg19",
+        tracks: [
+            {
+                name: 'All negative points',
+                url: '../../test/data/wig/allNegativewig.bedgraph',
+                indexed: false,
+                graphType: "points",
+                guideLines:
+                    [
+                        {dotted: true, y: 0, color: "green"},
+                        {dotted: true, y: -0.25, color: "blue"},
+                        {dotted: true, y: -0.5, color: "red"}
+                    ]
+            },
+            {
+                name: 'All negative bars',
+                url: '../../test/data/wig/allNegativewig.bedgraph',
+                indexed: false
+            },
+            {
+                name: 'Mixed_pos_neg_points',
+                url: '../../test/data/wig/mixedPosNeg.bedgraph',
+                indexed: false,
+                graphType: "points",
+                guideLines:
+                    [
+                        {dotted: true, y: 0, color: "green"},
+                        {dotted: true, y: -0.5, color: "blue"},
+                        {dotted: true, y: 0.5, color: "red"}
+                    ]
+            },
+            {
+                name: 'Mixed pos neg bars',
+                url: '../../test/data/wig/mixedPosNeg.bedgraph',
+                indexed: false
+            },
+            {
+                name: 'All pos points',
+                url: '../../test/data/wig/allPositive.bedgraph',
+                indexed: false,
+                graphType: "points",
+                guideLines:
+                    [
+                        {dotted: true, y: 0, color: "green"},
+                        {dotted: true, y: 0.25, color: "blue"},
+                        {dotted: true, y: 0.5, color: "red"}
+                    ]
+            },
+            {
+                name: 'All pos bars',
+                url: '../../test/data/wig/allPositive.bedgraph',
+                indexed: false
+            }
+        ]
+    };
+
+
+    igv.createBrowser(document.getElementById('app-container'), bedgraph_options)
+        .then(browser => {
+            console.log(`${ browser.guid } is good to go`)
+
+            document.querySelector('#igv-save-as-png-button').addEventListener('click', () => {
+                browser.savePNGtoFile(`igvjs-screendump-${ browser.guid }.png`)
+            })
+
+        })
+
+</script>
+</html>
diff --git a/js/browser.js b/js/browser.js
@@ -1,4 +1,5 @@
 import $ from "./vendor/jquery-3.3.1.slim.js"
+import html2canvas from '../node_modules/html2canvas/dist/html2canvas.esm.js'
 import {InputDialog, GenericColorPicker} from '../node_modules/igv-ui/dist/igv-ui.js'
 import {BGZip, FileUtils, igvxhr, StringUtils, URIUtils} from "../node_modules/igv-utils/src/index.js"
 import {DOMUtils, Icon} from "../node_modules/igv-ui/dist/igv-ui.js"
@@ -417,6 +418,14 @@ class Browser {
         FileUtils.download(path, data)
     }
 
+    savePNGtoFile(filename) {
+        html2canvas(this.columnContainer, { allowTaint: true }).then(canvas => {
+            const path = filename || 'igvjs.png'
+            const data = canvas.toDataURL('image/png')
+            FileUtils.download(path, data)
+        })
+    }
+
     /**
      * Initialize a session from an object, json, or by loading from a file.
      *

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "build": "node scripts/updateVersion.cjs && node scripts/generateEmbedCss.cjs && npx rollup --config",
     "build_iife": "node scripts/updateVersion.cjs && node scripts/generateEmbedCss.cjs && npx rollup --config rollup.config.iife.js",
     "updateCSS": "node scripts/generateEmbedCss.cjs",
-    "test": "mocha -ui tdd"
+    "test": "node test/utils/forceESM.cjs && mocha -ui tdd"
   },
   "author": {
     "name": "Jim Robinson"
@@ -43,6 +43,7 @@
   },
   "browserslist": "> 1%, not dead",
   "devDependencies": {
+    "html2canvas": "^1.4.1",
     "@rollup/plugin-strip": "^3.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@xmldom/xmldom": "^0.7.9",

diff --git a/test/utils/forceESM.cjs b/test/utils/forceESM.cjs
@@ -0,0 +1,23 @@
+/*
+* Workaround for nodes archaic insistence that es modules have ".mjs" extensions or have "type=module" in package.json.
+* This script will insert "type": "module" into the package.json of listed modules*
+*/
+
+const fs = require('fs')
+
+const packages = ['html2canvas']
+
+for (let p of packages) {
+    forceESM(p)
+}
+function forceESM(packageName) {
+
+    const packageJSON = require(`../../node_modules/${packageName}/package.json`)
+    packageJSON['type'] = 'module'
+
+    const outputFile = require.resolve(`../../node_modules/${packageName}/package.json`)
+    fs.writeFileSync(outputFile, JSON.stringify(packageJSON, null, 2))
+
+
+}
+
diff --git a/test/utils/mockObjects.js b/test/utils/mockObjects.js
@@ -17,6 +17,9 @@ global.document.implementation = new DOMImplementation()    // For jQUery
 global.window = {
     document: global.document,
     setTimeout: function () {
+    },
+    location : {
+        href: ""
     }
 }