1. Produk
  2.   Imej
  3.   JavaScript
  4.   LensJs
 
  

Perpustakaan JavaScript Sumber Terbuka untuk Pemprosesan Imej

JavaScript API untuk menggunakan kesan berbeza pada imej menggunakan pelbagai jenis penapis seperti gaussian, skala kelabu, laluan tinggi, songsang, laplacian, cermin, RGB, Roberts, ketepuan & banyak lagi.

Lena.js ialah perpustakaan pemprosesan imej ringan yang sangat mudah yang membolehkan pembangun perisian bekerja dengan pelbagai jenis imej dari dalam aplikasi JavaScript mereka. Ia adalah perpustakaan JavaScript tulen yang boleh berfungsi pada Node serta dalam pelayar tanpa sebarang kebergantungan luaran. Perpustakaan adalah sumber terbuka dan boleh didapati di bawah lesen MIT. Perpustakaan tidak begitu baik dengan imej berat di dalam pelayar tetapi sangat cekap untuk manipulasi imej kecil.

Lena.js sangat mudah digunakan dan boleh menggunakan kesan yang berbeza pada imej. Penapis imej membolehkan aplikasi perisian menggunakan kesan berbeza pada imej dengan hanya satu klik. Perpustakaan ini telah menyertakan sokongan untuk beberapa penapis imej penting, beberapa yang penting ialah gaussian, skala kelabu, laluan tinggi, terbalik, laplacian, cermin, hingar, Prewitt, RGB, Roberts, ketepuan, sepia, sharpen, dan banyak lagi. Perpustakaan juga menyokong penggunaan berbilang penapis pada imej. Penapis disimpan dalam pembolehubah global yang sama LenaJS dan boleh diakses melalui idnya menggunakan notasi kekunci atau titik.

Previous Next

Bermula dengan LenaJs

Cara yang disyorkan untuk memasang LenaJs melalui NPM. Sila gunakan arahan berikut untuk memasangnya.

Pasang Lena.Js melalui NPM

 npm install lena.js --save

Gunakan Penapis pada Imej melalui JavaScript

Pustaka Lena.js sumber terbuka telah menyediakan satu set penapis berguna yang boleh digunakan untuk menggunakan pelbagai jenis kesan pada imej dalam aplikasi JavaScript. Mula-mula sila berikan alamat yang betul kepada imej dan kemudian pilih penapis daripada senarai penapis yang tersedia. Anda boleh menggunakan kaedah filterImage dan redrawCanvas untuk menggunakan penapis dengan mudah pada imej yang dipilih. Imej dan kanvas akan digunakan untuk menggunakan penapis.

Tambah Penapis Bunyi melalui JavaScript

 
const noise = function (pixels, amount = 0) {
  const level = amount * 255 * 0.1
  let random;
  for (let i = 0; i < pixels.data.length; i += 4) {
    random = (0.5 - Math.random()) * level;
    pixels.data[i] += random;
    pixels.data[i + 1] += random;
    pixels.data[i + 2] += random;
  }
  return pixels
}
export default noise

Menggunakan Berbilang Penapis pada Imej

Pustaka Lena.js membolehkan pembangun perisian menggunakan berbilang penapis pada imej mereka di dalam apl JavaScript mereka sendiri. Biasanya, penapis tunggal digunakan pada imej dengan kaedah penapis Imej. Untuk menggunakan berbilang penapis pada imej, anda perlu menggunakan kaedah redrawCanvas dan bukannya filterImage. Anda perlu menghantar imej yang telah diberikan dengan penapis sebagai hujah pertama dan perlu lulus penapis baharu sebagai hujah kedua yang akan dilampirkan pada imej dengan mudah.

Memproses Imej melalui API JavaScript

Pustaka LenaJs memberi pengaturcara perisian keupayaan untuk menambah penapis secara pemrograman dalam imej dalam JavaScript. Menggunakan penapis dengan LenaJs agak mudah, API menyediakan dua cara untuk menambah penapis; filterImage() dan redrawCanvas(). Anda perlu memberikan imej dan kanvas kepada kaedah untuk menggunakan penapis. Untuk mendapatkan penapis, anda boleh menggunakan kaedah LenaJs['filername'] dan menerapkannya pada imej menggunakan kaedah filterImage().

Gunakan Penapis Kontras pada Imej<

 
const contrast = function (pixels, amount) {
  const level = Math.pow((amount + 100) / 100, 2)
  let data = pixels.data
  let r
  let g
  let b
  for (let i = 0; i < data.length; i += 4) {
    r = data[i]
    g = data[i + 1]
    b = data[i + 2]
    r = r / 255
    r -= 0.5
    r *= level
    r += 0.5
    r *= 255
    g = g / 255
    g -= 0.5
    g *= level
    g += 0.5
    g *= 255
    b = b / 255
    b -= 0.5
    b *= level
    b += 0.5
    b *= 255
    r = r < 0 ? 0 : r > 255 ? 255 : r
    g = g < 0 ? 0 : g > 255 ? 255 : g
    b = b < 0 ? 0 : b > 255 ? 255 : b
    data[i] = r
    data[i + 1] = g
    data[i + 2] = b
  }
  return pixels
}
export default contrast
 Melayu