0 <!DOCTYPE html>
1 <!-- saved from url=(0035)https://kilobtye.github.io/potrace/ -->
2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 <meta name="description" content="a javascript port of potrace">
6 <meta name="keywords" content="potrace,trace,vectorization,svg">
7
8 <title>potrace</title>
9 <style>
10 body {
11 margin: 30px;
12 background-color: #eee;
13 }
14
15 h1 {
16 font-weight:bold;
17 font-size:2.5em;
18 text-transform:capitalize;
19 letter-spacing: 0.1em;
20 }
21
22 a:link, a:visited{
23 color:#6d6e73;
24 }
25
26 a:hover, a:focus, a:active {
27 color:#444;
28 }
29
30 p{
31 margin: 5px;
32 }
33
34 #imgdiv, #svgdiv {
35 display: none;
36 border: 2px solid #ccc;
37 margin: 10px 0;
38 padding: 10px;
39 border-radius: 5px;
40 }
41
42 #drop {
43 border: 2px dashed #ccc;
44 width: 170px;
45 padding: 10px;
46 margin: 20px 0;
47 text-align: center;
48 border-radius: 5px;
49 }
50
51 #drop.hovering{
52 border: 2px dashed #333;
53 }
54
55 #run, #save{
56 border: 1px solid #555;
57 border-radius: 5px;
58 padding: 2px 5px;
59 text-decoration: none;
60 background-color: #ddd;
61 }
62
63 #run:hover, #save:hover{
64 background-color: #eee;
65 }
66
67 #imageInput {
68 display: none;
69 }
70
71 </style>
72 </head>
73
74 <body>
75 <header>
76 <h1>potrace</h1>
77 </header>
78
79 <article>
80 <p>A javascript port of <a href="http://potrace.sourceforge.net/" target="_blank">Potrace</a>.</p>
81 <p><a href="https://github.com/kilobtye/potrace">source code</a></p>
82 <input type="file" id="imageInput" accept="image/*">
83 <div id="drop"><a href="https://kilobtye.github.io/potrace/#" id="imageSelect">open an image</a> <br> or drag an image here</div>
84 <div>
85 <a href="https://kilobtye.github.io/potrace/#" id="run">open Yao.jpg</a>
86 <a href="https://kilobtye.github.io/potrace/#" id="save">download</a>
87 </div>
88 <div id="imgdiv"> </div>
89 <div> </div>
90 <div id="svgdiv"> </div>
91 </article>
92
93 <script src="./potrace_files/potrace.js.download"></script>
94 <script>
95
96 window.onload = function(){
97 var imageSelect = document.getElementById("imageSelect"),
98 imageInput = document.getElementById("imageInput");
99 imageSelect.addEventListener("click", function (e) {
100 imageInput.click();
101 e.preventDefault();
102 }, false);
103
104 imageInput.addEventListener("change", function (e) {
105 handleFiles(this.files);
106 }, false);
107
108 document.getElementById("run").addEventListener("click", function (e) {
109 Potrace.loadImageFromUrl("yao.jpg");
110 Potrace.process(function(){
111 displayImg();
112 displaySVG(3);
113 });
114 }, false);
115
116 document.getElementById("save").addEventListener("click", function (e) {
117 e.target.download = "potrace" + (new Date()).toLocaleTimeString() + ".svg";
118 e.target.href = "data:image/svg+xml;," + Potrace.getSVG(100/378);
119 }, false);
120
121 var drop = document.getElementById('drop');
122 drop.addEventListener("dragenter", function (e) {
123 if (e.preventDefault) e.preventDefault();
124 e.dataTransfer.dropEffect = 'copy';
125 this.classList.add('hovering');
126 return false;
127 }, false);
128
129 drop.addEventListener("dragleave", function (e) {
130 if (e.preventDefault) e.preventDefault();
131 e.dataTransfer.dropEffect = 'copy';
132 this.classList.remove('hovering');
133 return false;
134 }, false);
135
136 drop.addEventListener("dragover", function (e) {
137 if (e.preventDefault) e.preventDefault();
138 e.dataTransfer.dropEffect = 'copy';
139 this.classList.add('hovering');
140 return false;
141 }, false);
142
143 drop.addEventListener("drop", function (e) {
144 if (e.preventDefault) e.preventDefault();
145 this.classList.remove('hovering');
146 handleFiles(e.dataTransfer.files);
147 return false;
148 }, false);
149 };
150
151 function handleFiles(files) {
152 Potrace.loadImageFromFile(files[0]);
153 Potrace.process(function(){
154 displayImg();
155 displaySVG(100/378);
156 });
157 }
158
159 function displayImg(){
160 var imgdiv = document.getElementById('imgdiv');
161 imgdiv.style.display = 'inline-block';
162 imgdiv.innerHTML = "<p>Input image:</p>";
163 imgdiv.appendChild(Potrace.img);
164 }
165
166 function displaySVG(size, type){
167 var svgdiv = document.getElementById('svgdiv');
168 svgdiv.style.display = 'inline-block';
169 svgdiv.innerHTML = "<p>Result:</p>" + Potrace.getSVG(size, type);
170 }
171
172 </script>
173
174
175
176 </body></html>