PNG เป็น SVG เป็นเรื่องเกี่ยวกับการติดตามรูปภาพและการทำเวกเตอร์ ซึ่งก็คือการแปลงภาพแรสเตอร์ (jpg/png) เป็นภาพเวกเตอร์ (svg)
หากคุณมีตัวเลือกมากมายจนล้นหลาม ฉันทามติทั่วไปคือ:
เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดกับภาพที่มีความละเอียดต่ำ ให้ประมวลผลภาพเหล่านั้นล่วงหน้าด้วยตัวขยายขนาดภาพ AI จากนั้นจึงทำภาพเวกเตอร์
แอพหลายตัวที่แสดงด้านล่างไม่มีเวอร์ชันบรรทัดคำสั่ง และไม่สามารถโฮสต์ออนไลน์ได้ อย่างไรก็ตาม พวกมันสามารถใช้สคริปต์กับแอพอย่าง Keyboard Maestro และ AutoHotkey
หากต้องการโฮสต์ตัวแปลงของคุณเองทางออนไลน์ โปรดดูข้อกำหนดเฉพาะของโอเพ่นซอร์สและตัวอย่างโค้ดด้านล่าง
ฉันมองหาซอฟต์แวร์เวกเตอร์อื่นเพิ่มเติมอยู่เสมอ! สร้างปัญหา GitHub และฉันจะเพิ่มลงในรายการ
เป้าหมายเดิมของเอกสารนี้คือโครงร่างข้อกำหนดสำหรับฟังก์ชันไร้เซิร์ฟเวอร์ของ NodeJS เพื่อแปลงภาพแรสเตอร์เป็น SVG และลิงก์ไปยังที่เก็บข้อมูลอื่นสำหรับการใช้งาน
ดังนั้น ส่วนที่เหลือของเอกสารจึงทำหน้าที่เป็นข้อกำหนดง่ายๆ ว่าควรจัดโครงสร้างคำขอและการตอบกลับอย่างไรเพื่อแปลงระหว่างภาพแรสเตอร์และ SVG ตรวจสอบพื้นที่เก็บข้อมูลที่เกี่ยวข้องสำหรับการใช้งานข้อกำหนด
การติดตามรูปภาพ
ไร้เซิร์ฟเวอร์
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> "
}
]
}เพื่อสนับสนุนการพัฒนาโครงการนี้อย่างต่อเนื่อง โปรดพิจารณาบริจาค
ยินดีต้อนรับการมีส่วนร่วม
