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

คำตอบสั้นๆ

RoundCut รันเครื่องมือทุกอย่างในเบราว์เซอร์ของคุณโดยใช้ API สองตัวที่เป็นของเบราว์เซอร์โดยตรง: HTML5 Canvas API สำหรับการทำงานระดับพิกเซล และ WebAssembly สำหรับงานที่หนักกว่า ได้แก่ การเข้ารหัส/ถอดรหัสรูปแบบภาพและการอนุมาน AI ไม่มีอะไรถูกอัปโหลด ไม่มีอะไรถูกประมวลผลบนเซิร์ฟเวอร์ของเรา เพราะเราไม่ได้เดินเซิร์ฟเวอร์ที่แตะต้องไฟล์ของคุณ

คุณสามารถตรวจสอบสิ่งนี้ได้ในราว 30 วินาที: เปิด DevTools ของเบราว์เซอร์ สลับไปที่แท็บ Network ล้างล็อก แล้วใช้เครื่องมือใดก็ได้ คำขอเครือข่ายเดียวที่คุณจะเห็นคือสำหรับไฟล์ static ของเว็บไซต์ — HTML, CSS, JavaScript, ฟอนต์ และโมดูล WebAssembly ภาพของคุณไม่เคยออกจากหน้าเลย

ทำไมต้องฝั่ง Client

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

เบราว์เซอร์สามารถทำงานส่วนใหญ่นี้ได้โดยตรงมาหลายปีแล้ว องค์ประกอบ <canvas> จัดการการครอบตัด การหมุน การปรับขนาด และการเข้ารหัสใหม่ WebAssembly ช่วยให้เราเรียกใช้ ไลบรารี C/Rust ชุดเดียวกับที่ Squoosh ใช้ ได้แก่ MozJPEG, libwebp, libavif และ Oxipng ด้วยความเร็วใกล้เคียงกับ native เมื่อเราเปิดตัวการสร้างใหม่ปี 2026 เบราว์เซอร์ก็ทันกับ ชุดเครื่องมือแก้ไขภาพบนเดสก์ท็อปอย่างมีประสิทธิภาพแล้ว ไม่มีเหตุผลอีกต่อไปที่จะเกี่ยวข้องกับเซิร์ฟเวอร์

ผลลัพธ์คือ stack ที่มีคุณสมบัติสามประการที่เสริมกัน: ความเป็นส่วนตัว (ไฟล์ของคุณไม่เคยออกจากอุปกรณ์ของคุณ), ความเร็ว (ไม่มีการอัปโหลด ไม่มีคิว ไม่มีการเดินทางไปกลับสู่เซิร์ฟเวอร์) และ ต้นทุน (เราให้บริการไฟล์ static จาก CDN ในราคาไม่กี่สตางค์ต่อเดือน ไม่ว่าจะมีคนใช้เครื่องมือกี่คน)

ไปป์ไลน์ ทีละขั้นตอน

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

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

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

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

3. เครื่องมือทำงาน

สิ่งที่เกิดขึ้นต่อไปขึ้นอยู่กับเครื่องมือ RoundCut มีสามเครื่องมือในปัจจุบัน:

• Circle Crop — การแปลงพิกเซล Canvas 2D ด้วยเส้นทางตัดรูปวงกลม Bitmap ถูกวาดใน <canvas> ด้วยการหมุนและซูมที่เลือก ใช้การตัดวงกลม และอ่านส่วนในของวงกลมกลับเป็น ImageData Cropper.js จัดการกรอบครอบตัดแบบโต้ตอบ
• Compress — เข้ารหัสใหม่ JPG, PNG, WebP หรือ AVIF โดยใช้โมดูล WebAssembly ของ jSquash (MozJPEG, libwebp, libavif, Oxipng) นี่คือตัวแปลงรหัสต้นทางเดียวกับที่ Squoosh ใช้ ทำงานใน Web Worker เพื่อให้ UI ยังตอบสนองได้ขณะเข้ารหัสภาพหลายเมกะพิกเซล และการแสดงตัวอย่างแบบเคียงข้างกันให้คุณเห็นความแตกต่างก่อนยืนยัน
• Remove Background — โมเดล AI ขนาดเล็กในรูปแบบ ONNX (ไม่กี่ MB ดาวน์โหลดครั้งเดียวและแคชไว้) ทำงานในเบราว์เซอร์ของคุณผ่าน ONNX Runtime Web โดยมี WebAssembly เป็น execution backend การทำงานครั้งแรกดาวน์โหลดโมเดล ทุกครั้งหลังจากนั้นทำงานในเครื่องทันที

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

Bitmap ผลลัพธ์ถูกเข้ารหัสเป็น Blob ห่อด้วย object URL และเสนอให้กล่องโต้ตอบบันทึกไฟล์มาตรฐานของเบราว์เซอร์ ในกรณีที่รองรับ เราใช้ File System Access API เพื่อให้คุณเลือกโฟลเดอร์ปลายทางได้โดยตรง ไฟล์ปรากฏบนดิสก์ของคุณ ไม่มีอะไรผ่านเซิร์ฟเวอร์เลย

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

การอ้างสิทธิ์ “ไม่มีการอัปโหลด” สามารถตรวจสอบได้ในสองนาที เลือกวิธีที่คุณชอบ:

วิธีที่ 1 — ดูแท็บ Network

1. เปิด RoundCut ในแท็บใหม่
2. เปิด DevTools (F12 หรือคลิกขวา → ตรวจสอบ) แล้วสลับไปที่แท็บ Network
3. คลิกปุ่ม “clear” ในแท็บ Network เพื่อเริ่มต้นใหม่
4. ใช้เครื่องมือใดก็ได้: โหลดรูปภาพ แก้ไข ดาวน์โหลดผลลัพธ์
5. ดูล็อก Network คุณจะเห็นคำขอสำหรับ HTML, CSS, JS, ฟอนต์ และ (เมื่อใช้เครื่องมือที่หนักกว่าเป็นครั้งแรก) โมดูล WebAssembly ที่เกี่ยวข้อง คุณจะไม่เห็นคำขอใดที่มีไบต์ของภาพของคุณ

คอลัมน์ “Initiator” บอกคุณว่าสคริปต์ใดเรียกใช้คำขอแต่ละรายการ และ คอลัมน์ “Type” บอกคุณว่าส่งอะไรไป กรองตาม “Fetch/XHR” เพื่อมุ่งเน้นที่คำขอข้อมูล คุณจะเห็นว่าทั้งหมดเล็ก ทั้งหมดมุ่งไปที่แหล่งที่มา static และไม่มีที่มีไฟล์ของคุณ

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

1. โหลดหน้าเครื่องมือ RoundCut ใดก็ได้ ใช้ครั้งหนึ่งเพื่อให้โมดูล WebAssembly ที่เกี่ยวข้องถูกแคช
2. เปิด DevTools ไปที่แท็บ Network แล้วทำเครื่องหมายที่ช่อง Offline (หรือปิด Wi-Fi)
3. โหลดหน้าใหม่ ยังคงโหลดได้เพราะเบราว์เซอร์แคชไฟล์ static ไว้
4. ใช้เครื่องมืออีกครั้ง ตั้งแต่ต้นจนจบ ยังคงทำงานได้

ถ้าเครื่องมือทำงานได้แบบออฟไลน์ โดยนิยามแล้วมันไม่ได้ติดต่อเซิร์ฟเวอร์ระหว่างการทำงาน นี่คือหลักฐานที่แข็งแกร่งที่สุดที่เป็นไปได้ งานเกิดขึ้นบนเครื่องของคุณ เพราะไม่มีเครื่องอื่นที่เข้าถึงได้

สิ่งที่เราเห็น

เพื่อความชัดเจนเกี่ยวกับสิ่งที่เก็บรวบรวม: เมื่อคุณโหลดหน้า ผู้ให้บริการ analytics ของเรา (Cloudflare Web Analytics) บันทึกว่า เบราว์เซอร์บางตัว โหลด URL นั้น จาก บางประเทศ ไม่มีคุกกี้ ไม่มีตัวระบุถาวร ไม่มีอะไรผูกกับบุคคล

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

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

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

สำหรับผู้ที่อยากรู้ นี่คือสิ่งที่ RoundCut สร้างขึ้นบน:

• Astro — ตัวสร้างเว็บไซต์แบบ static ทุกหน้าถูกส่งเป็น HTML ธรรมดา พร้อม JavaScript “islands” แบบ progressive enhancement เฉพาะที่เครื่องมือเชิงโต้ตอบอยู่
• CSS ธรรมดาพร้อม custom properties — ไม่มี Tailwind ไม่มี CSS-in-JS ระบบออกแบบทั้งหมดคือไฟล์ tokens.css ไฟล์เดียว
• jSquash — WebAssembly bindings ไปยัง MozJPEG, libwebp, libavif และ Oxipng สำหรับการเข้ารหัสภาพ
• Cropper.js — เลเยอร์การโต้ตอบสี่เหลี่ยมครอบตัดสำหรับเครื่องมือครอบตัด
• ONNX Runtime Web — รันโมเดลลบพื้นหลังในเบราว์เซอร์ของคุณผ่าน WebAssembly
• Cloudflare Pages — โฮสต์ build แบบ static ให้บริการจาก edge และจัดเตรียม DNS พร้อมการป้องกัน DDoS
• Cloudflare Web Analytics — การนับ pageview แบบรวมโดยไม่มีคุกกี้

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

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

ข้อกำหนดที่แน่วแน่เพียงอย่างเดียวคือ JavaScript เมื่อปิด JavaScript เครื่องมือ ทำงานไม่ได้ ไม่มี fallback ฝั่งเซิร์ฟเวอร์เพราะไม่มีเซิร์ฟเวอร์ที่ทำงานประมวลผลภาพ

คำถาม

มีอะไรที่เราไม่ได้ครอบคลุม? ส่งอีเมลมาที่ support@araluma.com ยินดีรับคำถามทางเทคนิค