Add Save as PDF option (#1349)

* Add Save as PDF option

* Edit coments for consistency

Edits follow the JSDoc guidelines. Comments begin with a capital letter and end with a period.

examples/demo.js

@@ -115,6 +115,8 @@ window.onload = function () {
     }
     else if (dropDownValue == 'save-seq') {
       saveSequence();
+    } else if(dropDownValue == 'save-pdf') {
+      savePDF(getLastImage());
     }
   });
 
@@ -207,6 +209,44 @@ window.onload = function () {
     });
   }
 
+  /**
+  * Get the data URL for the last image in the sequence.
+  * @return {string} The data URL for the last image in the sequence.
+  */
+  function getLastImage() {
+    // Get the image from the last step.
+    let imgs = document.getElementsByClassName('step-thumbnail');
+    let lastStepImage = imgs[imgs.length-1];
+    return lastStepImage.getAttribute("src");
+  }
+
+  /**
+  * Download the given image URL as a PDF file.
+  * @param {string} imageDataURL - The data URL for the image.
+  */
+  function savePDF(imageDataURL) {
+    sequencer.getImageDimensions(imageDataURL, function(dimensions) {
+      // Get the dimensions of the image.
+      let pageWidth = dimensions.width;
+      let pageHeight = dimensions.height;
+
+      // Create a new pdf with the same dimensions as the image.
+      const pdf = new jsPDF({
+        orientation: pageHeight > pageWidth ? "portrait": "landscape",
+        unit: "px",
+        format: [pageHeight, pageWidth]
+      });
+
+      // Add the image to the pdf with dimensions equal to the internal dimensions of the page.
+      pdf.addImage(imageDataURL, 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
+
+      // Save the pdf with the filename specified here:
+      pdf.save("index.pdf");
+    });
+  }
+
+
+
   function downloadGif(image) {
     download(image, 'index.gif', 'image/gif');// downloadjs library function
   }

examples/index.html

@@ -33,7 +33,10 @@
   <script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
 
   <!-- Download.js for large files -->
-  <script src="../node_modules/downloadjs/download.min.js" type="text/javascript" />
+  <script src="../node_modules/downloadjs/download.min.js" type="text/javascript" ></script>
+
+  <!-- jspdf to enable save image as pdf -->
+  <script src="../node_modules/jspdf/dist/jspdf.min.js" type="text/javascript" ></script>
 
   <script src="lib/scrollToTop.js"></script>
   <script src="../node_modules/selectize/dist/js/standalone/selectize.min.js"></script>
@@ -190,6 +193,7 @@ <h2 style="margin-top:20px">Save</h2>
                 <select class="form-control input-md mouse" id="selectSaveOption" style="margin-top:20px">
                   <option value="save-image">Save as PNG</option>
                   <option value="save-gif">Save as GIF (all steps)</option>
+                  <option value="save-pdf">Save as PDF</option>
                   <option value="save-seq">Save sequence</option>
                   <option value="save-seq-string">Save sequence string</option>
                 </select>

package.json

@@ -57,6 +57,7 @@
     "jasmine": "^3.4.0",
     "jquery": "^3.3.1",
     "jsdom": "^15.0.0",
+    "jspdf": "^1.5.3",
     "jsqr": "^1.1.1",
     "lodash": "^4.17.11",
     "ndarray": "^1.0.18",