Merge 2373d9027ce8cd842be88d0b71cbea3071639adf into f077a800f9ae89ee21d2421872344c5723fabd02
This commit is contained in:
commit
edc1ed7f8c
23
app.js
23
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);
|
||||
|
@ -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>
|
||||
|
@ -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() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user