Created
May 5, 2021 07:20
-
-
Save hidakatsuya/52111961671adf7cd88eca506421ff2d to your computer and use it in GitHub Desktop.
A HTML dialog to convert an image to base64 format
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --canvas-padding: 10px; | |
| } | |
| body { | |
| margin: 0; | |
| padding: var(--canvas-padding); | |
| } | |
| .inner { | |
| height: calc(100vh - var(--canvas-padding) * 2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-sizing: border-box; | |
| } | |
| .message:empty:after { | |
| content: "Drop image here"; | |
| } | |
| textarea { | |
| position: absolute; | |
| left: -200px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Image to Tag</title> | |
| <script src="main.js"></script> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div class="inner"> | |
| <span id="message" class="message"></span> | |
| </div> | |
| <textarea id="result" class="result"></textarea> | |
| </body> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('DOMContentLoaded', () => { | |
| document.addEventListener('dragover', e => e.preventDefault()); | |
| document.addEventListener('drop', async e => { | |
| e.preventDefault(); | |
| try { | |
| const file = e.dataTransfer.files[0]; | |
| if (e.dataTransfer.files.length > 1) throw new Error('Multiple files cannot be specified.') | |
| if (!file.type.includes('image/')) throw new Error('The specified file is not an image.'); | |
| const dataUrl = await readFile(file); | |
| const imgTag = buildImgTag(dataUrl); | |
| setClipboard(imgTag); | |
| showMessage('Copied', 3000); | |
| } catch(e) { | |
| showMessage(e.message); | |
| } | |
| }); | |
| }); | |
| function readFile(file) { | |
| return new Promise((resolve, reject) => { | |
| const reader = new FileReader(); | |
| reader.addEventListener('load', () => resolve(reader.result)); | |
| reader.addEventListener('error', () => reject(reader.error)); | |
| reader.readAsDataURL(file); | |
| }); | |
| } | |
| function buildImgTag(dataUrl) { | |
| return `<img src="${dataUrl}">`; | |
| } | |
| function setClipboard(dataUrl) { | |
| const textArea = document.getElementById('result'); | |
| textArea.value = dataUrl; | |
| textArea.select(); | |
| document.execCommand('copy'); | |
| } | |
| function showMessage(message, lifetime = null) { | |
| const el = document.getElementById('message') | |
| el.innerText = message; | |
| if (lifetime) setTimeout(() => el.innerText = '', lifetime); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment