Pemutar Gambar Gratis

90/180/270 vs semuanya, garis lossless

Ada dua jenis rotasi gambar yang sepenuhnya berbeda. Rotasi persis 90°, 180°, atau 270° bersifat lossless: setiap piksel sumber jatuh tepat pada satu piksel tujuan integer, bitmap dipermutasikan bukan dihitung ulang, dan tidak ada interpolasi, tidak ada pencampuran, tidak ada kehilangan kualitas sama sekali. Rotasi 90° searah jarum jam memetakan piksel (x, y) dalam gambar W × H ke posisi (H − 1 − y, x) dalam output H × W yang baru. Rotasi 180° memetakan (x, y) ke (W − 1 − x, H − 1 − y). Operasi-operasi ini murni shuffling memori.

Sudut lain mana pun memerlukan resampling: untuk setiap piksel tujuan, algoritme menghitung dari mana piksel tersebut berasal di sumber (dengan rotasi terbalik), menemukan bahwa lokasi sumber umumnya fraksional, dan menggabungkan piksel sumber di sekitarnya menggunakan kernel interpolasi. Kernel yang umum:

• Nearest neighbour: memilih satu piksel sumber terdekat. Cepat, mempertahankan tepi yang tajam, tetapi menghasilkan «jaggies» yang terlihat di sepanjang garis yang diputar.
• Bilinear: rata-rata berbobot dari empat piksel sumber terdekat. Halus, cepat, default untuk sebagian besar implementasi canvas browser.
• Bicubic: rata-rata berbobot dari 16 piksel sumber terdekat menggunakan kernel cubic yang halus. Lebih tajam dari bilinear; default dalam opsi bicubic Photoshop.
• Lanczos: fungsi sinc-berjendela dalam lingkungan 6×6 atau 8×8. Kernel berkualitas tertinggi yang umum digunakan; jauh lebih lambat; dapat menghasilkan artefak ringing pada tepi tajam.

Setiap kernel memperdagangkan pelestarian detail terhadap ringing atau blurring, dan semuanya berbagi satu kebenaran: rotasi non-90 membuang sebagian informasi sumber. Detail frekuensi tinggi yang halus (garis satu piksel, tepi teks yang diposisikan sub-piksel, pixel art yang di-alias dengan bersih) tidak dapat bertahan dari rotasi 30° atau 45° melalui kernel mana pun tanpa sedikit pelunakan. Intuisi yang berguna: putar 1°, lalu balik −1°, dan Anda tidak mendapatkan aslinya, Anda mendapatkan salinan yang lebih lembut. Putar 90° lalu −90° dan Anda mendapatkan bitmap asli yang persis.

Orientasi EXIF: alasan diam mengapa foto Anda miring

Masalah «browser menampilkan foto saya terbalik» memiliki penyebab yang spesifik. Smartphone modern tidak memutar gambar secara fisik saat Anda mengambil foto sambil memegang ponsel ke samping, mereka menyimpan orientasi sensor asli dan menambahkan tag Orientasi EXIF (diperkenalkan oleh JEIDA sekitar tahun 1995) yang memberi tahu penampil bagaimana gambar harus ditampilkan. Tag ini memiliki 8 nilai yang mungkin: 1=normal, 3=180°, 6=90° searah jarum jam, 8=90° berlawanan jarum jam, ditambah empat varian yang dicerminkan.

Sebelum sekitar tahun 2010, perangkat menulis piksel yang diputar dan Orientasi = 1; sejak saat itu, ponsel modern menyimpan piksel asli dengan Orientasi yang disetel sebagai gantinya, menghemat penyimpanan dan baterai. Tangkapannya: browser secara historis tidak menghormati Orientasi EXIF di luar elemen <img>. Seret foto ponsel potret ke alat berbasis canvas, dan canvas akan menggambarnya secara miring kecuali alat tersebut secara eksplisit membaca dan menerapkan tag Orientasi. Properti CSS image-orientation yang ditambahkan pada tahun 2017 memperbaiki ini untuk HTML; createImageBitmap() modern dengan imageOrientation: 'from-image' memperbaikinya untuk canvas. Chrome 81 (April 2020) menjadikan image-orientation: from-image sebagai default untuk elemen <img>.

Jika Anda pernah memutar foto di browser dan foto tersebut tampak «sudah diputar», atau diputar dua kali: Anda telah mengalami masalah ini. Solusi yang jujur adalah agar alat rotasi membaca tag EXIF, secara mental menerapkan orientasi tersebut terlebih dahulu, kemudian menambahkan rotasi yang dipilih pengguna di atasnya.

Cara canvas melakukannya

Metode rotate(angle) Canvas memutar sistem koordinat di sekitar asal canvas (0, 0). Karena asal adalah pojok kiri atas, memanggil ctx.rotate(angle) diikuti ctx.drawImage(img, 0, 0) secara naif memutar gambar di sekitar pojok kiri atasnya, mengirimkan sebagian besar piksel yang diputar ke luar canvas ke kiri atas. Resep standar mengoreksi ini dengan sandwich translate-rotate-translate:

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);   // canvas takes radians
ctx.translate(-image.width / 2, -image.height / 2);
ctx.drawImage(image, 0, 0);
ctx.restore();

Untuk rotasi 90/180/270, canvas tujuan perlu diukur agar sesuai dengan dimensi yang dipertukarkan (90/270) atau asli (180). Untuk sudut sembarang, persegi panjang pembatas gambar yang diputar lebih besar dari kedua dimensi sumber, untuk gambar W × H yang diputar sebesar θ, kotak pembatas baru memiliki lebar |W·cos(θ)| + |H·sin(θ)| dan tinggi |W·sin(θ)| + |H·cos(θ)|. Gambar 1000 × 800 yang diputar 45° oleh karena itu membutuhkan canvas kira-kira 1273 × 1273 untuk menampung setiap piksel yang diputar. Toggle «Pangkas agar sesuai» menentukan apakah akan memperluas canvas (mempertahankan setiap piksel, dengan sudut segitiga transparan atau putih) atau memangkas kembali ke dimensi asli (memotong konten yang diputar).

PNG vs keluaran JPG, masalah sudut

Saat rotasi non-90 memperluas canvas, keempat sudut segitiga perlu diisi dengan sesuatu. PNG dapat merender celah tersebut sebagai piksel sepenuhnya transparan (alpha = 0), sempurna untuk melapisi gambar yang diputar di atas latar belakang lain. JPG tidak memiliki saluran alpha dan merender piksel yang tidak terisi sebagai warna bersih canvas, yang JPEG ratakan menjadi hitam buram. Pengguna yang mengunduh JPG dari foto yang diputar dan terkejut dengan baji hitam di sudutnya telah mengalami masalah ini persis.

Alat ini menyusun keluaran JPG terhadap latar belakang putih sebelum enkoding untuk menghindari masalah sudut hitam. Keluaran PNG mempertahankan transparansi. Pilihan antara format: PNG untuk apa pun yang memiliki transparansi atau di mana Anda akan mengedit lebih lanjut, JPG untuk foto yang menuju tujuan akhir di mana ukuran file penting.

Ada satu nuansa lagi untuk JPG. Rotasi JPEG lossless secara teknis memungkinkan, utilitas jpegtran menyusun ulang batas blok JPEG (blok koefisien DCT 8×8) tanpa mendekode ulang gambar, sehingga rotasi 90/180/270 dapat membiarkan data terkompresi yang mendasarinya tetap utuh dan menghasilkan JPEG yang kualitasnya identik bit-per-bit dengan aslinya. Tangkapannya adalah batasan tepi iMCU: dimensi gambar harus merupakan kelipatan ukuran blok, jika tidak, rotasi memangkas beberapa piksel tepi atau meninggalkan blok parsial. Halaman ini menggunakan Canvas API alih-alih manipulasi blok gaya jpegtran, sehingga keluaran JPG di sini selalu di-encode ulang, pada kualitas maksimum, tetapi dengan kehilangan generasi kecil yang melekat pada setiap re-encode JPEG.

Kapan Anda akan menggunakan rotator browser

• Foto smartphone yang diimpor miring ke aplikasi desktop yang tidak menghormati Orientasi EXIF.
• Dokumen yang dipindai yang masuk dengan putaran 90° karena deteksi otomatis scanner salah.
• Orientasi cetak: menyiapkan gambar untuk pencetakan potret vs lanskap.
• Komposisi seni dan desain: memutar foto untuk menguji orientasi visual yang berbeda.
• Perbaikan cepat sebelum unggahan media sosial ketika auto-rotate platform menjadi bingung.
• Konten sensitif: dokumen kerja, foto ID, foto keluarga, yang lebih baik tidak Anda unggah ke layanan pihak ketiga.

Pertanyaan lainnya

Apakah foto saya akan kehilangan kualitas jika saya hanya memutarnya 90°?

Tidak, bukan pada langkah rotasi itu sendiri, rotasi 90/180/270 adalah permutasi lossless. Risiko kualitasnya adalah enkoder. Jika Anda mengunggah JPEG, alat ini mendekodenya, memutar array piksel, lalu meng-encode ulang hasilnya. Re-encode menambahkan sedikit kehilangan generasi (biasanya tidak terlihat pada kualitas maksimum) karena JPEG bersifat lossy. Untuk menghindari bahkan itu, unduh sebagai PNG, atau gunakan alat khusus seperti jpegtran yang menyusun ulang blok DCT tanpa mendekode ulang.

Mengapa memutar SVG membuat gambar tetap tajam?

Karena SVG adalah vektor, ia menyimpan bentuk sebagai jalur matematis bukan sebagai grid piksel. Memutar SVG melalui transform="rotate(angle)" hanya memodifikasi koordinat jalur; tidak ada langkah resampling dan tidak ada kehilangan kualitas pada sudut mana pun. Browser me-rasterisasi ulang jalur yang diputar setiap kali menggambar ulang, selalu pada tingkat zoom saat ini. Alat ini beroperasi pada gambar raster (PNG, JPG, WebP) sehingga menghadapi biaya resampling; SVG paling baik diputar dengan mengedit atribut transform secara langsung atau dengan menggunakan editor vektor seperti Inkscape atau Illustrator.

Mengapa sudutnya putih bukan transparan?

Anda mengunduh keluaran JPG. JPG tidak memiliki saluran alpha, sehingga celah segitiga yang tersisa dari rotasi non-90 diisi dengan putih sebelum enkoding (atau hitam, pada alat yang tidak menyusun terhadap latar belakang, kejutan sudut gelap yang terlalu umum). Beralih ke unduhan PNG dan sudutnya akan benar-benar transparan.

Bisakah saya memutar dalam kenaikan 1°?

Ya. Slider di atas bergerak dalam langkah 1°; kolom input menerima desimal apa pun (45,5° berfungsi dengan baik). Untuk pekerjaan penyelarasan yang sangat presisi (meluruskan cakrawala miring dalam foto, misalnya) presisi sub-derajat bisa penting. Setiap rotasi non-90 memang menghabiskan sedikit kualitas, jadi untuk penyesuaian halus berulang pertimbangkan melakukan rotasi tunggal dengan sudut target akhir daripada beberapa penyesuaian bertahap.

Apakah ada yang dikirim ke server?

Tidak. Gambar didekode oleh browser Anda, digambar ke canvas melalui Canvas 2D API, dan di-encode ulang untuk diunduh, semuanya dalam proses browser Anda. File tidak pernah meninggalkan perangkat Anda. Alat ini juga berfungsi secara offline setelah halaman dimuat.