สิบปีก่อน การแก้ภาพบนเว็บไซต์หมายถึงการอัปโหลดมัน รอให้เซิร์ฟเวอร์ทำงาน และดาวน์โหลดผลลัพธ์ วันนี้เบราว์เซอร์บีบอัดภาพ 30 MB แปลง PNG เป็น WebP หรือปรับขนาดภาพเป็นชุดได้โดยไม่ต้องติดต่อเซิร์ฟเวอร์เลย เทคโนโลยีสองอย่างทำให้การเปลี่ยนแปลงนั้นเป็นไปได้: Canvas และ WebAssembly ทั้งสองไม่ลึกลับเมื่อคุณเห็นว่าแต่ละอันทำอะไร
Canvas: พื้นผิววาดที่เข้าถึงได้ระดับพิกเซล
เบราว์เซอร์สมัยใหม่ทุกตัวมาพร้อม Canvas APIสี่เหลี่ยมเปล่าที่คุณวาดได้ด้วย JavaScript พลังที่แท้จริงของมันสำหรับเครื่องมือรูปภาพไม่ใช่การวาดรูปทรง แต่คือ Canvas ให้โค้ดเข้าถึงพิกเซลแต่ละอันของภาพได้โดยตรง
เมื่อคุณโหลดภาพเข้าผืนผ้าใบ เบราว์เซอร์ส่งอาร์เรย์ของตัวเลขให้โค้ดของคุณ: ค่าแดง เขียว น้ำเงิน และอัลฟา (ความโปร่งใส) ของทุกพิกเซล จากตรงนั้น การทำงานทั่วไปก็ตรงไปตรงมา:
- การปรับขนาด หมายถึงการสุ่มตัวอย่างตารางพิกเซลนั้นเข้าตารางที่เล็กหรือใหญ่กว่า
- การครอป หมายถึงการคัดลอกบริเวณสี่เหลี่ยมเข้าผืนผ้าใบใหม่
- การหมุนและพลิก คือการแปลงเชิงเรขาคณิตที่ใช้ก่อนวาด
- การแปลงรูปแบบ เกิดขึ้นเมื่อคุณส่งออกผืนผ้าใบขอ JPEG, PNG หรือ WebP แล้วเบราว์เซอร์เข้ารหัสพิกเซลตามนั้น
ทั้งหมดนี้ทำงานบนเครื่องของคุณเอง โดยใช้ CPU ของคุณ และที่มี ก็ GPU ของคุณ ไม่มีอะไรถูกอัปโหลด เพราะพิกเซลไม่เคยออกจากหน้า นั่นคือเหตุผลที่เครื่องมือแปลงภาพเปลี่ยน PNG เป็น WebP ได้ทันทีที่คุณวางมันลงไปไม่มีการเดินทางไป-กลับให้รอ
WebAssembly: ความเร็วใกล้เนทีฟภายในเบราว์เซอร์
Canvas จัดการการแปลงทั่วไป แต่บางงานต้องการกำลังคำนวณจริงจังการเข้ารหัส JPEG คุณภาพสูง การปรับ PNG ให้เหมาะ การรันโมเดล AI เพื่อตัดพื้นหลัง JavaScript ลำพังอาจช้าเกินไปสำหรับสิ่งเหล่านี้ นั่นคือที่ที่ WebAssembly (มักย่อเป็น Wasm) เข้ามา
WebAssembly เป็นรูปแบบระดับต่ำที่กะทัดรัดซึ่งเบราว์เซอร์ประมวลผลได้ที่ความเร็วใกล้เนทีฟ นักพัฒนาเอาโค้ดที่เร็วและผ่านการทดสอบมาแล้วซึ่งเขียนด้วยภาษาอย่าง C, C++ หรือ Rustไลบรารีเดียวกับที่ขับเคลื่อนซอฟต์แวร์ภาพเดสก์ท็อปแล้วคอมไพล์เป็น Wasm เบราว์เซอร์แล้วรันโค้ดนั้นในสภาพแวดล้อมแซนด์บ็อกซ์ที่แน่นหนา เร็วกว่า JavaScript ที่เทียบเท่ามาก
ในทางปฏิบัติ นี่หมายความว่าแท็บเบราว์เซอร์ตอนนี้ทำงานที่เคยต้องใช้เซิร์ฟเวอร์หรือแอปเดสก์ท็อปได้: เข้ารหัสภาพด้วยการบีบอัดระดับมืออาชีพ ลบเมทาดาทา หรือรันโครงข่ายประสาทเพื่อลบพื้นหลังทั้งหมดในเครื่อง
ทำไมการประมวลผลในเครื่องทั้งเป็นส่วนตัวและเร็ว
รวม Canvas และ WebAssembly เข้าด้วยกันแล้วประโยชน์ก็ตกออกมาเองอย่างเป็นธรรมชาติ
ความเป็นส่วนตัว เป็นเชิงโครงสร้าง ไม่ใช่คำสัญญา เพราะพิกเซลอยู่ในหน้าและการประมวลผลทำงานบน CPU ของคุณ จึงไม่มีขั้นตอนอัปโหลด ไม่มีสำเนาไฟล์ของคุณบนเซิร์ฟเวอร์ให้จัดเก็บ บันทึก แคช หรือฝึกเพราะไฟล์ไม่เคยถูกส่ง คุณไม่ต้องไว้ใจนโยบายความเป็นส่วนตัว คุณยืนยันมันได้โดยเปิดโหมดเครื่องบินและดูเครื่องมือทำงานต่อ
ความเร็ว มาจากการตัดเครือข่ายออกทั้งหมด ขั้นตอนที่ช้าที่สุดของเครื่องมือเซิร์ฟเวอร์มักคือการรับส่งไฟล์ของคุณขึ้นและกลับลงมา เอาอันนั้นออก แล้วภาพ 40 MB ประมวลผลเร็วพอ ๆ กับภาพ 40 KB และไม่มีคิวเครื่องของคุณทำงานกับภาพของคุณเพียงอย่างเดียว ไม่ใช่ของคนอีกหลายพัน
มีโบนัสที่คนส่วนใหญ่ไม่คาด: เพราะทั้งเครื่องมือเป็นแค่โค้ดและแอสเซต เบราว์เซอร์จึงแคชมันได้ IMG.DIY เป็น PWA ที่มี service worker หลังเข้าครั้งแรก เครื่องมือจึงถูกเก็บบนเครื่องของคุณและทำงานต่อได้ แบบออฟไลน์ในโหมดเครื่องบิน บนเครื่องบิน ที่ไหนก็ได้ การบีบอัดและการแปลงไม่ต้องการการเชื่อมต่อเลย
การแลกเปลี่ยน แบบตรงไปตรงมา
การประมวลผลในเบราว์เซอร์ไม่ใช่เวทมนตร์และไม่ปราศจากขีดจำกัด ชุดที่ใหญ่มากอาจทำให้หน่วยความจำของมือถือระดับล่างตึง เพราะงานใช้ทรัพยากรของเครื่องคุณแทนของศูนย์ข้อมูล และฟีเจอร์ไม่กี่อย่างต้องการเครือข่ายจริง ๆอะไรที่เรียกบริการภายนอก เช่น การตรวจสอบความเร็วหน้า รันแบบออฟไลน์ไม่ได้ การลบพื้นหลังเป็นกรณีตรงกลาง: มันรันในเครื่อง แต่หลังการดาวน์โหลดไฟล์โมเดลครั้งเดียวเท่านั้น
แต่สำหรับงานประจำวันบีบอัด แปลง ปรับขนาด ครอป หมุนเบราว์เซอร์ตอนนี้เป็นเวิร์กช็อปภาพที่ครบ เป็นส่วนตัว และเร็วที่บังเอิญอยู่ในแท็บ ไม่มีการอัปโหลด ไม่มีเซิร์ฟเวอร์ ไม่มีการรอ