Saya mencoba membuat gambar mini di sisi klien menggunakan javascript dan elemen kanvas, tetapi ketika saya mengecilkan gambar, itu tampak mengerikan. Sepertinya itu dirampingkan di photoshop dengan resampling diatur ke 'Nearest Neighbor' alih-alih Bicubic. Saya tahu ini mungkin untuk membuat ini terlihat benar, karena situs ini dapat melakukannya dengan baik menggunakan kanvas juga. Saya sudah mencoba menggunakan kode yang sama seperti yang ditunjukkan pada tautan "[Sumber]", tetapi masih terlihat mengerikan. Apakah ada sesuatu yang saya lewatkan, beberapa pengaturan yang perlu diatur atau sesuatu?
EDIT:
Saya mencoba mengubah ukuran jpg. Saya telah mencoba mengubah ukuran jpg yang sama di situs yang ditautkan dan di photoshop, dan itu terlihat baik-baik saja ketika dirampingkan.
Ini kode yang relevan:
reader.onloadend = function(e)
{
var img = new Image();
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
};
img.src = reader.result;
}
EDIT2:
Sepertinya saya salah, situs web tertaut tidak melakukan pekerjaan yang lebih baik dari perampingan gambar. Saya mencoba metode lain yang disarankan dan tidak ada yang terlihat lebih baik. Inilah yang menghasilkan berbagai metode:
Photoshop:
Kanvas:
Gambar dengan rendering gambar: optimalkan set kualitas dan diskalakan dengan lebar / tinggi:
Gambar dengan rendering gambar: optimalkan set kualitas dan diskalakan dengan -moz-transform:
Ubah ukuran kanvas di pixastic:
Saya kira ini berarti firefox tidak menggunakan pengambilan sampel bikubik seperti yang seharusnya. Saya hanya harus menunggu sampai mereka benar-benar menambahkannya.
EDIT3:
sumber
Jawaban:
Jadi apa yang Anda lakukan jika semua browser (sebenarnya, Chrome 5 memberi saya yang cukup bagus) tidak akan memberi Anda kualitas resampling yang cukup baik? Anda menerapkannya sendiri! Oh ayolah, kita memasuki era baru Web 3.0, browser yang mendukung HTML5, kompiler javascript JIT super dioptimalkan, mesin multi-core (†), dengan banyak memori, apa yang Anda takutkan? Hei, ada kata java di javascript, jadi itu harus menjamin kinerjanya, kan? Lihatlah, thumbnail yang menghasilkan kode:
... yang dengannya Anda dapat menghasilkan hasil seperti ini!
jadi bagaimanapun, ini adalah versi 'tetap' dari contoh Anda:
Sekarang saatnya untuk mengadu peramban terbaik Anda di luar sana dan melihat mana yang paling mungkin meningkatkan tekanan darah klien Anda!
Umm, di mana tag sarkasme saya?
(karena banyak bagian dari kode ini didasarkan pada Anrieff Gallery Generator apakah itu juga tercakup dalam GPL2? Saya tidak tahu)
† sebenarnya karena keterbatasan javascript, multi-core tidak didukung.
sumber
Algoritma resize / resample gambar cepat menggunakan filter Hermite dengan JavaScript. Mendukung transparansi, memberikan kualitas yang baik. Pratinjau:
Pembaruan : versi 2.0 ditambahkan pada GitHub (lebih cepat, pekerja web + objek yang dapat ditransfer). Akhirnya saya berhasil!
Git: https://github.com/viliusle/Hermite-resize
Demo: http://viliusle.github.io/miniPaint/
sumber
Coba pica - itu adalah resizer yang sangat dioptimalkan dengan algorythms yang dapat dipilih. Lihat demo .
Misalnya, gambar asli dari posting pertama diubah ukurannya dalam 120ms dengan filter Lanczos dan jendela 3px atau 60ms dengan filter Box dan jendela 0.5px. Untuk ukuran 17mb gambar berukuran besar 5000x3000px membutuhkan ~ 1d di desktop dan 3d di ponsel.
Semua prinsip ukuran dijelaskan dengan sangat baik di utas ini, dan pica tidak menambahkan ilmu roket. Tapi ini dioptimalkan dengan sangat baik untuk JIT-s modern, dan siap digunakan di luar kotak (via npm atau bower). Juga, ia menggunakan pekerja web saat tersedia untuk menghindari antarmuka membeku.
Saya juga berencana untuk segera menambahkan dukungan unsharp mask, karena ini sangat berguna setelah downscale.
sumber
Saya tahu ini adalah utas lama tetapi mungkin bermanfaat bagi beberapa orang seperti saya bahwa berbulan-bulan setelahnya mengenai masalah ini untuk pertama kalinya.
Berikut adalah beberapa kode yang mengubah ukuran gambar setiap kali Anda memuat ulang gambar. Saya sadar ini tidak optimal sama sekali, tetapi saya berikan sebagai bukti konsep.
Juga, maaf karena menggunakan jQuery untuk penyeleksi sederhana tapi saya merasa terlalu nyaman dengan sintaksis.
Fungsi createImage saya dipanggil sekali ketika dokumen dimuat dan setelah itu dipanggil setiap kali jendela menerima acara mengubah ukuran.
Saya mengujinya di Chrome 6 dan Firefox 3.6, keduanya di Mac. "Teknik" ini memakan prosesor seolah-olah itu adalah es krim di musim panas, tetapi itu berhasil.
sumber
Saya telah memasang beberapa algoritma untuk melakukan interpolasi gambar pada array piksel html kanvas yang mungkin berguna di sini:
https://web.archive.org/web/20170104190425/http://jsperf.com:80/pixel-interpolation/2
Ini dapat disalin / ditempelkan dan dapat digunakan di dalam pekerja web untuk mengubah ukuran gambar (atau operasi lain yang memerlukan interpolasi - Saya menggunakan mereka untuk merusak gambar saat ini).
Saya belum menambahkan barang-barang lanczos di atas, jadi silakan menambahkannya sebagai perbandingan jika Anda mau.
sumber
Ini adalah fungsi javascript yang diadaptasi dari kode @ Telanor. Ketika melewati base64 gambar sebagai argumen pertama ke fungsi, itu mengembalikan base64 dari gambar yang diubah ukurannya. maxWidth dan maxHeight adalah opsional.
sumber
Saya sangat menyarankan Anda memeriksa tautan ini dan memastikannya disetel ke true.
sumber
Jika Anda hanya mencoba mengubah ukuran gambar, saya akan merekomendasikan pengaturan
width
danheight
gambar dengan CSS. Ini contoh singkatnya:Perhatikan bahwa
height
danwidth
juga dapat diatur menggunakan JavaScript. Berikut contoh kode cepat:Juga, untuk memastikan gambar yang diubah ukurannya terlihat bagus, tambahkan aturan css berikut ke pemilih gambar:
-ms-interpolation-mode: bicubic
: perkenalkan di IE7image-rendering: optimizeQuality
: diperkenalkan di FireFox 3.6Sejauh yang saya tahu, semua browser kecuali IE menggunakan algoritma bicubic untuk mengubah ukuran gambar secara default, sehingga gambar yang diubah ukurannya akan terlihat bagus di Firefox dan Chrome.
Jika mengatur css
width
danheight
tidak berfungsi, Anda mungkin ingin bermain dengan csstransform
:-moz-transform: scale(sx[, sy])
-webkit-transform:scale(sx[, sy])
Jika karena alasan apa pun Anda perlu menggunakan kanvas, harap perhatikan bahwa ada dua cara mengubah ukuran gambar: dengan mengubah ukuran kanvas dengan css atau dengan menggambar gambar pada ukuran yang lebih kecil.
Lihat pertanyaan ini untuk lebih jelasnya.
sumber
Untuk mengubah ukuran gambar dengan lebar kurang dari aslinya, saya menggunakan:
dan itu berfungsi =).
sumber
saya mendapatkan gambar ini dengan mengklik kanan elemen kanvas di firefox dan menyimpan sebagai.
jadi bagaimanapun, ini adalah versi 'tetap' dari contoh Anda:
sumber
Masalah dengan beberapa solusi ini adalah mereka mengakses langsung data piksel dan mengulanginya untuk melakukan downsampling. Tergantung pada ukuran gambar, ini bisa menjadi sumber daya yang sangat intensif, dan akan lebih baik untuk menggunakan algoritma internal browser.
Fungsi drawImage () menggunakan metode interpolasi linier, tetangga-tetangga terdekat. Itu bekerja dengan baik ketika Anda tidak mengubah ukuran lebih dari setengah ukuran aslinya .
Jika Anda beralih ke hanya mengubah ukuran maks satu setengah pada satu waktu, hasilnya akan cukup baik, dan jauh lebih cepat daripada mengakses data piksel.
Fungsi ini downsample menjadi setengah sekaligus hingga mencapai ukuran yang diinginkan:
Kredit untuk pos ini
sumber
Jadi sesuatu yang menarik yang saya temukan beberapa waktu lalu ketika bekerja dengan kanvas yang mungkin bisa membantu:
Untuk mengubah ukuran kontrol kanvas sendiri, Anda perlu menggunakan
height=""
danwidth=""
atribut (ataucanvas.width
/canvas.height
elemen). Jika Anda menggunakan CSS untuk mengubah ukuran kanvas, itu sebenarnya akan meregangkan (yaitu: mengubah ukuran) konten kanvas agar sesuai dengan kanvas penuh (bukan hanya menambah atau mengurangi area kanvas.Layak dicoba untuk mencoba menggambar gambar menjadi kontrol kanvas dengan atribut tinggi dan lebar diatur ke ukuran gambar dan kemudian menggunakan CSS untuk mengubah ukuran kanvas ke ukuran yang Anda cari. Mungkin ini akan menggunakan algoritma pengubahan ukuran yang berbeda.
Perlu juga dicatat bahwa kanvas memiliki efek berbeda di browser yang berbeda (dan bahkan versi berbeda dari browser yang berbeda). Algoritme dan teknik yang digunakan di browser cenderung berubah seiring waktu (terutama dengan Firefox 4 dan Chrome 6 yang keluar begitu cepat, yang akan sangat menekankan kinerja rendering kanvas).
Selain itu, Anda mungkin ingin mencobanya juga, karena SVG kemungkinan menggunakan algoritma yang berbeda juga.
Semoga berhasil!
sumber
Saya merasa modul yang saya tulis akan menghasilkan hasil yang mirip dengan photoshop, karena mempertahankan data warna dengan membuat rata-rata, bukan menerapkan algoritma. Agak lambat, tapi bagi saya itu yang terbaik, karena menjaga semua data warna.
https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js
Itu tidak mengambil tetangga terdekat dan menjatuhkan piksel lain, atau mencicipi grup dan mengambil rata-rata acak. Dibutuhkan proporsi yang tepat setiap piksel sumber harus di-output ke piksel tujuan. Warna piksel rata-rata di sumber akan menjadi warna piksel rata-rata di tujuan, yang menurut saya adalah rumus lainnya.
contoh cara menggunakan ada di bagian bawah https://github.com/danschumann/limby-resize
UPDATE OCT 2018 : Dewasa ini contoh saya lebih bersifat akademis daripada yang lain. Webgl cukup banyak 100%, jadi Anda sebaiknya mengubah ukurannya untuk menghasilkan hasil yang serupa, tetapi lebih cepat. PICA.js melakukan ini, saya percaya. -
sumber
Saya mengubah jawaban @ syockit serta pendekatan step-down menjadi layanan Angular yang dapat digunakan kembali untuk siapa saja yang tertarik: https://gist.github.com/fisch0920/37bac5e741eaec60e983
Saya memasukkan kedua solusi karena mereka berdua memiliki pro / kontra sendiri. Pendekatan konvolusi lanczos adalah kualitas yang lebih tinggi dengan biaya lebih lambat, sedangkan pendekatan downcaling langkah-bijaksana menghasilkan hasil yang cukup antialiased dan secara signifikan lebih cepat.
Contoh penggunaan:
sumber
Resizer gambar Javascript cepat dan sederhana:
https://github.com/calvintwr/blitz-hermite-resize
Sejarah
Ini benar-benar setelah banyak putaran penelitian, membaca, dan mencoba.
Algoritma resizer menggunakan skrip Hermite @ ViliusL (resizer Hermite benar-benar tercepat dan memberikan output yang cukup baik). Diperpanjang dengan fitur yang Anda butuhkan.
Garpu 1 pekerja untuk melakukan pengubahan ukuran sehingga tidak membekukan browser Anda saat mengubah ukuran, tidak seperti semua pengubah ukuran JS lainnya di luar sana.
sumber
Terima kasih @syockit untuk jawaban yang luar biasa. Namun, saya harus memformat ulang sedikit sebagai berikut untuk membuatnya berfungsi. Mungkin karena masalah pemindaian DOM:
sumber
Saya hanya menjalankan perbandingan halaman berdampingan dan kecuali ada sesuatu yang berubah baru-baru ini, saya tidak bisa melihat perampingan yang lebih baik (penskalaan) menggunakan kanvas vs css sederhana. Saya menguji di FF6 Mac OSX 10.7. Masih agak lunak vs aslinya.
Namun saya menemukan sesuatu yang membuat perbedaan besar dan menggunakan filter gambar di browser yang mendukung kanvas. Anda benar-benar dapat memanipulasi gambar seperti yang Anda bisa di Photoshop dengan blur, mempertajam, saturasi, riak, skala abu-abu, dll.
Saya kemudian menemukan plug-in jQuery yang luar biasa yang menjadikan aplikasi filter ini mudah: http://codecanyon.net/item/jsmanipulate-jquery-image-manipulation-plugin/428234
Saya cukup menerapkan filter mempertajam setelah mengubah ukuran gambar yang seharusnya memberi Anda efek yang diinginkan. Saya bahkan tidak perlu menggunakan elemen kanvas.
sumber
Mencari solusi sederhana yang bagus?
Solusi ini akan menggunakan algoritma pengubahan ukuran browser! :)
sumber