Hasil pemotongan gambar produk sering kali terlihat sempurna saat ditampilkan di atas pratinjau bermotif papan catur. Namun, setelah berkas tersebut dikonversi menjadi JPEG, area di sekeliling produk berubah menjadi bidang persegi panjang yang solid. Ketika gambar tersebut ditempatkan pada situs web bertema gelap, batas persegi panjang tersebut seketika terlihat sangat mencolok. Proses ekspor mungkin valid secara teknis, tetapi alur kerja tersebut gagal memperhitungkan keputusan penting: warna latar belakang apa yang menggantikan bagian transparan dari gambar? Transparansi adalah bagian dari komposisi gambar, bukan sekadar rincian kosmetik yang dapat diabaikan saat memilih format berkas. Mengonversi ke JPEG berarti berkomitmen pada hasil akhir yang sepenuhnya opak. Berikut adalah pendekatan praktis untuk menetapkan komitmen tersebut secara matang, baik saat membangun alat pengolah gambar maupun menyiapkan aset visual untuk etalase digital.

Memahami Transparansi dan Latar Belakang Papan Catur

Pola papan catur pada dasarnya hanyalah latar belakang pratinjau. Pratinjau transparansi sering menempatkan gambar di atas kotak-kotak abu-abu berselang-seling untuk membantu pengguna melihat area yang tidak memiliki konten opak. Pola kotak-kotak tersebut sama sekali tidak tersimpan di dalam berkas gambar itu sendiri. Perbedaan ini sangat mendasar ketika seseorang meminta untuk mempertahankan papan catur atau berasumsi bahwa berkas sudah memiliki latar belakang abu-abu. Pada gambar raster dengan saluran alfa, setiap piksel dapat bersifat opak, transparan penuh, atau sebagian transparan. Piksel semi-transparan ini umum ditemukan di sekitar tepian anti-alias dan bayangan lembut. Panduan format gambar MDN mendokumentasikan dukungan transparansi pada format seperti PNG dan WebP. Sebaliknya, format JPEG standar tidak mempertahankan saluran alfa. Mengubah ekstensi nama berkas dari .png menjadi .jpg tidak menjalankan konversi. Enkoder sebenarnya harus membuat bita JPEG, dan gambar yang dihasilkan harus berpenampilan opak.

Menentukan Warna Latar Berdasarkan Kebutuhan Desain

Penentuan tujuan penggunaan gambar harus dilakukan sebelum memilih warna latar belakang perataan. Berbagai konteks tujuan membutuhkan keputusan awal dan fokus pemeriksaan yang berbeda. Misalnya, kartu produk pada halaman putih sebaiknya diratakan ke warna putih yang disepakati dengan memeriksa tepi produk serta bayangan tipis. Spanduk kampanye berwarna harus diratakan ke latar belakang persis dari spanduk guna menghindari garis sambungan di sekitar persegi panjang gambar. Logo yang digunakan melintasi tema terang dan gelap sebaiknya tetap mempertahankan transparansi jika didukung, sembari memeriksa kontras pada kedua tema. Sementara itu, sistem penerima yang hanya menerima JPEG memerlukan pemilihan serta pratinjau matte opak sebelum diunggah.

Warna putih merupakan pilihan latar belakang yang umum, tetapi hal tersebut tetap merupakan sebuah keputusan desain. Jika sebuah halaman web menggunakan latar belakang off-white hangat dan gambar diratakan ke putih murni, batas persegi panjang gambar akan tetap terlihat. Untuk aset visual yang ditujukan pada banyak latar belakang, mempertahankan transparansi jauh lebih fleksibel. Pastikan sistem penerima mendukung format tersebut dan seluruh alur kerja mempertahankan saluran alfa. Namun, jika gambar ditujukan untuk latar belakang opak yang sudah pasti, perataan sangat tepat dilakukan. Pertanyaan utamanya adalah memastikan apakah matte yang dipilih cocok dengan lingkungan penempatan gambar, bukan mencari cara agar piksel transparan dapat bertahan di dalam ekspor JPEG.

Prinsip Komposisi Visual dan Perhitungan Saluran Warna

Proses perataan pada hakikatnya merupakan operasi komposisi visual. Untuk piksel sumber yang memiliki sifat semi-transparan di atas latar belakang opak, perhitungan saluran warna yang disederhanakan adalah:

result = alpha × foreground + (1 − alpha) × background

Sebagai contoh, apabila nilai alfa adalah 0,5, nilai saluran latar depan bernilai 40, dan nilai saluran latar belakang bernilai 240, maka hasil perhitungan yang disederhanakan adalah 140. Contoh perhitungan ini menjelaskan mengapa mengubah latar belakang juga mengubah tampilan visual piksel di area tepian. Rumus ini bukanlah spesifikasi teknis lengkap untuk setiap alur perenderan dengan manajemen warna, karena ruang warna dan detail implementasi sangat menentukan akurasi pada pekerjaan presisi. Bayangan lembut juga berbaur ke latar belakang pilihan dengan cara serupa. Setelah perataan, piksel yang diekspor tidak lagi menyimpan nilai alfa asli yang diperlukan untuk merekomposisi bayangan tersebut di atas warna lain. Oleh karena itu, hasil opak harus diperlakukan sebagai berkas turunan spesifik untuk tujuan tertentu, dan master transparan asli harus tetap disimpan jika Anda memerlukan variasi lain di kemudian hari.

Implementasi Ekspor Gambar Melalui Canvas API

Urutan penggambaran pada canvas harus ditentukan secara eksplisit. Untuk ekspor canvas sederhana, urutan langkahnya jelas: buat canvas keluaran dengan dimensi yang diinginkan, isi seluruh canvas dengan latar belakang opak pilihan, gambar sumber terdekode di atas isian tersebut, enkode hasilnya sebagai JPEG, lalu pastikan proses enkoding menghasilkan Blob JPEG yang valid dan tidak kosong. Berikut implementasi referensi terfokus yang menerima objek ImageBitmap terdekode, menggunakan dimensi aslinya, serta membatasi warna latar belakang hanya pada format heksadesimal enam digit yang opak:

async function flattenBitmapToJPEG(bitmap, {
  background = "#ffffff",
  quality = 0.85,
} = {}) {
  if (!/^#[0-9a-f]{6}$/i.test(background)) {
    throw new TypeError("Use an opaque #RRGGBB background");
  }
  if (!Number.isFinite(quality) || quality < 0 || quality > 1) {
    throw new RangeError("Quality must be between 0 and 1");
  }
  if (!Number.isInteger(bitmap.width) || bitmap.width <= 0 ||
      !Number.isInteger(bitmap.height) || bitmap.height <= 0) {
    throw new RangeError("Bitmap dimensions must be positive integers");
  }

  const canvas = document.createElement("canvas");
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Canvas 2D is unavailable");

  ctx.fillStyle = background;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(bitmap, 0, 0);

  const blob = await new Promise((resolve, reject) => {
    try {
      canvas.toBlob(result => {
        if (!result || result.size === 0) {
          reject(new Error("JPEG export failed"));
        } else {
          resolve(result);
        }
      }, "image/jpeg", quality);
    } catch (error) {
      reject(error);
    }
  });

  if (blob.type !== "image/jpeg") {
    throw new Error(`Unexpected export type: ${blob.type}`);
  }
  return blob;
}

API peramban yang relevan untuk alur tersebut didokumentasikan dalam fillRect, drawImage, dan toBlob. Contoh kode ini bukan implementasi internal milik BatchSet dan tidak menangani proses decoding, resampling, animasi, kebijakan orientasi, kesetiaan wide-gamut, maupun batasan sumber daya. Pemanggil bertanggung jawab penuh atas objek bitmap dan harus menutupnya saat tidak lagi digunakan. Selain itu, membuat canvas baru untuk setiap ekspor membantu menghindari pewarisan transformasi atau nilai opasitas dari operasi penggambaran sebelumnya, yang harus dikendalikan secara ketat jika menggunakan kembali canvas yang sama.

Pengembang juga tidak boleh membiarkan status opasitas global memengaruhi gambar dasar. Alat yang menggambar beberapa lapisan berurutan dapat secara tidak sengaja membawa status grafis dari satu operasi ke operasi berikutnya. Sebagai contoh, jika opasitas 0,3 diterapkan saat menggambar tanda air lalu gambar produk berikutnya digambar tanpa memulihkan konteks, tepi transparan dan bagian tengah yang opak akan berbaur secara keliru. Perlakukan setiap tahap penggambaran sebagai operasi independen dengan status yang terkontrol. Jika konteks bersama harus digunakan, simpan status sebelum modifikasi sementara dan pulihkan sesudahnya. Lapisan berikutnya tidak boleh bergantung pada apakah gambar sebelumnya menggunakan tanda air. Prinsip ini juga mendasari mengapa tampilan pratinjau harus menerapkan kebijakan komposisi yang sama dengan ekspor guna mencegah ketidakcocokan tampilan.

Mendiagnosis Masalah Efek Halo pada Tepian Gambar

  • Efek halo atau tepian terang sering kali sudah ada sejak dari berkas sumber. Perataan tidak menjamin hasil tepian yang sempurna jika pemotongan awal mengandung piksel batas semi-transparan yang terkontaminasi warna latar lama. Gambar tersebut mungkin terlihat rapi di latar putih, tetapi memperlihatkan tepian terang di latar hijau gelap. Sebelum mengubah pengaturan, kenali penyebabnya melalui pertanyaan diagnostik: Apakah tepian muncul saat berkas transparan diletakkan di atas warna tujuan? Apakah masalah baru terlihat setelah pengubahan ukuran gambar? Apakah batas tampak setelah kompresi lossy? Ataukah gambar sumber sebenarnya tangkapan layar dari pratinjau transparansi? Menaikkan kualitas JPEG tidak akan memperbaiki kesalahan pemotongan sumber, dan mengganti latar belakang tidak dapat memulihkan detail yang hilang. Tinjau berkas asli di atas berbagai latar belakang solid dan perbaiki pemotongan pada tahap penyuntingan jika masalah sudah ada sebelum ekspor.
  • Antarmuka ekspor sebaiknya menampilkan kontrol latar belakang eksplisit dan mempratinjau hasil opak sebelum proses unduhan dilakukan. Pratinjau harus memperjelas apakah sistem sedang menampilkan transparansi asli atau komposit JPEG yang diusulkan. Papan catur berguna untuk memeriksa berkas sumber, tetapi menyesatkan jika menjadi satu-satunya pratinjau untuk ekspor format opak. Setelah enkoding, buka kembali keluaran sebenarnya untuk pratinjau akhir guna menangkap perbedaan yang disebabkan oleh enkoder. Periksa tepian halus, bayangan semi-transparan, teks kecil, dan latar belakang halaman yang dituju. Pada pemrosesan massal, sertakan sampel dengan subjek terang dan gelap, serta bedakan penamaan berkas master transparan dengan turunan JPEG bermatte agar tidak membingungkan proses penyuntingan di masa depan.
  • Konverter PNG ke JPG milik BatchSet memproses konversi langsung di dalam peramban dan meratakan area transparan ke warna putih secara default. Kebijakan keluaran konkret ini perlu dipertimbangkan sebelum memilih alat untuk kebutuhan dengan latar belakang lain. Jika Anda membutuhkan transparansi yang fleksibel, pertahankan format berkemampuan alfa seperti PNG atau alur kerja WebP yang sesuai. Namun, jika Anda memerlukan JPEG, perlakukan latar belakang sebagai bagian permanen dari gambar yang diekspor dan verifikasi hasil komposisi akhir di tempat gambar tersebut akan digunakan.