RoundCut ทำงานอย่างไร

คำตอบสั้นๆ

RoundCut ใช้สถาปัตยกรรมแบบผสม: เครื่องมือส่วนใหญ่ทำงานทั้งหมดในเบราว์เซอร์ของคุณ โดยไม่มีการอัปโหลด และส่วนน้อยจะส่งคำขอเครือข่ายเพียงครั้งเดียวผ่านโครงสร้างพื้นฐานของเรา เอง เมื่อเบราว์เซอร์ให้คุณภาพเทียบเท่าไม่ได้ โดยมีตัวสำรองฝั่งไคลเอนต์ที่มองไม่เห็นอยู่เสมอ เราบอกคุณว่าคุณอยู่บนเส้นทางใด ทั้งในแต่ละเครื่องมือและบนหน้านี้

ตารางด้านล่างเป็นตัวแทน ไม่ใช่รายการครบทุกตัว (เครื่องมือใหม่ออกมาเป็นประจำ) มันแสดง ตัวอย่างหนึ่งของเส้นทางแต่ละแบบ

เครื่องมือตัวอย่าง	งานเกิดขึ้นที่ไหน
Circle Crop (เฉพาะเบราว์เซอร์)	100 เปอร์เซ็นต์ในเบราว์เซอร์ของคุณ ด้วย Canvas API ไม่มีการอัปโหลด ทำงานออฟไลน์ได้
ตัวอย่างการบีบอัด (เฉพาะเบราว์เซอร์)	100 เปอร์เซ็นต์ในเบราว์เซอร์ของคุณ ด้วย canvas.toBlob ไม่มีการอัปโหลด แถบเลื่อนตอบสนองทันที
การดาวน์โหลดสุดท้ายของการบีบอัด (แตะเซิร์ฟเวอร์)	ไป-กลับหนึ่งรอบไปยังบริการของเราที่ api.roundcut.com.br (Fastify กับ sharp กับ libvips บน VPS ในเยอรมนี) โดยมีตัวสำรองในเบราว์เซอร์
ลบพื้นหลัง (แตะเซิร์ฟเวอร์)	ไป-กลับหนึ่งรอบไปยัง Cloudflare Worker ที่รัน BiRefNet บน GPU ที่ขอบเครือข่ายของ Cloudflare โดยมีตัวสำรอง WebAssembly ในเบราว์เซอร์ของคุณเมื่อเข้าถึงคลาวด์ไม่ได้

การครอบตัด การปรับขนาด การแปลงรูปแบบไฟล์ (ยกเว้นการเข้ารหัส AVIF) และตัวอย่างการบีบอัด ทั้งหมดทำงานเต็มที่ในเบราว์เซอร์ของคุณ การลบพื้นหลัง การดาวน์โหลดของการบีบอัด การขยายภาพ ด้วย AI การเข้ารหัส AVIF และ PDF หลายภาพ แต่ละอย่างจะส่งคำขอหนึ่งครั้งและถอยกลับไปใช้ เบราว์เซอร์เมื่อเข้าถึงคลาวด์ไม่ได้

คุณตรวจสอบคำกล่าวอ้างฝั่งไคลเอนต์ได้ในราว 30 วินาที เปิด DevTools → Network ล้างบันทึก จากนั้นใช้เครื่องมือเฉพาะเบราว์เซอร์อย่าง Circle Crop หรือแถบเลื่อนตัวอย่างการบีบอัด คุณจะ เห็นว่าไม่มีคำขอใดที่นำไบต์รูปภาพของคุณออกไปจากหน้านี้ ส่วนเครื่องมือที่แตะเซิร์ฟเวอร์ คุณจะ เห็นการอัปโหลดเพียงครั้งเดียวต่อการทำงาน ไปยังปลายทางที่ระบุชื่อชัดเจน

ทำไมต้องแบบผสม

เครื่องมือรูปภาพออนไลน์ส่วนใหญ่อยู่ที่ขั้วใดขั้วหนึ่ง คืออัปโหลดทุกอย่างขึ้นเซิร์ฟเวอร์ (คุณรอ การไป-กลับและผู้ดำเนินการเก็บไฟล์ของคุณไว้) หรือทำในเบราว์เซอร์ทั้งหมด (คุณจ่ายด้วยคุณภาพ และความเร็วในขั้นตอนการเข้ารหัสหรือ AI) ขั้วทั้งสองไม่ได้ชนะในทุกที่

เราเลือกฝั่งไคลเอนต์ในที่ที่เบราว์เซอร์ยอดเยี่ยมอยู่แล้ว องค์ประกอบ <canvas> จัดการการ ครอบตัด การหมุน การปรับขนาด และการเข้ารหัสตัวอย่างแบบมีการสูญเสียใน JPG หรือ WebP และเลือกฝั่งเซิร์ฟเวอร์ในที่ที่เบราว์เซอร์ยังแพ้อย่างวัดได้

• การบีบอัดรูปภาพ ที่การดาวน์โหลดสุดท้าย sharp กับ libvips 8.17 ฝั่งเซิร์ฟเวอร์ผลิตไฟล์ที่เล็กกว่า 10 ถึง 15 เปอร์เซ็นต์ทีละไบต์ เมื่อเทียบกับตัวเข้ารหัสในเบราว์เซอร์ที่คุณภาพการมองเห็นเท่ากัน และให้เข้าถึงการปรับจูนความเร็วและความอิ่มสีของ AVIF รวมถึงเอาต์พุต JPEG XL ที่เบราว์เซอร์ไม่เปิดเผย แถบเลื่อนและตัวอย่างยังคงทำงานในเบราว์เซอร์ของคุณ เพื่อให้การปรับแต่งเกิดขึ้นทันที มีเพียงการแตะ “ดาวน์โหลด” เท่านั้นที่ผ่านบริการของเรา
• การลบพื้นหลังด้วย AI และการขยายภาพด้วย AI ที่เส้นทางเริ่มต้น โมเดล (BiRefNet สำหรับการแบ่งส่วน ซูเปอร์เรโซลูชันสำหรับการขยาย) ต้องใช้ GPU จริงเพื่อให้เสร็จในไม่กี่วินาที ตัวสำรองในเบราว์เซอร์ทำงานได้แต่ช้ากว่าและให้ผลลัพธ์ที่หยาบกว่าอย่างเห็นได้ที่เส้นผม ขนสัตว์ และขอบที่ละเอียด
• การเข้ารหัส AVIF ที่การแปลง ตัวเข้ารหัส AVIF ในเบราว์เซอร์ทำงานช้าบนบางอุปกรณ์ ดังนั้นเอาต์พุต AVIF จึงส่งคำขอหนึ่งครั้งไปยัง Worker บีบอัด โดยมีการเข้ารหัสบนเธรดหลักของเบราว์เซอร์เป็นตัวสำรอง

ราคาที่เรายอมจ่ายเมื่ออยู่ฝั่งเซิร์ฟเวอร์บนเส้นทางเหล่านั้นคือการไป-กลับหนึ่งรอบต่อการทำงาน ราคาที่เราเลี่ยงได้เมื่ออยู่ฝั่งไคลเอนต์ในที่อื่นทั้งหมดคือค่าธรรมเนียมการไป-กลับในส่วนของขั้น ตอนการทำงานที่ปรับแต่งกันบ่อยที่สุด

ขั้นตอน ทีละขั้น

1. คุณเลือกไฟล์

ผ่านตัวเลือกไฟล์ การลากแล้ววาง หรือการวาง เบราว์เซอร์มอบออบเจกต์ File ให้ JavaScript JavaScript อ่านไบต์โดยใช้ FileReader หรือ Blob.arrayBuffer() ไม่มีจุดใดในขั้นตอนนี้ ที่ไฟล์ถูกส่งผ่านเครือข่าย ไม่ว่าคุณกำลังใช้เครื่องมือใด

2. เบราว์เซอร์ถอดรหัสภาพ

เบราว์เซอร์สมัยใหม่ถอดรหัส JPG, PNG, WebP, GIF และ AVIF ได้แบบเนทีฟ เราใช้ createImageBitmap() เพื่อเปลี่ยนไบต์ดิบให้เป็นบิตแมปที่ GPU ทำงานด้วยได้ นอกเธรดหลัก สำหรับ HEIC บนเบราว์เซอร์ที่ไม่ถอดรหัสมันแบบเนทีฟ เราถอยกลับไปใช้ตัวถอดรหัส WebAssembly ที่รันในเครื่องในเบราว์เซอร์ของคุณ

3. เครื่องมือทำงานของมัน นี่คือจุดที่เส้นทางแยกกัน

• เครื่องมือเฉพาะเบราว์เซอร์ (การครอบตัด การปรับขนาด การแปลงรูปแบบเป็น PNG/JPEG/WebP ตัวอย่างการบีบอัด) การแปลงพิกเซลด้วย Canvas 2D หรือโคเดก WebAssembly เข้ารหัสบิตแมปใหม่ในเครื่อง ผลลัพธ์พร้อมโดยไม่ต้องอัปโหลด Cropper.js จัดการกรอบครอบตัดแบบโต้ตอบสำหรับเครื่องมือครอบตัด และ canvas.toBlob จัดการการเข้ารหัสตัวอย่างใหม่ ทั้งหมดในเบราว์เซอร์ของคุณ
• การบีบอัด การดาวน์โหลด เมื่อคุณแตะ “ดาวน์โหลด” รูปจะถูกส่งหนึ่งครั้งไปยัง api.roundcut.com.br (บริการ Fastify ที่รันบน VPS ในเยอรมนีที่ดำเนินการโดย Hostinger, Node 24 กับ sharp 0.34 กับ libvips 8.17 ซึ่งเป็นไลบรารี C ชุดเดียวกับที่ Squoosh ใช้บนเส้นทางเซิร์ฟเวอร์ของมัน) มันถูกเข้ารหัสใหม่ด้วยพารามิเตอร์ชุดเดียวกับที่คุณตั้งในตัวอย่าง และไบต์ถูกสตรีมกลับมายังเบราว์เซอร์ของคุณ บริการเก็บแคชที่แยกตามผู้เช่าและอ้างอิงตามเนื้อหา (แฮชของไบต์ขาเข้าบวกพารามิเตอร์) จำกัดที่ 500 MB เพื่อให้การดาวน์โหลดรูปเดิมด้วยการตั้งค่าเดิมเล่นไบต์ที่แคชไว้ซ้ำ แคชไม่ได้จัดทำดัชนีตามตัวคุณ IP หรือชื่อไฟล์ หากเข้าถึงบริการไม่ได้ เครื่องมือจะถอยกลับไปใช้ blob ตัวอย่างในเบราว์เซอร์
• ลบพื้นหลัง เส้นทางคลาวด์เริ่มต้น รูปถูกอัปโหลดหนึ่งครั้งไปยัง Cloudflare Worker พักไว้ในบัคเก็ต R2 ส่วนตัว ประมวลผลโดยการแปลง cf.image.segment ของ Cloudflare ซึ่งรันโมเดล BiRefNet บน GPU ที่ขอบเครือข่ายของ Cloudflare และภาพที่ตัดออกถูกสตรีมกลับมา ออบเจกต์ R2 ที่พักไว้ถูกลบภายในหนึ่งชั่วโมงโดยกฎวงจรชีวิต R2 ไม่ว่าผลจะเป็นอย่างไร รูปทั่วไปเสร็จใน 1 ถึง 3 วินาที เพดานต่อ IP ต่อวันและเพดานอัปโหลด 5 MB ช่วยให้แพ็กเกจฟรียั่งยืน
• เครื่องมือที่มีคลาวด์หนุนหลังตัวอื่น (การขยายภาพด้วย AI การเข้ารหัส AVIF PDF หลายภาพ) เป็นไปตามรูปแบบเดียวกัน คือคำขอหนึ่งครั้งไปยังโครงสร้างพื้นฐานที่ระบุชื่อชัดเจน (API รูปภาพบนคลาวด์สำหรับซูเปอร์เรโซลูชัน Worker บีบอัดสำหรับการเข้ารหัส AVIF บริการ VPS ของเราสำหรับ PDF หลายภาพ) ผลลัพธ์สตรีมกลับมา และตัวสำรองในเบราว์เซอร์ที่โปร่งใสหากคำขอนั้นล้มเหลว
• ตัวสำรอง WebAssembly หากเส้นทางคลาวด์ที่เกี่ยวข้องเข้าถึงไม่ได้ (เครือข่ายของคุณหลุด คุณอยู่หลังไฟร์วอลล์ที่เข้มงวด โควตารายวันเต็ม หรือไฟล์เกินเพดานคลาวด์) เครื่องมือจะสลับอย่างโปร่งใสไปใช้โมเดลหรือโคเดกในเครื่องที่รันในเบราว์เซอร์ของคุณ เช่นโมเดลลบพื้นหลัง ISNet ผ่าน ONNX Runtime Web ด้วย WebAssembly การรันครั้งแรกจะดาวน์โหลดโมเดลและช้ากว่า การรันครั้งถัดไปจะเร็วกว่า ไม่มีการอัปโหลดบนเส้นทางสำรองเหล่านี้ คุณตรวจสอบได้ใน DevTools

4. คุณดาวน์โหลดผลลัพธ์

บิตแมปเอาต์พุตถูกเข้ารหัสเป็น Blob ห่อใน object URL และเสนอให้กล่องโต้ตอบบันทึกไฟล์ มาตรฐานของเบราว์เซอร์ ไฟล์ปรากฏบนดิสก์ของคุณ

วิธีตรวจสอบด้วยตัวคุณเอง

เลือกวิธีไหนก็ได้ที่คุณชอบ

วิธีที่ 1 เฝ้าดูแท็บ Network

1. เปิด RoundCut ในแท็บใหม่และเปิด DevTools → Network
2. ใช้เครื่องมือเฉพาะเบราว์เซอร์ Circle Crop หรือแถบเลื่อนตัวอย่างการบีบอัด คุณจะเห็นคำขอสำหรับ HTML/CSS/JS/ฟอนต์เท่านั้น บวกกับโมดูล WebAssembly ที่เกี่ยวข้องเมื่อใช้ครั้งแรก จะไม่มีคำขอใดนำไบต์รูปภาพของคุณไป
3. ตอนนี้ใช้เครื่องมือที่แตะเซิร์ฟเวอร์ การบีบอัด → ดาวน์โหลด หรือลบพื้นหลัง คุณจะเห็น POST เพียงครั้งเดียวที่นำรูปของคุณไป และการตอบกลับหนึ่งครั้งที่นำผลลัพธ์กลับมา วางเมาส์เหนือคำขอใดก็ได้เพื่อดูขนาดและเวลา

คอลัมน์ “Initiator” บอกคุณว่าสคริปต์ใดทริกเกอร์แต่ละคำขอ และคอลัมน์ “Type” บอกคุณว่ามี อะไรถูกส่งไป เราไม่ซ่อนทั้งสองอย่าง

วิธีที่ 2 ใช้เครื่องมือแบบออฟไลน์

1. โหลดหน้าเครื่องมือ RoundCut หน้าใด ใช้ลบพื้นหลังหนึ่งครั้งบนรูปเล็กๆ เพื่อให้โมเดล ISNet ในเบราว์เซอร์ถูกแคชไว้
2. เปิด DevTools → Network → ติ๊ก Offline (หรือปิด Wi-Fi)
3. โหลดหน้าใหม่ ทรัพยากรสแตติกถูกแคชไว้แล้ว มันจึงยังโหลดได้
4. ลองเครื่องมือต่างๆ
   • เครื่องมือเฉพาะเบราว์เซอร์ (Circle Crop การปรับขนาด ตัวอย่างการบีบอัด) ยังทำงานต่อไป มันไม่เคยต้องการเครือข่าย
   • การบีบอัดดาวน์โหลด ถอยกลับไปใช้ blob ตัวอย่างในเบราว์เซอร์ (การเข้ารหัสมีประสิทธิภาพน้อยลงเล็กน้อย แต่ยังใช้ได้)
   • ลบพื้นหลัง ถอยกลับไปใช้โมเดล WebAssembly ISNet และทำงานได้โดยไม่มีคำขอออกใดๆ

หากเครื่องมือทำงานออฟไลน์ได้ (ตัวที่มีคลาวด์หนุนหลังลดคุณภาพลงเล็กน้อย ตัวเฉพาะเบราว์เซอร์ เหมือนกันทุกอย่าง) ตามนิยามแล้วก็แปลว่าไม่มีเซิร์ฟเวอร์ใดเห็นรูปของคุณ

สิ่งที่เราเห็น และสิ่งที่เราไม่เห็น

บนเส้นทางฝั่งไคลเอนต์ เราไม่เห็นอะไรเลยเกี่ยวกับรูปของคุณ ไม่มีคำขอให้ดู ไม่มีแคชให้เก็บมัน ไม่มีบรรทัดบันทึกให้ grep

บนเส้นทางฝั่งเซิร์ฟเวอร์

• บริการบีบอัดและ PDF เห็นไบต์รูปภาพตลอดช่วงเวลาการเข้ารหัส (โดยทั่วไปไม่กี่ร้อยมิลลิวินาที) เก็บรายการแคชที่อ้างอิงตามเนื้อหาไว้ตลอด TTL ของแคช และเท่านั้น แคชไม่ได้จัดทำดัชนีตามผู้ใช้ IP ชื่อไฟล์ หรือตัวระบุใดที่เราใช้ค้นหารูป “ของคุณ” ได้ เราไม่บันทึกเนื้อหารูปภาพ บริการเข้ารหัสถูกใช้ร่วมกันโดยผู้เช่าสองรายเดียวกับที่ v1 ให้บริการก่อนการย้าย โดยมี CORS ต่อผู้เช่า การจำกัดอัตรา และ URL มาตรฐานที่ลงนามด้วย HMAC
• ลบพื้นหลังและเส้นทาง AI อื่น เห็นรูปตลอดช่วงเวลาการอัปโหลดพักและการเรียกโมเดล (โดยทั่วไปไม่กี่วินาที) หลังจากนั้นสำเนาที่พักไว้ถูกลบโดยกฎวงจรชีวิต R2 โมเดล BiRefNet รันอยู่ภายในโครงสร้างพื้นฐานของ Cloudflare เอง ไม่ใช่บน API ภายนอกแบบ remove.bg, fal.ai หรือ Replicate

บนทุกเส้นทาง ผู้ให้บริการวิเคราะห์ของเรา (Cloudflare Web Analytics) บันทึกข้อมูล ยอดการเข้าชมหน้าแบบรวม URL ประเทศ ตระกูลเบราว์เซอร์ Core Web Vitals ไม่มีคุกกี้ ไม่มี ตัวระบุถาวร ไม่มีอะไรผูกกับบุคคล

สำหรับเครื่องมือที่ดาวน์โหลดโมดูล WebAssembly เมื่อใช้ครั้งแรก (ตัวถอดรหัส HEIC โมเดล ISNet ONNX) ผู้ให้บริการโฮสติงของเราเห็นว่ามีใครบางคนดึงโมดูลนั้น แบบเดียวกับที่มันเห็นพวก เขาดึงไฟล์ CSS ตัวโมดูลเองไม่มีข้อมูลใดเกี่ยวกับรูปของคุณ

รายการข้อมูลทั้งหมดอยู่ในนโยบายความเป็นส่วนตัวของเรา

เทคโนโลยีสแต็ก

สำหรับผู้ที่อยากรู้

• Astro ตัวสร้างเว็บไซต์แบบสแตติก ทุกหน้าออกมาเป็น HTML ธรรมดาพร้อม “เกาะ” JavaScript ที่เสริมขึ้นทีละน้อยเฉพาะตรงที่มีเครื่องมือโต้ตอบ
• CSS ล้วนพร้อมคุณสมบัติกำหนดเอง ไม่มี Tailwind ไม่มี CSS-in-JS ระบบดีไซน์ทั้งหมดคือไฟล์ tokens.css ไฟล์เดียว
• canvas.toBlob / <canvas> การเข้ารหัส JPEG, PNG, WebP, AVIF (ที่เบราว์เซอร์รองรับ) ในเครื่องมือเฉพาะเบราว์เซอร์ และงานครอบตัดและปรับขนาดทั้งหมด
• Cropper.js ชั้นการโต้ตอบสี่เหลี่ยมครอบตัด
• ONNX Runtime Web รันตัวสำรอง WebAssembly ISNet สำหรับลบพื้นหลัง
• Cloudflare Pages โฮสต์บิลด์สแตติก ให้บริการจากขอบเครือข่าย
• Cloudflare Workers กับ R2 กับ cf.image.segment (BiRefNet) ไปป์ไลน์ลบพื้นหลังเริ่มต้น
• Fastify กับ sharp 0.34 กับ libvips 8.17 บน Node 24 บริการบีบอัดและ PDF ที่ api.roundcut.com.br บน VPS ของ Hostinger ในเยอรมนี
• Cloudflare Web Analytics การนับยอดการเข้าชมหน้าแบบรวม ไม่มีคุกกี้

การรองรับเบราว์เซอร์

ทุกเครื่องมือทำงานบนเวอร์ชันปัจจุบันและเวอร์ชันก่อนหน้าของ Chrome, Firefox, Safari และ Edge ทั้งเดสก์ท็อปและมือถือ เว็บไซต์ใช้การเสริมประสิทธิภาพทีละน้อย ในที่ที่เบราว์เซอร์รองรับ API ที่ใหม่กว่า (เช่น showSaveFilePicker, OffscreenCanvas) เราใช้มัน ในที่ที่ไม่รองรับ เราถอยกลับไปใช้สิ่งเทียบเท่าที่เก่ากว่า ไม่มีกำแพง “เบราว์เซอร์ของคุณไม่ได้รับการรองรับ”

ข้อกำหนดเด็ดขาดเพียงอย่างเดียวคือ JavaScript (สำหรับเครื่องมือใดก็ตาม) และการเชื่อมต่อ เครือข่าย (เฉพาะตอนใช้เครื่องมือที่มีคลาวด์หนุนหลังบนเส้นทางเริ่มต้นของมัน เครื่องมือเฉพาะ เบราว์เซอร์ทำงานออฟไลน์เต็มที่หลังจากโหลดหน้าครั้งแรก)

คำถาม

มีอะไรที่เรายังไม่ได้พูดถึงหรือเปล่า ส่งอีเมลมาที่ support@roundcut.app ยินดีรับคำถามเชิงเทคนิค