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>