كيفية إنشاء سكريبت لتحويل الصور إلى نمط الكارتون باستخدام HTML وJavaScript وp5.js

مقدمة

في هذه الأيام وفي هذا العصر خصوصا أصبحت تطورات و تقنيات الويب من السهل إنشاء تطبيقات ويب تقوم بتعديل الصور وتحويلها إلى أشكال وأنماط مختلفة، مثل نمط الكارتون أو الأبيض والأسود وغيرها. في هذا الموضوع، سنتعلم كيفية بناء سكريبت ويب بسيط باستخدام HTML وJavaScript ومكتبة p5.js.

و يوفر لكم هذا السكريبت مجموعة من الأدوات لتعديل الصور، مثل تحويلها إلى نمط الكارتون، وتغيير التشبع، السطوع، التعتيم، وتطبيق فلاتر متعددة.

فيديو توضيحي

مميزات السكريبت

يحتوي هذا السكريبت على العديد من المميزات التي تجعل من السهل تعديل الصور وتحويلها، من أهم هذه المميزات:

سهولة رفع الصور: يحتوي السكريبت على زر لرفع الصور مباشرة من جهاز المستخدم، مما يسمح له بتجربة تعديلات متنوعة على صوره الشخصية أو صور أخرى.
مجموعة متنوعة من الفلاتر:
- فلتر الكارتون: يحول الصورة إلى نمط كارتوني عن طريق تقليل درجات الألوان وزيادة التباين.
- فلتر الأبيض والأسود: يحول الصورة إلى نمط أبيض وأسود بسيط.
- فلتر عكس الألوان: يعكس ألوان الصورة لإعطاء تأثير مختلف.
- فلتر سيبيا: يضيف تأثير سيبيا الذي يمنح الصورة طابعًا قديمًا ودافئًا.
أدوات تحكم إضافية:
- التحكم في التشبع: يمكن للمستخدم ضبط مستوى تشبع الألوان للحصول على صورة ملونة زاهية أو أقل تشبعًا.
- التحكم في السطوع: يمكن تعديل سطوع الصورة للحصول على صورة أكثر أو أقل إضاءة.
- التحكم في التعتيم: يمكن ضبط التعتيم لجعل الصورة شفافة أو معتمة.
إمكانية تحميل الصورة المعدلة: يمكن للمستخدم تنزيل الصورة المعدلة بصيغة PNG مباشرةً بعد التعديل.

كيفية إنشاء الكود

إليك شرح تفصيلي لطريقة إنشاء السكريبت خطوة بخطوة:

تهيئة صفحة HTML:
ابدأ بكتابة الهيكل الأساسي لصفحة HTML، وتضمين مكتبة p5.js التي توفر أدوات التعامل مع الصور والرسومات.
إنشاء أزرار الفلاتر وأدوات التحكم:
قم بإنشاء زر رفع الصورة باستخدام عنصر <input type="file">، وأضف أزرارًا لتطبيق الفلاتر مثل الكارتون، الأبيض والأسود، عكس الألوان، وفلتر سيبيا.
إعداد canvas لعرض الصورة:
باستخدام مكتبة p5.js، أنشئ canvas، وهو المكان الذي سيتم عرض الصورة المعدلة عليه.
تطبيق الفلاتر باستخدام p5.js:
استخدم دوال مثل POSTERIZE وTHRESHOLD لتطبيق الفلاتر على الصورة.
التعديل على خصائص الصورة:
أضف شريط تمرير للتحكم في السطوع والتشبع والتعتيم، بحيث يظهر التعديل مباشرة.
إعادة تعيين الصورة وتحميلها:
أضف زرًا لإعادة الصورة إلى حالتها الأصلية وزرًا آخر لتحميل الصورة المعدلة باستخدام دالة saveCanvas.

الكود تحويل الصور النهائي

إليك الكود الكامل للسكريبت:

  <!DOCTYPE html>
  <html lang="ar">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta charset="UTF-8">
    <title>تعديل الصور إلى نمط الكارتون</title>
    <style>
      body {
        text-align: center;
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  </head>
  <body>

    <!-- وضع أزرار الفلاتر والتحميل -->

    <script>
      // الدوال للتطبيق
    </script>
  </body>
  </html>

Code Script تحويل الصور الى كارتون

يوضح هذا السكريبت كيفية تحويل الصور إلى نمط الكارتون، كما يوفر أدوات تعديل سهلة لتمكين المستخدمين من تخصيص الصور حسب رغبتهم. يمكن تعديل الكود وإضافة المزيد من الفلاتر أو الأدوات، مما يجعله مناسبًا للتعلم والتجربة في مجال برمجة تطبيقات الويب الخاصة بتحرير الصور.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تعديل الصور إلى نمط الكارتون</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
    }
    #canvasContainer {
      margin-top: 20px;
    }
    button, input[type="file"], label {
      margin: 10px;
      padding: 10px;
      font-size: 16px;
    }
    #controls div {
      margin: 5px;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>

<h1>تعديل الصور إلى نمط الكارتون</h1>
  <input type="file" id="imageUploader" accept="image/*">
  
  <div id="controls">
    <button onclick="applyCartoonEffect()">فلتر الكارتون</button>
    <button onclick="applyGrayScale()">فلتر الأبيض والأسود</button>
    <button onclick="applyInvert()">فلتر عكس الألوان</button>
    <button onclick="applySepia()">فلتر سيبيا</button>
    <button onclick="resetImage()">إعادة الصورة الأصلية</button>
    
    <div>
      <label>تعديل التشبع:</label>
      <input type="range" id="saturationSlider" min="0" max="200" value="100" onchange="applySaturation()">
    </div>
    
    <div>
      <label>تعديل السطوع:</label>
      <input type="range" id="brightnessSlider" min="0" max="200" value="100" onchange="applyBrightness()">
    </div>
    
    <div>
      <label>تعديل التعتيم:</label>
      <input type="range" id="opacitySlider" min="0" max="255" value="255" onchange="applyOpacity()">
    </div>
    
    <button onclick="downloadImage()">تحميل الصورة المعدلة</button>
  </div>

function setup() {
      canvas = createCanvas(500, 500);
      canvas.parent('canvasContainer');
      noLoop();
    }

function applyCartoonEffect() {
      if (img) {
        img.filter(POSTERIZE, 6);
        img.filter(THRESHOLD, 0.3);
        updateCanvas();
      }
    }

function applyGrayScale() {
      if (img) {
        img.filter(GRAY);
        updateCanvas();
      }
    }

function applyInvert() {
      if (img) {
        img.filter(INVERT);
        updateCanvas();
      }
    }

function applySaturation() {
      saturationValue = document.getElementById("saturationSlider").value;
      updateCanvas();
    }

function applyBrightness() {
      brightnessValue = document.getElementById("brightnessSlider").value;
      updateCanvas();
    }

function applyOpacity() {
      opacityValue = document.getElementById("opacitySlider").value;
      updateCanvas();
    }

function resetImage() {
      if (originalImg) {
        img = originalImg.get();
        saturationValue = 100;
        brightnessValue = 100;
        opacityValue = 255;
        document.getElementById("saturationSlider").value = 100;
        document.getElementById("brightnessSlider").value = 100;
        document.getElementById("opacitySlider").value = 255;
        updateCanvas();
      }
    }

function updateCanvas() {
      if (img) {
        let editedImg = img.get();
        editedImg.filter(SATURATE, saturationValue / 100);
        editedImg.filter(BRIGHTNESS, brightnessValue / 100);
        tint(255, opacityValue); // التحكم في التعتيم
        image(editedImg, 0, 0, width, height);
      }
    }

function downloadImage() {
      saveCanvas(canvas, 'edited-image', 'png');
    }
  </script>

</body>
</html>

مثال تحويل الصور إلى نمط الكارتون

تعديل التشبع:

تعديل السطوع:

تعديل التعتيم:

Script تحويل الصور إلى نمط الكارتون

كيفية إنشاء سكريبت لتحويل الصور إلى نمط الكارتون باستخدام HTML وJavaScript وp5.js

مقدمة

مميزات السكريبت

كيفية إنشاء الكود

الكود تحويل الصور النهائي

Code Script تحويل الصور الى كارتون

مثال تحويل الصور إلى نمط الكارتون

دليل شامل حول PlayStation Plus

سكريبت أدوات متكاملة لتحرير النصوص وإدارتها بسهولة

الصفحات

GPLDROID

#buttons=(Accept !) #days=(20)

Contact form