Pertanyaan Ukuran PNG potensial terbesar diberikan dimensi tertentu


Saat ini saya membuat HTML5 canvasprogram menggambar berbasis. Pengguna dapat menggambar gambar, atau beberapa 'halaman' gambar, dan menyimpannya ke cloud untuk pengambilan cepat nanti. Ini untuk digunakan pada papan tulis interaktif; guru tidak dapat selalu yakin bahwa IWB yang mereka rencanakan adalah yang akan mereka gunakan di kelas itu, jadi saya ingin membuat data dapat diakses dari mana saja.

Saya mengirim data kanvas ke server sebagai URI data melalui Ajax, menyimpan data pada sistem file dan referensi ke file dalam database. Masalah saya adalah bahwa saya tidak yakin berapa banyak ruang pada sistem file gambar-gambar ini akhirnya akan mengambil.

File-file tersebut disimpan sebagai PNG dengan lapisan transparansi alfa, dan 1280x720px. Tergantung pada apa yang ditarik, ukuran file bervariasi secara signifikan, yang saya anggap karena PNG dikompres. Karena itu, saya mengalami kesulitan dalam menghitung ukuran file maksimum yang mungkin sehingga gambar seperti itu bisa. Karena saya ingin mengasumsikan skenario terburuk, saya akan menganggap bahwa kompresi PNG tidak melakukan apa pun untuk mengurangi ukuran file. Mengingat itu, akankah ukuran file maksimum menjadi:

1280 x 720 x colordepth

? Jika ya, nilai apa yang seharusnya colordepth menjadi, mengingat saya mengekspor gambar menggunakan canvas.toDataURL()? Apakah itu berbeda tergantung pada implementasi browser canvas? Aku benar-benar dalam kegelapan di sini.

Saya tahu kompresi PNG tidak bagus dengan gambar bergaya foto, jadi saya telah mencoba membuat sesuatu yang tidak mudah dipadatkan (terutama yang lembut, gradien yang cukup acak). Yang terbesar yang bisa saya ciptakan adalah sekitar 675KB, tapi saya yakin itu tidak berada di dekat ukuran maksimum potensial.

Jadi saya juga perlu tahu berapa ukuran file maksimum, atau jenis gambar apa yang akan menawarkan potensi paling kecil untuk kompresi dalam PNG, jadi saya bisa bereksperimen dengan lebih baik.

Saya harap ini masuk akal.


Ada beberapa pertanyaan serupa di SO:

tetapi tidak ada yang menjawab pertanyaan saya. Lakukan pencerahan saya jika saya melewatkan sesuatu.


MEMPERBARUI

Saya sudah memberi Ide Ken Fyrstenberg mencoba, dan hasil awal cukup sesuatu. Menyimpan gambar sebagai objek serial menghasilkan satu set data kurang dari seperempat ukuran string dataURL yang setara. Dan ini bahkan sebelum saya mulai mengoptimalkannya. Saya sangat merekomendasikan siapa pun dalam situasi yang sama memberikan metode ini untuk dicoba.


UPDATE LAINNYA

Ketika saya pertama kali memulai ini, saya menggunakan SVG. Namun, semakin banyak pengguna yang tertarik, semakin banyak DOMElements harus di layar sekaligus, dan waktu respons yang lebih lambat menjadi (terutama dengan> 1000 elemen). Saya berasumsi bahwa melakukannya dengan kanvas dan menyimpan setiap stroke dalam sebuah array saat pengguna membuatnya, akan ada masalah serupa. 'Bukan begitu.

Saya kira ada lebih sedikit overhead hanya dalam menyimpan data jalur, dibandingkan dengan melacak elemen DOM dan semua propertinya, posisi dalam dokumen dan hubungannya dengan elemen lain.

Upshot adalah, tidak peduli berapa banyak stroke yang saya masukkan ke dalam array, operasi redraw selalu cepat kilat. Ini sebagai tambahan terhadap pengurangan ukuran saat menyimpan data untuk digunakan nanti, dan penerapan undo / redo yang sangat mudah. Sangat terkesan dengan Javascript dan kanvas sekarang.


4
2017-12-06 04:03


asal


Jawaban:


Untuk menghitung ukuran bitmap PNG menggunakan asumsi alpha channel hadir

width x height x 4

akan memberi Anda ukuran sebagai byte mentah yang tidak dikompresi.

Alasan 4 digunakan adalah karena RGBA akan (biasanya) direpresentasikan sebagai 32-bit (karenanya 4 byte).

Jika tidak ada saluran alfa selain dari dikalikan dengan 3 sebagai gantinya (24-bit, RGB masing-masing 8-bit).

Selain itu header dan potongan akan menambah ukuran tetapi kompresi akan mengurangi ukuran.

Namun saya pikir ini akan memberi Anda cukup baik untuk tujuan ini sebagai nilai maks.

Dalam kasus Anda, ukurannya akan menjadi maksimal:

1280 x 720 x 4 = 3 686 400 bytes

Untuk sampai ke kilobyte membagi pada 1024, untuk mendapatkan bahwa untuk mb membagi lagi pada 1024 (di sini hasilnya akan 3.5mb).

Tip: Untuk berbagi gambar Anda mungkin ingin mempertimbangkan berbagi objek serial alih-alih data-uri sebagai pembuatan data-uri adalah kinerja lapar dan akan membuat overhead yang tidak perlu, sementara objek serial biasanya memiliki ukuran rendah dan dampak kinerja rendah. Mereka lebih mudah untuk mentransfer lebih dari bersih juga. Objek dapat berisi posisi garis, warna, dll.


6
2017-12-06 04:08