Merge 2373d9027ce8cd842be88d0b71cbea3071639adf into f077a800f9ae89ee21d2421872344c5723fabd02

This commit is contained in:
Asger Hautop Drewsen 2021-04-13 10:34:27 +02:00 committed by GitHub
commit edc1ed7f8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 7 deletions

23
app.js
View File

@ -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);

View File

@ -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>

View File

@ -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() {