Create image-to-svg.html

simonw · web-flow · commit 4ff37f2dfd5d · 2024-10-06T20:37:40.000-07:00
https://gist.github.com/simonw/d2e724c357786371d7cc4b5b5bb87ed0
diff --git a/image-to-svg.html b/image-to-svg.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image to SVG</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #drop-zone {
+            border: 2px dashed #ccc;
+            border-radius: 20px;
+            width: 100%;
+            height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+        }
+        #drop-zone.dragover {
+            background-color: #e9e9e9;
+        }
+        #svg-container, #svg-code {
+            margin-top: 20px;
+        }
+        #svg-container {
+            max-width: 100%;
+            box-sizing: border-box;
+            margin: 20px;
+        }
+        #svg-container svg {
+            max-width: 100%;
+            height: auto;
+        }
+        #svg-code {
+            width: 100%;
+            height: 200px;
+        }
+        #copy-button {
+            margin-bottom: 10px;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <h1>Image to SVG</h1>
+    <p>Using <a href="https://github.com/jankovicsandras/imagetracerjs">imagetracerjs</a> by András Jankovics.</p>
+    <div id="drop-zone">
+        <p>Drag and drop a JPG or PNG image here, or click to select a file</p>
+    </div>
+    <input type="file" id="file-input" style="display: none;" accept="image/jpeg, image/png">
+    <div id="svg-container"></div>
+    <h2>SVG Code:</h2>
+    <button id="copy-button">Copy to clipboard</button>
+    <textarea id="svg-code" readonly></textarea>
+
+    <script type="module">
+        import imagetracerjs from 'https://cdn.jsdelivr.net/npm/imagetracerjs@1.2.6/+esm';
+
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('file-input');
+        const svgContainer = document.getElementById('svg-container');
+        const svgCode = document.getElementById('svg-code');
+        const copyButton = document.getElementById('copy-button');
+
+        dropZone.addEventListener('click', () => fileInput.click());
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('dragover');
+        });
+        dropZone.addEventListener('drop', handleDrop);
+        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
+
+        copyButton.addEventListener('click', () => {
+            navigator.clipboard.writeText(svgCode.value).then(() => {
+                copyButton.textContent = 'Copied';
+                setTimeout(() => {
+                    copyButton.textContent = 'Copy to clipboard';
+                }, 1500);
+            }).catch(err => {
+                console.error('Failed to copy text: ', err);
+            });
+        });
+
+        function handleDrop(e) {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file && (file.type === 'image/jpeg' || file.type === 'image/png')) {
+                handleFile(file);
+            }
+        }
+
+        function handleFile(file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => convertToSVG(img);
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        function convertToSVG(img) {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0);
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+            const svgString = imagetracerjs.imagedataToSVG(imageData, {viewbox: true});
+            
+            svgContainer.innerHTML = svgString;
+            svgCode.value = svgString;
+        }
+    </script>
+</body>
+</html>
