Switch to white background during export

* Defaulted background option to white for PNG/JPG export

* Attempt at fixing background colour on image output

* Reverted build location change

* WIP for white background

* WIP for white background

* Updating default colour, including saving of existing colour to restore appropriately

* Fix tests and move css change background outside the try block

* keep consistent with american english

* add method to change background color and test wether it has been called with the right params

* change color to original when save fails

Fixes #1422

platform/features/plot/src/services/ExportImageService.js

@@ -43,7 +43,7 @@ define(
          * @param {constant} EXPORT_IMAGE_TIMEOUT time in milliseconds before a timeout error is returned
          * @constructor
          */
-        function ExportImageService($q, $timeout, $log, EXPORT_IMAGE_TIMEOUT, injHtml2Canvas, injSaveAs, injFileReader) {
+        function ExportImageService($q, $timeout, $log, EXPORT_IMAGE_TIMEOUT, injHtml2Canvas, injSaveAs, injFileReader, injChangeBackgroundColor) {
             self.$q = $q;
             self.$timeout = $timeout;
             self.$log = $log;
@@ -51,6 +51,7 @@ define(
             self.html2canvas = injHtml2Canvas || html2canvas;
             self.saveAs = injSaveAs || saveAs;
             self.reader = injFileReader || new FileReader();
+            self.changeBackgroundColor = injChangeBackgroundColor || self.changeBackgroundColor;
         }
 
         /**
@@ -63,13 +64,20 @@ define(
         function renderElement(element, type) {
             var defer = self.$q.defer(),
                 validTypes = ["png", "jpg", "jpeg"],
-                renderTimeout;
+                renderTimeout,
+                originalColor;
 
             if (validTypes.indexOf(type) === -1) {
                 self.$log.error("Invalid type requested. Try: (" + validTypes.join(",") + ")");
                 return;
             }
 
+            // Save color to be restored later
+            originalColor = element.style.backgroundColor || '';
+
+            // Defaulting to white so we can see the chart when printed
+            self.changeBackgroundColor(element, 'white');
+
             renderTimeout = self.$timeout(function () {
                 defer.reject("html2canvas timed out");
                 self.$log.warn("html2canvas timed out");
@@ -78,13 +86,13 @@ define(
             try {
                 self.html2canvas(element, {
                     onrendered: function (canvas) {
+                        self.changeBackgroundColor(element, originalColor);
+
                         switch (type.toLowerCase()) {
                             case "png":
                                 canvas.toBlob(defer.resolve, "image/png");
                                 break;
 
-                            default:
-                            case "jpg":
                             case "jpeg":
                                 canvas.toBlob(defer.resolve, "image/jpeg");
                                 break;
@@ -96,7 +104,10 @@ define(
                 self.$log.warn("html2canvas failed with error: " + e);
             }
 
-            defer.promise.finally(renderTimeout.cancel);
+            defer.promise.finally(function () {
+                renderTimeout.cancel();
+                self.changeBackgroundColor(element, originalColor);
+            });
 
             return defer.promise;
         }
@@ -125,6 +136,13 @@ define(
             }
         }
 
+        /**
+         * @private
+         */
+        self.changeBackgroundColor = function (element, color) {
+            element.style.backgroundColor = color;
+        };
+
         /**
          * Takes a screenshot of a DOM node and exports to JPG.
          * @param {node} element to be exported

platform/features/plot/test/services/ExportImageServiceSpec.js

@@ -37,7 +37,8 @@ define(
             mockFileReader,
             mockExportTimeoutConstant,
             testElement,
-            exportImageService;
+            exportImageService,
+            mockChangeBackgroundColor;
 
         describe("ExportImageService", function () {
             beforeEach(function () {
@@ -83,7 +84,9 @@ define(
                     ["readAsDataURL", "onloadend"]
                 );
                 mockExportTimeoutConstant = 0;
-                testElement = {};
+                testElement = {style: {backgroundColor: 'black'}};
+
+                mockChangeBackgroundColor = jasmine.createSpy('changeBackgroundColor');
 
                 exportImageService = new ExportImageService(
                     mockQ,
@@ -92,7 +95,8 @@ define(
                     mockExportTimeoutConstant,
                     mockHtml2Canvas,
                     mockSaveAs,
-                    mockFileReader
+                    mockFileReader,
+                    mockChangeBackgroundColor
                 );
             });
 
@@ -115,6 +119,18 @@ define(
                 expect(mockSaveAs).toHaveBeenCalled();
                 expect(mockPromise.finally).toHaveBeenCalled();
             });
+
+            it("changes background color to white and returns color back to original after snapshot, for better visibility of plot lines on print", function () {
+                exportImageService.exportPNG(testElement, "plot.png");
+
+                expect(mockChangeBackgroundColor).toHaveBeenCalledWith(testElement, 'white');
+                expect(mockChangeBackgroundColor).toHaveBeenCalledWith(testElement, 'black');
+
+                exportImageService.exportJPG(testElement, "plot.jpg");
+
+                expect(mockChangeBackgroundColor).toHaveBeenCalledWith(testElement, 'white');
+                expect(mockChangeBackgroundColor).toHaveBeenCalledWith(testElement, 'black');
+            });
         });
     }
 );