مكتبة جافا سكريبت مفتوحة المصدر لمعالجة الصور

الابتداء مع LenaJs

الطريقة الموصى بها لتثبيت LenaJs عبر NPM. الرجاء استخدام الأمر التالي لتثبيته.

 npm install lena.js --save 

تطبيق المرشحات على الصورة عبر JavaScript

قدمت مكتبة Lena.js مفتوحة المصدر مجموعة من المرشحات المفيدة التي يمكن استخدامها لتطبيق أنواع مختلفة من التأثيرات على الصور داخل تطبيقات JavaScript. يرجى أولاً تقديم العنوان الصحيح للصورة ثم تحديد المرشح من قائمة المرشحات المتاحة. يمكنك استخدام أساليب filterImage و redrawCanvas لتطبيق مرشح بسهولة على الصورة المحددة. سيتم استخدام صورة ولوحة قماشية لتطبيق المرشح.

 
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
 

تطبيق مرشحات متعددة على الصور

تتيح مكتبة Lena.js لمطوري البرامج تطبيق عوامل تصفية متعددة على صورهم داخل تطبيقات JavaScript الخاصة بهم. عادة ، يتم تطبيق مرشح واحد على صورة عن طريق طريقة filterImage. لتطبيق مرشحات متعددة على صورة ما ، تحتاج إلى استخدام طريقة redrawCanvas بدلاً من filterImage. تحتاج إلى تمرير صورة تم تقديمها بالفعل باستخدام مرشح باعتباره الوسيطة الأولى وتحتاج إلى تمرير مرشح جديد كوسيطة ثانية والتي سيتم إلحاقها بالصورة بسهولة.

معالجة الصور عبر JavaScript API

تمنح مكتبة LenaJs مبرمجي البرامج القدرة على إضافة مرشح برمجيًا في الصور داخل JavaScript. يعد تطبيق المرشحات باستخدام LenaJs أمرًا بسيطًا للغاية ، حيث توفر واجهة برمجة التطبيقات طريقتين لإضافة المرشحات ؛ filterImage () و redrawCanvas (). تحتاج إلى توفير صورة ولوحة قماشية لطريقة تطبيق المرشح. من أجل الحصول على المرشح ، يمكنك استخدام طريقة LenaJs ['اسم الملف'] وتطبيقها على الصورة باستخدام طريقة 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