Eilles/latex2image-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated static site with HTML download-attribute on button & JS formatting

Browse Source
This commit is contained in:
Joseph Rautenbach 2021-01-16 01:05:01 +01:00
parent dd7b5d9d0b
commit 9d44282f81
3 changed files with 86 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/index.html
View File

@ -4,14 +4,14 @@
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Convert LaTeX math equations to PNG/JPG/SVG images">
<meta name="description" content="Convert LaTeX math equations to PNG/JPG/SVG images, with transparent backgrounds and perfect LaTeX rendering">
<meta name="author" content="Joseph Rautenbach">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="latex2image-client.js"></script>
<title>LaTeX2Image – Convert LaTeX math equations to images</title>
<title>LaTeX to image converter</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
@ -21,12 +21,9 @@
</nav>
<div class="container">
<h3>Convert LaTeX math equations to PNG/JPG/SVG images</h3>
<p>LaTeX2Image allows LaTeX math equations to be exported directly to multiple image formats, and saved for use in other documents.</p>
<p>The full <a href="https://github.com/joeraut/latex2image-web">source code is available on GitHub</a>.
Behind the scenes, a Node.js app starts an isolated Docker container with a LaTeX installation for each request,
compiling the generated .tex file and converting it to an SVG vector image. If required, the SVG file is then converted to a raster image format.
<p>LaTeX2Image allows LaTeX math equations to be exported directly to multiple image formats, and saved for use in other documents.<br>
Enter in a LaTeX math equation and click &ldquo;Convert&rdquo;. For a sample expression, click &ldquo;Show Example&rdquo;. <a href="https://github.com/joeraut/latex2image-web" target="_blank">Source code available on GitHub</a>.
</p>
<br>
</div>
<div class="container">
<div class="card">
@ -38,8 +35,8 @@
<div class="form-group col-sm-6">
<label for="outputFormatSelect">Image format</label>
<select class="form-control" id="outputFormatSelect">
<option>PNG</option>
<option selected>SVG</option>
<option selected>PNG</option>
<option>SVG</option>
<option>JPG</option>
</select>
</div>
@ -71,7 +68,7 @@
<div class="card-body">
<img id="resultImage" />
<br><br>
<a href="#" class="btn btn-primary" role="button" id="downloadButton" target="_blank">Save Image</a>
<a href="#" class="btn btn-primary" role="button" id="downloadButton" download>Save Image</a>
</div>
</div>
<div class="alert alert-danger initiallyHidden" id="errorAlert"></div>
@ -80,7 +77,7 @@
<div class="container">
<hr>
<footer>
<p>By <a href="https://joeraut.com">joeraut.com</a>, 2019 | <a href="https://github.com/joeraut/latex2image-web">source code</a></p>
<p>By <a href="https://joeraut.com" target="_blank">joeraut.com</a> | <a href="https://github.com/joeraut/latex2image-web" target="_blank">source code</a></p>
</footer>
</div>
</body>

120
static/latex2image-client.js
View File

@ -2,74 +2,74 @@ var sampleEquation = '\\frac{\\pi}{2} = \\int_{-1}^{1} \\sqrt{1-x^2}\\ dx';
var hasShownBefore = false;
$(document).ready(function() {
function show(resultData) {
function afterSlideUp() {
var resultDataJSON;
if ((resultDataJSON = JSON.parse(resultData)) && !resultDataJSON.error) {
$('#resultImage').attr('src', resultDataJSON.imageURL);
$('#downloadButton').attr('href', resultDataJSON.imageURL);
$('#resultCard').show();
$('#errorAlert').hide();
} else {
$('#errorAlert').text(resultDataJSON.error || 'Invalid response received');
$('#errorAlert').show();
$('#resultCard').hide();
function show(resultData) {
function afterSlideUp() {
var resultDataJSON;
if ((resultDataJSON = JSON.parse(resultData)) && !resultDataJSON.error) {
$('#resultImage').attr('src', resultDataJSON.imageURL);
$('#downloadButton').attr('href', resultDataJSON.imageURL);
$('#resultCard').show();
$('#errorAlert').hide();
} else {
$('#errorAlert').text(resultDataJSON.error || 'Invalid response received');
$('#errorAlert').show();
$('#resultCard').hide();
}
$('#result').slideDown(330);
}
$('#result').slideDown(330);
// Scroll window to bottom
$("html, body").animate({
scrollTop: $(document).height()
}, 1000);
// Scroll window to bottom
$("html, body").animate({
scrollTop: $(document).height()
}, 1000);
hasShownBefore = true;
}
$('#result').slideUp(hasShownBefore ? 330 : 0, afterSlideUp);
hasShownBefore = true;
}
$('#convertButton').click(function() {
if (!$('#latexInputTextArea').val()) {
show(JSON.stringify({
error: 'No LaTeX input provided'
}));
return;
}
$('#result').slideUp(hasShownBefore ? 330 : 0, afterSlideUp);
}
$('#result').slideUp(hasShownBefore ? 330 : 0, function() {
$('#resultImage').attr('src', '');
});
$('#convertButton').click(function() {
if (!$('#latexInputTextArea').val()) {
show(JSON.stringify({
error: 'No LaTeX input provided'
}));
return;
}
$('#convertButton').prop('disabled', true);
$('#exampleButton').prop('disabled', true);
$('#convertButton').prop('value', 'Converting...');
$.ajax({
url: '/convert',
type: 'POST',
data: {
latexInput: $('#latexInputTextArea').val(),
outputFormat: $('#outputFormatSelect').val(),
outputScale: $('#outputScaleSelect').val()
},
success: function(data) {
$('#convertButton').prop('disabled', false);
$('#exampleButton').prop('disabled', false);
$('#convertButton').prop('value', 'Convert');
show(data);
},
error: function() {
$('#convertButton').prop('disabled', false);
$('#exampleButton').prop('disabled', false);
$('#convertButton').prop('value', 'Convert');
alert('Error communicating with server');
}
});
$('#result').slideUp(hasShownBefore ? 330 : 0, function() {
$('#resultImage').attr('src', '');
});
// Show and convert a sample equation
$('#exampleButton').click(function() {
$('#latexInputTextArea').val(sampleEquation);
$('#convertButton').click();
$('#convertButton').prop('disabled', true);
$('#exampleButton').prop('disabled', true);
$('#convertButton').prop('value', 'Converting...');
$.ajax({
url: '/convert',
type: 'POST',
data: {
latexInput: $('#latexInputTextArea').val(),
outputFormat: $('#outputFormatSelect').val(),
outputScale: $('#outputScaleSelect').val()
},
success: function(data) {
$('#convertButton').prop('disabled', false);
$('#exampleButton').prop('disabled', false);
$('#convertButton').prop('value', 'Convert');
show(data);
},
error: function() {
$('#convertButton').prop('disabled', false);
$('#exampleButton').prop('disabled', false);
$('#convertButton').prop('value', 'Convert');
alert('Error communicating with server');
}
});
});
// Show and convert a sample equation
$('#exampleButton').click(function() {
$('#latexInputTextArea').val(sampleEquation);
$('#convertButton').click();
});
});

28
static/logo.svg
View File

@ -1,9 +1,8 @@
<?xml version='1.0'?>
<!-- This file was generated by dvisvgm 1.9.2 -->
<svg height='16.4812pt' version='1.1' viewBox='84.6199 86.0095 106.994 16.4812' width='106.994pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<svg height='16.4812pt' version='1.1' viewBox='290.767 125.611 116.999 16.4812' width='116.999pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M3.37136 -5.51532C3.33151 -5.61893 3.3076 -5.69066 3.1721 -5.69066C3.02864 -5.69066 3.00473 -5.6269 2.96488 -5.51532L1.18755 -0.820922C1.10785 -0.605729 0.940473 -0.263014 0.286924 -0.263014V0C0.541968 -0.0239103 0.964384 -0.0239103 1.10785 -0.0239103C1.36289 -0.0239103 1.60199 -0.0239103 1.99253 0V-0.263014C1.64184 -0.270984 1.43462 -0.430386 1.43462 -0.661519C1.43462 -0.71731 1.43462 -0.73325 1.47447 -0.828892L1.84907 -1.82516H4.01694L4.46326 -0.645579C4.50311 -0.549938 4.50311 -0.518057 4.50311 -0.502117C4.50311 -0.263014 4.08867 -0.263014 3.8655 -0.263014V0C4.54296 -0.0239103 4.5589 -0.0239103 4.99726 -0.0239103C5.44359 -0.0239103 5.58705 -0.0239103 6.04932 0V-0.263014H5.91382C5.41171 -0.263014 5.332 -0.334745 5.23636 -0.589788L3.37136 -5.51532ZM2.933 -4.6944L3.91333 -2.08817H1.94471L2.933 -4.6944Z' id='g0-65'/>
<path d='M5.26027 -2.00847H4.99726C4.96139 -1.80523 4.86575 -1.1477 4.7462 -0.956413C4.66252 -0.848817 3.98107 -0.848817 3.62242 -0.848817H1.41071C1.7335 -1.12379 2.46276 -1.88892 2.7736 -2.17584C4.59078 -3.84956 5.26027 -4.47123 5.26027 -5.65479C5.26027 -7.02964 4.17235 -7.95019 2.78555 -7.95019S0.585803 -6.76663 0.585803 -5.73848C0.585803 -5.12877 1.11183 -5.12877 1.1477 -5.12877C1.39875 -5.12877 1.70959 -5.30809 1.70959 -5.69066C1.70959 -6.0254 1.48244 -6.25255 1.1477 -6.25255C1.0401 -6.25255 1.01619 -6.25255 0.980324 -6.2406C1.20747 -7.05355 1.85305 -7.60349 2.63014 -7.60349C3.64633 -7.60349 4.268 -6.75467 4.268 -5.65479C4.268 -4.63861 3.68219 -3.75392 3.00075 -2.98879L0.585803 -0.286924V0H4.94944L5.26027 -2.00847Z' id='g1-50'/>
<path d='M7.6274 -3.06052H7.36438C7.07746 -1.19552 6.79054 -0.3467 4.77011 -0.3467H3.14421C2.61818 -0.3467 2.59427 -0.430386 2.59427 -0.824907V-4.0528H3.68219C4.82989 -4.0528 4.96139 -3.68219 4.96139 -2.65405H5.22441V-5.79826H4.96139C4.96139 -4.77011 4.82989 -4.3995 3.68219 -4.3995H2.59427V-7.31656C2.59427 -7.71108 2.61818 -7.79477 3.14421 -7.79477H4.73425C6.49166 -7.79477 6.86227 -7.19701 7.04159 -5.47547H7.30461L6.99377 -8.14147H0.490162V-7.79477H0.729265C1.59004 -7.79477 1.6259 -7.67522 1.6259 -7.23288V-0.908593C1.6259 -0.466252 1.59004 -0.3467 0.729265 -0.3467H0.490162V0H7.14919L7.6274 -3.06052Z' id='g1-69'/>
<path d='M2.59427 -7.25679C2.59427 -7.69913 2.63014 -7.81868 3.52677 -7.81868H3.78979V-8.16538C3.50286 -8.14147 2.47472 -8.14147 2.11606 -8.14147S0.71731 -8.14147 0.430386 -8.16538V-7.81868H0.6934C1.59004 -7.81868 1.6259 -7.69913 1.6259 -7.25679V-0.908593C1.6259 -0.466252 1.59004 -0.3467 0.6934 -0.3467H0.430386V0C0.71731 -0.0239103 1.74545 -0.0239103 2.10411 -0.0239103S3.50286 -0.0239103 3.78979 0V-0.3467H3.52677C2.63014 -0.3467 2.59427 -0.466252 2.59427 -0.908593V-7.25679Z' id='g1-73'/>
<path d='M6.81445 -3.06052H6.55143C6.43188 -1.86501 6.27646 -0.3467 4.18431 -0.3467H3.14421C2.61818 -0.3467 2.59427 -0.430386 2.59427 -0.824907V-7.24483C2.59427 -7.67522 2.61818 -7.81868 3.65828 -7.81868H4.01694V-8.16538C3.67024 -8.14147 2.61818 -8.14147 2.19975 -8.14147C1.8411 -8.14147 0.777086 -8.14147 0.490162 -8.16538V-7.81868H0.729265C1.59004 -7.81868 1.6259 -7.69913 1.6259 -7.25679V-0.908593C1.6259 -0.466252 1.59004 -0.3467 0.729265 -0.3467H0.490162V0H6.50361L6.81445 -3.06052Z' id='g1-76'/>
@ -13,18 +12,21 @@
<path d='M4.57883 -2.7736C4.84184 -2.7736 4.86575 -2.7736 4.86575 -3.00075C4.86575 -4.20822 4.22017 -5.332 2.7736 -5.332C1.41071 -5.332 0.358655 -4.10062 0.358655 -2.61818C0.358655 -1.0401 1.57808 0.119552 2.90511 0.119552C4.32777 0.119552 4.86575 -1.17161 4.86575 -1.42267C4.86575 -1.4944 4.80598 -1.54222 4.73425 -1.54222C4.63861 -1.54222 4.61469 -1.48244 4.59078 -1.42267C4.27995 -0.418431 3.47895 -0.143462 2.97684 -0.143462S1.26725 -0.478207 1.26725 -2.54645V-2.7736H4.57883ZM1.2792 -3.00075C1.37484 -4.87771 2.4269 -5.0929 2.76164 -5.0929C4.04085 -5.0929 4.11258 -3.40722 4.12453 -3.00075H1.2792Z' id='g1-101'/>
<path d='M1.42267 -2.16389C1.98456 -1.79328 2.46276 -1.79328 2.59427 -1.79328C3.67024 -1.79328 4.47123 -2.60623 4.47123 -3.52677C4.47123 -3.84956 4.37559 -4.30386 3.99303 -4.68643C4.45928 -5.16463 5.02117 -5.16463 5.08095 -5.16463C5.12877 -5.16463 5.18854 -5.16463 5.23636 -5.14072C5.11681 -5.0929 5.05704 -4.97335 5.05704 -4.84184C5.05704 -4.67447 5.17659 -4.53101 5.36787 -4.53101C5.46351 -4.53101 5.6787 -4.59078 5.6787 -4.8538C5.6787 -5.06899 5.51133 -5.40374 5.0929 -5.40374C4.47123 -5.40374 4.00498 -5.02117 3.83761 -4.84184C3.47895 -5.11681 3.06052 -5.27223 2.60623 -5.27223C1.53026 -5.27223 0.729265 -4.45928 0.729265 -3.53873C0.729265 -2.85729 1.1477 -2.41494 1.26725 -2.30735C1.12379 -2.12802 0.908593 -1.78132 0.908593 -1.31507C0.908593 -0.621669 1.32702 -0.32279 1.42267 -0.263014C0.872727 -0.107597 0.32279 0.32279 0.32279 0.944458C0.32279 1.76936 1.44658 2.45081 2.91706 2.45081C4.33973 2.45081 5.52329 1.81719 5.52329 0.920548C5.52329 0.621669 5.4396 -0.0836862 4.72229 -0.454296C4.11258 -0.765131 3.51482 -0.765131 2.48667 -0.765131C1.75741 -0.765131 1.67372 -0.765131 1.45853 -0.992279C1.33898 -1.11183 1.23138 -1.33898 1.23138 -1.59004C1.23138 -1.79328 1.30311 -1.99651 1.42267 -2.16389ZM2.60623 -2.04433C1.55417 -2.04433 1.55417 -3.25181 1.55417 -3.52677C1.55417 -3.74197 1.55417 -4.23213 1.75741 -4.55492C1.98456 -4.90162 2.34321 -5.02117 2.59427 -5.02117C3.64633 -5.02117 3.64633 -3.8137 3.64633 -3.53873C3.64633 -3.32354 3.64633 -2.83337 3.44309 -2.51059C3.21594 -2.16389 2.85729 -2.04433 2.60623 -2.04433ZM2.92902 2.19975C1.78132 2.19975 0.908593 1.61395 0.908593 0.932503C0.908593 0.836862 0.932503 0.37061 1.3868 0.0597758C1.64981 -0.107597 1.75741 -0.107597 2.59427 -0.107597C3.58655 -0.107597 4.93748 -0.107597 4.93748 0.932503C4.93748 1.63786 4.02889 2.19975 2.92902 2.19975Z' id='g1-103'/>
<path d='M8.57186 -2.90511C8.57186 -4.01694 8.57186 -4.35168 8.29689 -4.73425C7.95019 -5.2005 7.38829 -5.27223 6.98182 -5.27223C5.98954 -5.27223 5.48742 -4.55492 5.29614 -4.08867C5.12877 -5.00922 4.48319 -5.27223 3.73001 -5.27223C2.57036 -5.27223 2.11606 -4.27995 2.02042 -4.04085H2.00847V-5.27223L0.382565 -5.14072V-4.79402C1.19552 -4.79402 1.29116 -4.71034 1.29116 -4.12453V-0.884682C1.29116 -0.3467 1.15965 -0.3467 0.382565 -0.3467V0C0.6934 -0.0239103 1.33898 -0.0239103 1.67372 -0.0239103C2.02042 -0.0239103 2.666 -0.0239103 2.97684 0V-0.3467C2.21171 -0.3467 2.06824 -0.3467 2.06824 -0.884682V-3.10834C2.06824 -4.36364 2.89315 -5.03313 3.63437 -5.03313S4.54296 -4.42341 4.54296 -3.69415V-0.884682C4.54296 -0.3467 4.41146 -0.3467 3.63437 -0.3467V0C3.94521 -0.0239103 4.59078 -0.0239103 4.92553 -0.0239103C5.27223 -0.0239103 5.91781 -0.0239103 6.22864 0V-0.3467C5.46351 -0.3467 5.32005 -0.3467 5.32005 -0.884682V-3.10834C5.32005 -4.36364 6.14496 -5.03313 6.88618 -5.03313S7.79477 -4.42341 7.79477 -3.69415V-0.884682C7.79477 -0.3467 7.66326 -0.3467 6.88618 -0.3467V0C7.19701 -0.0239103 7.84259 -0.0239103 8.17733 -0.0239103C8.52403 -0.0239103 9.16961 -0.0239103 9.48045 0V-0.3467C8.88269 -0.3467 8.58381 -0.3467 8.57186 -0.705355V-2.90511Z' id='g1-109'/>
<path d='M5.48742 -2.55841C5.48742 -4.10062 4.31582 -5.332 2.92902 -5.332C1.4944 -5.332 0.358655 -4.06476 0.358655 -2.55841C0.358655 -1.02814 1.55417 0.119552 2.91706 0.119552C4.32777 0.119552 5.48742 -1.05205 5.48742 -2.55841ZM2.92902 -0.143462C2.48667 -0.143462 1.94869 -0.334745 1.60199 -0.920548C1.2792 -1.45853 1.26725 -2.16389 1.26725 -2.666C1.26725 -3.1203 1.26725 -3.84956 1.63786 -4.38755C1.9726 -4.90162 2.49863 -5.0929 2.91706 -5.0929C3.38331 -5.0929 3.88543 -4.87771 4.20822 -4.41146C4.57883 -3.86152 4.57883 -3.10834 4.57883 -2.666C4.57883 -2.24757 4.57883 -1.50635 4.268 -0.944458C3.93325 -0.37061 3.38331 -0.143462 2.92902 -0.143462Z' id='g1-111'/>
<path d='M2.00847 -4.80598H3.69415V-5.15268H2.00847V-7.35243H1.74545C1.7335 -6.22864 1.30311 -5.08095 0.215193 -5.04508V-4.80598H1.23138V-1.48244C1.23138 -0.155417 2.11606 0.119552 2.74969 0.119552C3.50286 0.119552 3.89738 -0.621669 3.89738 -1.48244V-2.16389H3.63437V-1.50635C3.63437 -0.645579 3.28767 -0.143462 2.82142 -0.143462C2.00847 -0.143462 2.00847 -1.25529 2.00847 -1.45853V-4.80598Z' id='g1-116'/>
</defs>
<g id='page1' transform='matrix(1.5 0 0 1.5 0 0)'>
<use x='56.4133' xlink:href='#g1-76' y='65.7534'/>
<use x='59.486' xlink:href='#g0-65' y='63.0303'/>
<use x='64.0731' xlink:href='#g1-84' y='65.7534'/>
<use x='70.5444' xlink:href='#g1-69' y='68.3271'/>
<use x='77.0457' xlink:href='#g1-88' y='65.7534'/>
<use x='88.6229' xlink:href='#g1-50' y='65.7534'/>
<use x='97.2887' xlink:href='#g1-73' y='65.7534'/>
<use x='101.496' xlink:href='#g1-109' y='65.7534'/>
<use x='111.214' xlink:href='#g1-97' y='65.7534'/>
<use x='117.046' xlink:href='#g1-103' y='65.7534'/>
<use x='122.877' xlink:href='#g1-101' y='65.7534'/>
<use x='193.844' xlink:href='#g1-76' y='92.1544'/>
<use x='196.917' xlink:href='#g0-65' y='89.4313'/>
<use x='201.504' xlink:href='#g1-84' y='92.1544'/>
<use x='207.976' xlink:href='#g1-69' y='94.7281'/>
<use x='214.477' xlink:href='#g1-88' y='92.1544'/>
<use x='227.121' xlink:href='#g1-116' y='92.1544'/>
<use x='231.657' xlink:href='#g1-111' y='92.1544'/>
<use x='241.39' xlink:href='#g1-73' y='92.1544'/>
<use x='245.597' xlink:href='#g1-109' y='92.1544'/>
<use x='255.316' xlink:href='#g1-97' y='92.1544'/>
<use x='261.147' xlink:href='#g1-103' y='92.1544'/>
<use x='266.978' xlink:href='#g1-101' y='92.1544'/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB