From 3c98b235a6ebeb252cb190e93e967493a93ae665 Mon Sep 17 00:00:00 2001 From: Douglass Turner Date: Mon, 14 Aug 2023 01:59:39 -0400 Subject: [PATCH] git issue 1665 png output (#1668) * Save as PNG --------- Co-authored-by: jrobinso <933148+jrobinso@users.noreply.github.com> --- dev/misc/png.html | 103 ++++++++++++++++++++++++++++++++++++++ js/browser.js | 9 ++++ package.json | 3 +- test/utils/forceESM.cjs | 23 +++++++++ test/utils/mockObjects.js | 3 ++ 5 files changed, 140 insertions(+), 1 deletion(-) create mode 100644 dev/misc/png.html create mode 100644 test/utils/forceESM.cjs diff --git a/dev/misc/png.html b/dev/misc/png.html new file mode 100644 index 000000000..72386abc8 --- /dev/null +++ b/dev/misc/png.html @@ -0,0 +1,103 @@ + + + + + + PNG Output Demo + + + + + + +
+
+
+ +
+ +
+ +
+
+ + + + + diff --git a/js/browser.js b/js/browser.js index a16986820..b51204d09 100755 --- 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 index ba7bf3152..cd6a37acc 100644 --- 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 new file mode 100644 index 000000000..5fff3d99c --- /dev/null +++ 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 index bb2fdd8da..35e18f66d 100644 --- 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: "" } }