Merge 2373d9027ce8cd842be88d0b71cbea3071639adf into f077a800f9ae89ee21d2421872344c5723fabd02

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,18 +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') {
-      await sharp(inputSvgFileName, { density: 96 })
-        .toFile(outputFileName); // Sharp's PNG type is implicitly determined via the output file extension
+      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);

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">
@@ -68,6 +74,14 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="transparentBackgroundCheckbox" checked>
+                                <label class="form-check-label" for="transparentBackgroundCheckbox">
+                                  Transparent background (for PNG)
+                                </label>
+                            </div>
+                        </div>
                         <button class="btn btn-primary" type="button" id="convertButton">
                             <span class="spinner-grow spinner-grow-sm d-none" role="status" aria-hidden="true" id="convertSpinner"></span>
                             <span id="convertButtonText">Convert</span>

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) {
@@ -57,7 +61,9 @@ $(document).ready(function() {
       data: {
         latexInput: latexInput,
         outputFormat: $('#outputFormatSelect').val(),
-        outputScale: $('#outputScaleSelect').val()
+        outputScale: $('#outputScaleSelect').val(),
+        outputPadding: $('#outputPaddingNumber').val(),
+        transparentBackground: $('#transparentBackgroundCheckbox').prop('checked'),
       },
       success: function(data) {
         $('#convertButton').prop('disabled', false);
@@ -74,7 +80,7 @@ $(document).ready(function() {
         alert('Error communicating with server');
       }
     });
-  });
+  }
 
   // Show and convert a sample equation
   $('#exampleButton').click(function() {