console
const { log, dir, table, clear, warn, error } = console; clear();
const { createApp } = PetiteVue
Potrace.setParameter({ turdsize: 3, optcurve: false })
createApp({
file: null,
svgCode: '<svg></svg>',
selectFile(e) {
this.file = e.target.files[0]
Potrace.loadImageFromFile(this.file)
this.convert()
},
convert() {
Potrace.process(()=>{
const result = Potrace.getSVG(1, "curve")
this.svgCode = result
log(result)
})
},
setSvgSize(el) {
const svg = el.querySelector('svg')
log(svg)
}
}).mount()
<div class="flex flex-col p-4 gap-2" v-scope>
<input type="file" @change="selectFile">
<div class="border" v-effect="setSvgSize($el, svgCode)" v-html="svgCode"></div>
</div>
svg {
width: 100%;
}