---------------------------------------------- <style type="text/css"> @font-face { font-family: "My Custom Font"; src: url(https://alceawis.de/other/extra/font/GreatVibes-Regular.otf) format("truetype"); } p.customfont { font-family: "My Custom Font", Verdana, Tahoma; } .drag-drop-area { border: 2px dashed #ccc; padding: 20px; text-align: center; font-size: 18px; cursor: pointer; } </style> </head> <body> <p id="customFont" class="customfont" contenteditable="true">Hello world!</p> <input type="range" id="fontSizeSlider" min="10" max="50" value="16" step="2" onchange="changeFontSize()"> <style id="customFontFace"></style> <script> function changeFontSource(fontUrl) { var fontFace = document.getElementById("customFontFace"); fontFace.innerHTML = "@font-face { font-family: 'My Custom Font'; src: url(" + fontUrl + ") format('truetype'); }"; } function changeFontSize() { var fontSize = document.getElementById("fontSizeSlider").value; var customFont = document.getElementById("customFont"); customFont.style.fontSize = fontSize + "px"; } function handleDragOver(event) { event.preventDefault(); event.stopPropagation(); event.dataTransfer.dropEffect = 'copy'; } function handleDrop(event) { event.preventDefault(); event.stopPropagation(); var file = event.dataTransfer.files[0]; var fontUrl = URL.createObjectURL(file); changeFontSource(fontUrl); } function handleUrlInput() { var fontUrl = document.getElementById("fontUrlInput").value; changeFontSource(fontUrl); } function handleFileBrowse(event) { var file = event.target.files[0]; var fontUrl = URL.createObjectURL(file); changeFontSource(fontUrl); } // Function to handle the font selection from the dropdown function handleFontSelection() { var dropdown = document.getElementById("fontDropdown"); var selectedOption = dropdown.options[dropdown.selectedIndex]; var fontUrl = selectedOption.value; var pretext = selectedOption.getAttribute("pretext"); var softkeyboardUrl = selectedOption.getAttribute("softkeyboard"); if (pretext) { var customFont = document.getElementById("customFont"); customFont.innerText = pretext; } if (softkeyboardUrl) { fetchSoftkeyboardContent(softkeyboardUrl); } changeFontSource(fontUrl); } function fetchSoftkeyboardContent(url) { fetch(url) .then(function (response) { return response.text(); }) .then(function (data) { var softkeyboardDiv = document.getElementById("softkeyboardDiv"); softkeyboardDiv.innerHTML = data; }) .catch(function (error) { console.log('Error fetching softkeyboard content:', error); }); } </script> <select id="fontDropdown" onchange="handleFontSelection()"> <option value="other/extra/font/GreatVibes-Regular.otf" pretext="Great Vibes !">Great Vibes</option> <option value="other/extra/font/learning_curve_regular_ot_ps.otf" pretext="Learning Curves">Learning Curve</option> <option value="other/extra/font/learning_curve_regular_ot_ps.otf" pretext="">--other--</option> <option value="other/extra/font/others/heo.ttf" pretext="󱴻󱳍󱳳󱴰" softkeyboard="other/extra/font/0softkbs/heo.html">Heo</option> </select> <hr> <div class="drag-drop-area" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"> <p>Drag and drop a font file here</p> </div> <label for="fontUrlInput">or enter a URL to a font:</label> <input type="text" id="fontUrlInput" onchange="handleUrlInput()">  <input type="file" id="fileBrowseInput" style="display: none;" onchange="handleFileBrowse(event)"> <br>or pick a local file: <button onclick="document.getElementById('fileBrowseInput').click()">Browse</button> <div id="softkeyboardDiv"></div>  <button id="captureButton">*Cheese!!*</button> <div id="imageContainer"></div> <script> const captureButton = document.getElementById('captureButton'); const imageContainer = document.getElementById('imageContainer'); captureButton.addEventListener('click', function() { const paragraph = document.getElementById('customFont'); let content = paragraph.innerHTML; content = content.replace(/<\/div>/g, ' ').replace(/<div>/g, ' '); const paragraphComputedStyle = getComputedStyle(paragraph); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = parseFloat(paragraphComputedStyle.width); canvas.height = parseFloat(paragraphComputedStyle.height) + 50; const computedStyle = getComputedStyle(paragraph); context.font = computedStyle.font; context.fillStyle = computedStyle.color; const textMetrics = context.measureText(content); const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent; const yCoordinate = (canvas.height - textHeight) / 2 + textMetrics.actualBoundingBoxAscent; context.fillText(content, 0, yCoordinate); canvas.toBlob(function(blob) { while (imageContainer.firstChild) { imageContainer.removeChild(imageContainer.firstChild); } const image = document.createElement('img'); const reader = new FileReader(); reader.onloadend = function() { image.src = reader.result; }; reader.readAsDataURL(blob); imageContainer.appendChild(image); }, 'image/png'); }); </script> </plaintext>