PNG para SVG tem tudo a ver com rastreamento e vetorização de imagens - a conversão de uma imagem raster (jpg/png) em uma imagem vetorial (svg).
Se você estiver impressionado com a variedade de opções, o consenso geral é:
Para obter melhores resultados com imagens de baixa resolução, pré-processe-as com um upscaler de imagem AI e depois vetorize-as.
Muitos dos aplicativos listados abaixo não incluem versões de linha de comando e são impraticáveis para hospedar online. No entanto, eles podem ser programados com aplicativos como Keyboard Maestro e AutoHotkey.
Para hospedar seu próprio conversor online, verifique as especificações de código aberto e exemplos de código abaixo.
Estou sempre procurando por mais softwares de vetorização alternativos! Crie um problema no GitHub e eu o adicionarei à lista.
O objetivo original deste documento era delinear uma especificação para funções sem servidor do NodeJS para converter imagens raster em SVG e vincular a outros repositórios para implementações.
Dessa forma, o restante do documento serve como uma especificação simples de como as solicitações e respostas devem ser estruturadas para conversão entre imagens raster e SVG. Confira os repositórios relacionados para implementações da especificação.
Rastreamento de imagem
Sem servidor
function ImageInput ( ) {
const [ files , setFiles ] = React . useState < File [ ] > ( ) ;
const onSubmit = ( event ) => {
event . preventDefault ( ) ;
if ( ! files ?. length ) return ;
async function getSvg ( ) {
try {
const formData = new FormData ( ) ;
files . forEach ( ( file , index ) =>
formData . append ( `image- ${ index } ` , file , file . name )
) ;
const response = await axios . post ( url , formData , {
headers : {
"Content-Type" : "multipart/form-data" ,
} ,
} ) ;
} catch ( error ) {
console . log ( error )
}
}
getSvg ( ) ;
} ;
return (
< form onSubmit = { onSubmit } >
< input
id = "file"
name = "file"
type = "file"
multiple
required
accept = "image/jpeg, image/png, image/webp, image/gif, image/svg+xml, image/heic"
onChange = { ( event ) => {
const files = Array . from ( event . target . files ) ;
if ( files ?. length ) {
setFiles ( files ) ;
}
} }
/ >
< / form >
) ;
}{
"algorithm" : " imagetracerjs " ,
"files" : [
{
"fieldName" : " image-1 " ,
"originalName" : " demo-one.png " ,
"svg" : " <svg>…</svg> "
},
{
"fieldName" : " image-2 " ,
"originalName" : " demo-two.jpg " ,
"svg" : " <svg>…</svg> "
}
]
}Para apoiar o desenvolvimento contínuo deste projeto, considere fazer uma doação.
Contribuições são bem-vindas.
