Sedekad lalu, menyunting imej pada laman web bermakna memuat naiknya, menunggu pelayan melakukan kerja, dan memuat turun hasilnya. Hari ini pelayar boleh memampat foto 30 MB, menukar PNG kepada WebP, atau mengubah saiz kelompok imej tanpa pernah menghubungi pelayan. Dua teknologi menjadikan peralihan itu mungkin: Canvas dan WebAssembly. Tiada satu pun misteri sebaik anda melihat apa yang setiap satu lakukan.
Canvas: permukaan lukisan dengan akses peringkat-piksel
Setiap pelayar moden dihantar dengan API Canvas — segi empat tepat kosong yang boleh anda lukis dengan JavaScript. Kuasa sebenarnya untuk alat imej bukan melukis bentuk; ia bahawa Canvas memberi kod akses terus kepada piksel individu imej.
Apabila anda memuatkan foto ke dalam kanvas, pelayar menyerahkan kod anda tatasusunan nombor: nilai merah, hijau, biru, dan alfa (ketelusan) bagi setiap piksel. Dari situ, operasi biasa menjadi mudah:
- Mengubah saiz bermaksud mengsampel grid piksel itu menjadi yang lebih kecil atau lebih besar.
- Memangkas bermaksud menyalin kawasan segi empat tepat ke dalam kanvas baharu.
- Memutar dan membalik ialah transformasi geometri yang dikenakan sebelum melukis.
- Penukaran format berlaku apabila anda mengeksport kanvas — minta JPEG, PNG, atau WebP dan pelayar mengekod piksel dengan sewajarnya.
Semua ini berjalan pada peranti anda sendiri, menggunakan CPU anda dan, di mana tersedia, GPU anda. Tiada yang dimuat naik, kerana piksel tidak pernah meninggalkan halaman. Itulah sebab Penukar Imej boleh menukar PNG menjadi WebP saat anda meletakkannya — tiada pusingan untuk ditunggu.
WebAssembly: kelajuan hampir-asli dalam pelayar
Canvas mengendalikan transformasi biasa, tetapi sesetengah kerja perlukan otot pengiraan serius — pengekodan JPEG berkualiti tinggi, pengoptimuman PNG, menjalankan model AI untuk memotong latar belakang. JavaScript sahaja boleh terlalu perlahan untuk ini. Di situlah WebAssembly (sering dipendekkan kepada Wasm) masuk.
WebAssembly ialah format padat peringkat-rendah yang pelayar boleh laksanakan pada hampir kelajuan asli. Pembangun mengambil kod pantas yang teruji perang yang ditulis dalam bahasa seperti C, C++, atau Rust — pustaka yang sama yang menggerakkan perisian imej desktop — dan mengompilnya kepada Wasm. Pelayar kemudian menjalankan kod itu dalam persekitaran ketat berkotak pasir, jauh lebih pantas daripada JavaScript setara.
Dalam amalan ini bermakna tab pelayar kini boleh melakukan kerja yang dahulunya memerlukan pelayan atau aplikasi desktop: mengekod imej dengan pemampatan gred-pro, membuang metadata, atau menjalankan rangkaian neural untuk penyingkiran latar belakang — semuanya secara setempat.
Mengapa pemprosesan setempat kedua-dua peribadi dan pantas
Gabungkan Canvas dan WebAssembly dan manfaatnya terhasil secara semula jadi.
Privasi bersifat struktur, bukan janji. Kerana piksel kekal dalam halaman dan pemprosesan berjalan pada CPU anda, tiada langkah muat naik. Tiada salinan pelayan fail anda untuk disimpan, dilog, dicache, atau dilatih — kerana fail tidak pernah dihantar. Anda tidak perlu mempercayai dasar privasi; anda boleh mengesahkannya dengan menghidupkan mod pesawat dan menonton alat terus berfungsi.
Kelajuan datang daripada memotong rangkaian sepenuhnya. Langkah paling perlahan alat pelayan biasanya menghantar fail anda naik dan kembali ke bawah. Buang itu, dan foto 40 MB diproses lebih kurang sepantas foto 40 KB. Tiada juga baris gilir — peranti anda bekerja pada imej anda sahaja, bukan beribu orang lain.
Ada bonus yang kebanyakan orang tidak jangka: kerana keseluruhan alat hanyalah kod dan aset, pelayar boleh mencachenya. IMG.DIY ialah PWA dengan pekerja perkhidmatan, jadi selepas lawatan pertama anda alat disimpan pada peranti anda dan terus berfungsi luar talian — dalam mod pesawat, dalam kapal terbang, di mana-mana. Memampat dan menukar tidak perlukan sambungan langsung.
Tolak ansur, secara jujur
Pemprosesan dalam-pelayar bukan sihir dan ia tidak bebas daripada had. Kelompok yang sangat besar boleh membebankan memori telefon peringkat-rendah, kerana kerja menggunakan sumber peranti anda dan bukan pusat data. Dan beberapa ciri benar-benar perlukan rangkaian — apa sahaja yang memanggil perkhidmatan luaran, seperti audit kelajuan halaman, tidak boleh berjalan luar talian. Penyingkiran latar belakang ialah kes tengah: ia berjalan secara setempat, tetapi hanya selepas muat turun fail model sekali.
Namun untuk kerja harian — mampat, tukar, ubah saiz, pangkas, putar — pelayar kini ialah bengkel imej yang lengkap, peribadi, pantas yang kebetulan hidup dalam tab. Tanpa muat naik, tanpa pelayan, tanpa menunggu.