Thư viện JavaScript nguồn mở để xử lý hình ảnh

Bắt đầu với LenaJs

Cách được đề xuất để cài đặt LenaJs thông qua NPM. Vui lòng sử dụng lệnh sau để cài đặt nó.

 npm install lena.js --save 

Áp dụng bộ lọc trên hình ảnh qua JavaScript

Thư viện mã nguồn mở Lena.js đã cung cấp một tập hợp các bộ lọc hữu ích có thể được sử dụng để áp dụng các loại hiệu ứng khác nhau cho hình ảnh bên trong các ứng dụng JavaScript. Trước tiên, vui lòng cung cấp địa chỉ chính xác cho hình ảnh và sau đó chọn bộ lọc từ danh sách các bộ lọc có sẵn. Bạn có thể sử dụng phương thức filterImage và redrawCanvas để dễ dàng áp dụng bộ lọc cho hình ảnh đã chọn. Một hình ảnh và một canvas sẽ được sử dụng để áp dụng bộ lọc.

 
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
 

Áp dụng nhiều bộ lọc trên hình ảnh

Thư viện Lena.js cho phép các nhà phát triển phần mềm áp dụng nhiều bộ lọc trên hình ảnh của họ bên trong các ứng dụng JavaScript của riêng họ. Thông thường, một bộ lọc duy nhất được áp dụng cho một hình ảnh bằng phương pháp filterImage. Để áp dụng nhiều bộ lọc cho một hình ảnh, bạn cần sử dụng phương thức redrawCanvas thay vì filterImage. Bạn cần chuyển một hình ảnh đã được hiển thị với một bộ lọc làm đối số đầu tiên và cần chuyển một bộ lọc mới làm đối số thứ hai sẽ được thêm vào hình ảnh một cách dễ dàng.

Xử lý hình ảnh qua API JavaScript

Thư viện LenaJs cung cấp cho các nhà lập trình phần mềm khả năng lập trình thêm một bộ lọc trong hình ảnh bên trong JavaScript. Áp dụng bộ lọc với LenaJs khá đơn giản, API cung cấp hai cách để thêm bộ lọc; filterImage () và redrawCanvas (). Bạn cần cung cấp hình ảnh và khung vẽ cho phương pháp áp dụng bộ lọc. Để có được bộ lọc, bạn có thể sử dụng phương thức LenaJs ['filername'] và áp dụng nó vào hình ảnh bằng phương thức filterImage ().

 
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