-
-
Notifications
You must be signed in to change notification settings - Fork 72
/
Copy pathimage-to-svg.html
127 lines (118 loc) · 4.19 KB
/
image-to-svg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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>