diff --git a/client/package.json b/client/package.json index 053fc60a063..6abebc8f2eb 100644 --- a/client/package.json +++ b/client/package.json @@ -36,7 +36,9 @@ "decode-uri-component": "^0.2.0", "deep-diff": "^1.0.2", "deep-equal": "^2.0.5", + "dom-to-image": "^2.6.0", "elkjs": "^0.6.2", + "file-saver": "^2.0.5", "flush-promises": "^1.0.2", "glob": "^7.1.6", "handsontable": "^2.0.0", @@ -51,6 +53,7 @@ "jquery-ui": "^1.12.1", "jquery.complexify": "^0.5.2", "jquery.cookie": "^1.4.1", + "jspdf": "^2.4.0", "linkifyjs": "^2.1.9", "markdown-it": "^11.0.0", "markdown-it-regexp": "^0.4.0", diff --git a/client/src/mvc/visualization/chart/components/screenshot.js b/client/src/mvc/visualization/chart/components/screenshot.js index 506982d1f0b..c352d24580c 100644 --- a/client/src/mvc/visualization/chart/components/screenshot.js +++ b/client/src/mvc/visualization/chart/components/screenshot.js @@ -1,203 +1,41 @@ /** This class enables users to export/download a chart as PNG, SVG or PDF. */ -/** PNG export */ -import $ from "jquery"; +import domtoimage from "dom-to-image"; +import { saveAs } from "file-saver"; +import { jsPDF } from "jspdf"; -function createPNG(options) { - if (options.$el.find("svg").length > 0) { - _svg2png(options); - } else { - _canvas2png(options); - } -} - -function _downloadData(imageData, filename) { - const link = document.createElement("a"); - link.download = filename; - link.href = imageData; - link.click(); -} -function _downloadPNGData(imageData, filename) { - _downloadData(imageData.replace("image/png", "image/octet-stream"), `${filename || "GalaxyImage"}.png`); -} - -function _toImage($el, x_offset, y_offset, newContext) { - var tagname = $el.prop("tagName").toLowerCase(); - var p = $el.position(); - var left = - x_offset + - p.left + - parseInt($el.css("marginLeft"), 10) + - parseInt($el.css("borderLeftWidth"), 10) + - parseInt($el.css("paddingLeft"), 10); - var top = - y_offset + - p.top + - parseInt($el.css("marginTop"), 10) + - parseInt($el.css("borderTopWidth"), 10) + - parseInt($el.css("paddingTop"), 10); - if (tagname == "div" || tagname == "span") { - $el.children().each(function () { - _toImage($(this), left, top); - }); - } else if (tagname == "canvas") { - newContext.drawImage($el[0], left, top); - } -} - -/** Convert canvas to png */ -function _canvas2png(options) { - const $canvas = options.$el.find(".charts-viewer-canvas"); - try { - if ($canvas.width() !== 0 && $canvas.height() !== 0) { - var newCanvas = document.createElement("canvas"); - newCanvas.width = $canvas.outerWidth(true); - newCanvas.height = $canvas.outerHeight(true); - var newContext = newCanvas.getContext("2d"); - newContext.save(); - newContext.fillStyle = "rgb(255,255,255)"; - newContext.fillRect(0, 0, newCanvas.width, newCanvas.height); - newContext.restore(); - newContext.translate(0, 0); - newContext.textAlign = "left"; - newContext.textBaseline = "top"; - $canvas.children().each(function () { - _toImage($(this), 0, 0, newContext); - }); - const imgData = newCanvas.toDataURL("image/png"); - if (imgData) { - _downloadPNGData(imgData, options.title); - } - } - } catch (err) { - console.debug("FAILED - screenshot::_canvas2png() - " + err); - if (options.error) { - options.error("Please reduce your visualization to a single panel and try again."); - } - } -} - -/** Convert svg to png */ -function _svg2png(options) { - var scale = 5; - var xml = toXML(options); - var canvas = document.createElement("canvas"); - var context = canvas.getContext("2d"); - var source = new Image(); - var $container = $('
').append($(canvas)); - $("body").append($container); - canvas.width = xml.width * scale; - canvas.height = xml.height * scale; - source.src = "data:image/svg+xml;base64," + window.btoa(xml.string); - source.onload = function () { - context.drawImage(source, 0, 0, canvas.width, canvas.height); - const imageData = canvas.toDataURL("image/png"); - _downloadPNGData(imageData, options.title); - $container.remove(); - }; -} - -/** SVG export */ -function createSVG(options) { - const imageData = `data:none/none;base64,${window.btoa(toXML(options).string)}`; - const filename = `${options.title || "GalaxyImage"}.svg`; - _downloadData(imageData, filename); -} - -/** PDF export */ -function createPDF(options) { - var xml = toXML(options); - var data = { - filename: "visualization", - type: "application/pdf", - height: xml.height, - width: xml.width, - scale: 2, - svg: xml.string, - }; - var $el = $("body"); - var form = $el.find("#viewer-form"); - if (form.length === 0) { - form = $("