PNG vers SVG concerne le traçage et la vectorisation d'images, c'est-à-dire la conversion d'une image raster (jpg/png) en une image vectorielle (svg).
Si vous êtes submergé par la variété des options, le consensus général est le suivant :
Pour de meilleurs résultats avec des images basse résolution, prétraitez-les avec un upscaler d’images IA, puis vectorisez-les.
La plupart des applications répertoriées ci-dessous n'incluent pas de versions en ligne de commande et ne sont pas pratiques à héberger en ligne. Cependant, ils peuvent être scriptés avec des applications comme Keyboard Maestro et AutoHotkey.
Pour héberger votre propre convertisseur en ligne, consultez les spécifications open source et les exemples de code ci-dessous.
Je suis toujours à la recherche de logiciels de vectorisation alternatifs ! Créez un problème GitHub et je l'ajouterai à la liste.
L'objectif initial de ce document était de décrire une spécification pour les fonctions sans serveur NodeJS permettant de convertir des images raster en SVG et de créer des liens vers d'autres référentiels pour les implémentations.
En tant que tel, le reste du document sert de spécification simple sur la façon dont les demandes et les réponses doivent être structurées pour la conversion entre les images raster et SVG. Consultez les référentiels associés pour les implémentations de la spécification.
Traçage d'images
Sans serveur
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> "
}
]
}Pour soutenir le développement continu de ce projet, pensez à faire un don.
Les contributions sont les bienvenues.
