From 2373d9027ce8cd842be88d0b71cbea3071639adf Mon Sep 17 00:00:00 2001
From: Asger Hautop Drewsen <asgerdrewsen@gmail.com>
Date: Tue, 13 Apr 2021 10:33:15 +0200
Subject: [PATCH] Add option to pad output image

---
 app.js                       | 22 +++++++++++++++++++---
 static/index.html            | 10 ++++++++--
 static/latex2image-client.js |  9 +++++++--
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index 67a8904..b26081b 100644
--- a/app.js
+++ b/app.js
@@ -80,6 +80,12 @@ conversionRouter.post('/convert', async (req, res) => {
     const equation = req.body.latexInput.trim();
     const fileFormat = req.body.outputFormat.toLowerCase();
     const outputScale = scaleMap[req.body.outputScale];
+    const outputPadding = parseInt(req.body.outputPadding);
+
+    let transparentBackground = req.body.transparentBackground === 'true';
+    if (fileFormat !== 'png') {
+      transparentBackground = false;
+    }
 
     // Generate and write the .tex file
     await fsPromises.mkdir(`${tempDir}/${id}`);
@@ -91,21 +97,31 @@ conversionRouter.post('/convert', async (req, res) => {
     const inputSvgFileName = `${tempDir}/${id}/equation.svg`;
     const outputFileName = `${outputDir}/img-${id}.${fileFormat}`;
 
+    const pad = {
+      top: outputPadding,
+      bottom: outputPadding,
+      left: outputPadding,
+      right: outputPadding,
+      background: { r: 255, b: 255, g: 255, alpha: transparentBackground? 0: 1 },
+    };
+
     // Return the SVG image, no further processing required
     if (fileFormat === 'svg') {
       await fsPromises.copyFile(inputSvgFileName, outputFileName);
 
     // Convert to PNG
     } else if (fileFormat === 'png') {
-      let s = sharp(inputSvgFileName, { density: 96 });
-      if (req.body.transparentBackground === 'false') {
-        s = s.flatten({ background: { r: 255, g: 255, b: 255 } });
+      let s = sharp(inputSvgFileName, { density: 96 })
+        .extend(pad);
+      if (!transparentBackground) {
+        s = s.flatten({ background: { r: 255, g: 255, b: 255 } })
       }
       await s.toFile(outputFileName); // Sharp's PNG type is implicitly determined via the output file extension
 
     // Convert to JPG
     } else {
       await sharp(inputSvgFileName, { density: 96 })
+        .extend(pad)
         .flatten({ background: { r: 255, g: 255, b: 255 } }) // as JPG is not transparent, use a white background
         .jpeg({ quality: 95 })
         .toFile(outputFileName);
diff --git a/static/index.html b/static/index.html
index 3f4f3e2..2daab5b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -32,7 +32,7 @@
                             <textarea class="form-control" id="latexInputTextArea" placeholder="Enter LaTeX math equation" rows="5"></textarea>
                         </div>
                         <div class="form-row">
-                            <div class="col-sm-6">
+                            <div class="col-sm-4">
                                 <div class="form-group">
                                     <label for="outputFormatSelect">Image format</label>
                                     <select class="form-control" id="outputFormatSelect">
@@ -42,7 +42,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="col-sm-6">
+                            <div class="col-sm-4">
                                 <div class="form-group">
                                     <label for="outputScaleSelect">Scale</label>
                                     <select class="form-control" id="outputScaleSelect">
@@ -59,6 +59,12 @@
                                     </select>
                                 </div>
                             </div>
+                            <div class="col-sm-4">
+                                <div class="form-group">
+                                    <label for="outputPaddingNumber">Padding (px)</label>
+                                    <input class="form-control" type="number" id="outputPaddingNumber" value="0" min="0" step="1">
+                                </div>
+                            </div>
                         </div>
                         <div class="form-group">
                             <div class="form-check">
diff --git a/static/latex2image-client.js b/static/latex2image-client.js
index 88007af..a5eb5c8 100644
--- a/static/latex2image-client.js
+++ b/static/latex2image-client.js
@@ -31,7 +31,11 @@ $(document).ready(function() {
     $('#result').slideUp(hasShownBefore ? 330 : 0, afterSlideUp);
   }
 
-  $('#convertButton').click(function() {
+  $('#convertButton').click(convert);
+  $('form').submit(convert);
+
+  function convert(e) {
+    e.preventDefault();
     var latexInput = $('#latexInputTextArea').val();
 
     if (!latexInput) {
@@ -58,6 +62,7 @@ $(document).ready(function() {
         latexInput: latexInput,
         outputFormat: $('#outputFormatSelect').val(),
         outputScale: $('#outputScaleSelect').val(),
+        outputPadding: $('#outputPaddingNumber').val(),
         transparentBackground: $('#transparentBackgroundCheckbox').prop('checked'),
       },
       success: function(data) {
@@ -75,7 +80,7 @@ $(document).ready(function() {
         alert('Error communicating with server');
       }
     });
-  });
+  }
 
   // Show and convert a sample equation
   $('#exampleButton').click(function() {