smartcrop.js kemahiran pemangkasan gambar pintar library_javascript

smartcrop.js ialah pemalam JS yang boleh memangkas imej tanpa memangkas muka

Hari ini saya akan memperkenalkan kepada anda pustaka sumber terbuka yang sangat bagus baru-baru ini tersedia di github – smartcrop.js. Ia adalah perpustakaan pemangkasan pintar untuk pemprosesan imej. Dalam pembangunan banyak projek, kami sering menghadapi senario di mana gambar dimuat naik Ia mungkin maklumat foto pengguna, atau gambar produk, dsb. Walau bagaimanapun, dalam reka letak halaman web, untuk pengalaman pengguna yang lebih baik, mereka sering memerlukan beberapa sekatan lebar dan ketinggian. Untuk imej yang tidak sesuai, selalunya perlu menyediakan pengguna kaedah pemangkasan untuk memberikan pengalaman pengguna yang lebih baik untuk tapak web. Walau bagaimanapun, kawasan pemangkasan lalai gambar sering dipaparkan pada kedudukan tetap, dan kedudukan ini selalunya bukan kedudukan pemangkasan pengguna yang tepat. Oleh itu, perpustakaan sumber terbuka yang diperkenalkan kepada anda hari ini adalah untuk menyelesaikan masalah tersebut dan memberikan pengguna pengalaman pengguna yang lebih baik.

Mula-mula kita boleh menggunakan npm install smartcrop atau bower install smartcrop untuk memuat turunnya. Kemudian gunakannya seperti ini:

SmartCrop.crop(image, {
    width: 100,
    height: 100
  }, 
  function(result){
    console.log(result); // {topCrop: {x: 300, y: 200, height: 200, width: 200}}
  });

Ia akan mengeluarkan kedudukan pemangkasan imej optimum yang lebih baik, seperti data {topCrop: {x: 300, y: 200, height: 200, width: 200}}.

Berikut ialah kes daripada tapak web paparannya, sila nikmati:

alamat github: https://github.com/jwagner/smartcrop.js