aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added SVG to PNG conversion tool, Added tool page and code

Browse Source 
Update .gitignore, sidebar.php, and 17 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-05-26 05:50:37 +02:00
parent e6e00ad02f
commit 6e9bf25866
19 changed files with 559 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
tools/items/svg-to-png/code.js Normal file
View File

@@ -0,0 +1,70 @@
document.addEventListener("DOMContentLoaded", () => {
const eInputFiles = document.getElementById("tool-svg-to-png-files");
const eFileSelectButton = document.getElementById("tool-svg-to-png-btn-select");
const eTextNoFiles = document.getElementById("tool-svg-to-png-text-none");
const eTextHasFiles = document.getElementById("tool-svg-to-png-text-good");
const eTextFileCount = document.getElementById("tool-svg-to-png-file-count");
const eInputWidth = document.getElementById("tool-svg-to-png-width");
const eInputHeight = document.getElementById("tool-svg-to-png-height");
const eFileConvertButton = document.getElementById("tool-svg-to-png-btn-convert");
// Propagating the button click to the input element
eFileSelectButton.onclick = function () {
eInputFiles.click();
}
// Handling file selection
eInputFiles.addEventListener('change', function(e) {
eTextNoFiles.hidden = true;
eTextHasFiles.hidden = true;
eTextFileCount.innerText = e.target.files.length.toString();
if(e.target.files.length > 0) {
eTextHasFiles.hidden = false;
} else {
eTextNoFiles.hidden = false;
}
});
// Handling conversion
eFileConvertButton.onclick = function () {
const canvas = document.getElementById('conversion-canvas');
const ctx = canvas.getContext('2d');
if(eInputFiles.files.length === 0) {
console.error("No files selected !");
return
}
canvas.width = parseInt(eInputWidth.value);
canvas.height = parseInt(eInputHeight.value);
for(let iFile = 0; iFile < eInputFiles.files.length; iFile++) {
const imageFile = eInputFiles.files[iFile];
const fileReader = new FileReader();
console.log("Handling: " + imageFile.name);
fileReader.onload = (function(file) {
return function(e) {
const image = new Image();
image.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = imageFile.name.replace(".svg", ".png");
link.href = dataURL;
link.click();
};
image.src = e.target.result; // Set the image source
};
})(imageFile);
fileReader.readAsDataURL(imageFile);
}
}
});

32
tools/items/svg-to-png/lang.json Normal file
View File

@@ -0,0 +1,32 @@
{
"en": {
"tool.svg-to-png.title": "SVG to PNG Converter",
"tool.svg-to-png.input.title": "File selection",
"tool.svg-to-png.options.title": "Options",
"tool.svg-to-png.output.title": "Output",
"tool.svg-to-png.text.no.files": "No files selected.",
"tool.svg-to-png.text.has.files": "You selected <span id=\"tool-svg-to-png-file-count\"></span> file(s).",
"tool.svg-to-png.select.files": "Select File(s)",
"tool.svg-to-png.files": "File(s)",
"tool.svg-to-png.width": "Width",
"tool.svg-to-png.height": "Height",
"tool.svg-to-png.convert": "Convert image(s)"
},
"fr": {
"tool.svg-to-png.title": "Convertisseur SVG vers PNG",
"tool.svg-to-png.input.title": "Selection de fichier(s)",
"tool.svg-to-png.options.title": "Options",
"_tool.svg-to-png.output.title": "",
"tool.svg-to-png.text.no.files": "Aucun fichier sélectionné.",
"tool.svg-to-png.text.has.files": "Vous avez sélectionné <span id=\"tool-svg-to-png-file-count\"></span> fichier(s).",
"tool.svg-to-png.select.files": "Sélection de Fichier(s)",
"tool.svg-to-png.files": "Fichier(s)",
"tool.svg-to-png.width": "Largeur",
"tool.svg-to-png.height": "Hauteur",
"tool.svg-to-png.convert": "Convertir vers PNG"
}
}

56
tools/items/svg-to-png/page.php Normal file
View File

@@ -0,0 +1,56 @@
<?php
echo(getMainHeader(localize("tool.svg-to-png.input.title"), null, null, null,
true, "bkgd-math", 3, false, false, true));
echo('<table class="table-v-center table-p-xs mt-xs"><tr><td>');
echo('<label for="tool-svg-to-png-files" hidden>' . localize("tool.svg-to-png.files") . ':</label>');
echo('<input type="file" id="tool-svg-to-png-files" name="tool-svg-to-png-files" class="d-none" accept=".svg,image/svg+xml" multiple>');
echo('<p id="tool-svg-to-png-text-none" class="t-italic px-xxs">' . localize("tool.svg-to-png.text.no.files") . '</p>');
echo('<p id="tool-svg-to-png-text-good" class="t-italic px-xxs" hidden>' . localize("tool.svg-to-png.text.has.files") . '</p>');
echo('</td></tr><tr><td>');
echo('<button id="tool-svg-to-png-btn-select" class="p-mxs r-s border b-light primary">');
echo('<span class="text-monospace"><i class="fad fa-file-search"></i>&nbsp;&nbsp;');
echo(localize("tool.svg-to-png.select.files"));
echo('</span></button>');
echo('</td></tr></table>');
echo(getMainHeader(localize("tool.svg-to-png.options.title"), null, null, null,
true, "bkgd-math", 3, false, false, true));
echo('<table class="table-v-center table-p-xs mt-xs"><tr><td>');
echo('<label for="tool-svg-to-png-width">' . localize("tool.svg-to-png.width") . ': </label>');
echo('</td><td>');
echo('<input type="number" id="tool-svg-to-png-width" name="tool-svg-to-png-width" class="border p-xs r-s" value="256" min="1" max="8192"/>');
echo('</td></tr><tr><td>');
echo('<label for="tool-svg-to-png-height">' . localize("tool.svg-to-png.height") . ': </label>');
echo('</td><td>');
echo('<input type="number" id="tool-svg-to-png-height" name="tool-svg-to-png-height" class="border p-xs r-s" value="256" min="1" max="8192"/>');
echo('</td></tr></table>');
echo(getMainHeader(localize("tool.svg-to-png.output.title"), null, null, null,
true, "bkgd-math", 3, false, false, true));
echo('<div class="p-s pt-m">');
echo('<button id="tool-svg-to-png-btn-convert" class="p-mxs r-s border b-light primary">');
echo('<span class="text-monospace"><i class="fad fa-file-search"></i>&nbsp;&nbsp;');
echo(localize("tool.svg-to-png.convert"));
echo('</span></button>');
// TODO: Add 2nd button with aspect ration preservation
echo('</div>');
echo('<br>');
echo('<div class="p-s">');
echo('<canvas id="conversion-canvas" width="256" height="256" class="border r-l d-none"></canvas>');
echo('</div>');
?>