Data-URL-enerieren
Quell Code
<script>
window.onload = function() {
if ( document.getElementById('output') ) {
document.getElementById('output').addEventListener('click',
function () {
if ( document.selection ) {
var range = document.body.createTextRange();
range.moveToElementText(this);
range.select();
} else if ( window.getSelection ) {
var range = document.createRange();
range.selectNode(this);
window.getSelection().addRange(range);
}
}
, false);
}
}
</script>
<style>
#content {padding:1em 1em 1em 1em;}
p.errorText {background-color:#fdd;padding:.5em;border:1px solid #a00;}
label:hover{text-decoration:underline;}
legend{font-weight:bold;font-size:90%; padding: 0 1em 0 1em; }
fieldset{border:2px solid #ddd;border-radius:.5em;width:20em;margin-bottom:.5em;}
#output {width:auto;height:auto;font-family:monospace;font-size:.95em;border:3px solid gray;padding:.5em;margin-right:1em;white-space:nowrap; overflow:scroll;}
</style>
<body>
<h1>Data-URI-Generator für Inline-Grafiken</h1>
<h2 style="color:red">Nicht funktionstüchtig , nur Demo</h2>
<div id="content">
<form id="myForm" action="" method="post" enctype="multipart/form-data">
<fieldset><legend>Datei: (maximal 64 KibiBytes)</legend>
<input id="Datei" name="Datei" type="file" size="50" accept="image/*" required><br />
</fieldset>
<fieldset><legend>Typ:</legend>
<input type="radio" checked name="typ" value="html" id="getHTML"><label for="getHTML">HTML</label><br />
<input type="radio" name="typ" value="css" id="getCSS"><label for="getCSS">CSS (als Hintergrund)</label><br />
<input type="radio" name="typ" value="base64" id="getBase64"><label for="getBase64">nur base64-codiert (Plaintext)</label><br />
</fieldset>
<button id="mySubmit" type="submit">Data-URL generieren</button>
</form>
<p>Das Skript (<a href="https://code.fastix.org/Projekte/Data-URL-Generator/">Download</a>) hat auf einem <br />
und PHP 7.2.20 etwa 10 Millisekunde(n) benötigt.</p>
</div>
</body>