SOURCE

console 命令行工具 X clear

                    
>
console
// https://github.com/kilobtye/potrace
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)
        // svg.setAttribute('width', '100%')
        // svg.setAttribute('height', '100%')
    }
}).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%;
}

本项目引用的自定义外部资源