فكرة خاصة بي "لن تحتاج محرر تعديل صور بعد اليوم: محرر الصور العبقري في متصفحك" بالذكاء الاصطناعي

أولًا: الهيكل العام بلغة HTML

html

<!DOCTYPE html>
<html lang="ar">

<!DOCTYPE html>: إعلان بأن الصفحة تستخدم HTML5.
lang="ar": لجعل اتجاه الصفحة عربي، وهذا مفيد في تنسيق النصوص والأزرار خاصة للغات RTL.

🖥️ الوسوم داخل `<head>`

html

<meta charset="UTF-8" />
<title>🧠 محرر صور ذكي ومتكامل</title>
<script src="https://cdn.jsdelivr.net/npm/ml5@latest/dist/ml5.min.js"></script>

meta charset="UTF-8": يدعم اللغة العربية والحروف الخاصة.
title: عنوان الصفحة كما يظهر في المتصفح.
script src: تحميل مكتبة ml5.js، وهي نسخة مبنية على تستخدم نماذج جاهزة من الذكاء الاصطناعي.

⚠️ خطأ ممكن: إذا كانت مكتبة ml5 غير متوفرة في هذا الرابط، لن يتم تحميل النموذج. تحقق دائمًا من عنوان CDN.

🎨 التنسيقات باستخدام CSS

css

body {
  font-family: Tahoma;
  background: #f7f7f7;
  text-align: center;
  padding: 20px;
}
canvas {
  border: 1px solid #aaa;
  display: block;
  margin: 20px auto;
}

font-family: Tahoma: خط سهل القراءة.
canvas: تحديد شكل الكانفس المستخدم في الرسم.

✅ مهم لضبط شكل المحرر، وقد يؤدي خطأ في canvas إلى اختفائه من الصفحة.

📂 تحميل الصورة

html

<input type="file" id="upload" accept="image/*">

يتيح اختيار صورة من الجهاز، ويتعرّف على الصور فقط من خلال accept="image/*".

🖱️ الأزرار

html

<button onclick="openImage()">📂 فتح</button>

عند الضغط يتم تنفيذ دالة JavaScript. هنا onclick يربط الزر بدالة openImage.

🎨 تعريف الكانفس والكائنات

const canvas = document.getElementById("paint");
const ctx = canvas.getContext("2d");

الكانفس هو المكان الذي يتم فيه عرض وتعديل الصورة.
ctx هو السياق للرسم ثنائي الأبعاد.

⚠️ خطأ ممكن: إذا كان id في HTML مختلفًا عن "paint"، فلن يعمل الكود.

💡 تحميل النموذج الذكي

ml5.objectDetector("cocossd", model => {
  detector = model;
});

تستخدم ml5 لتحميل نموذج COCO-SSD للكشف عن العناصر.
يُخزّن في detector.

✅ عند فشل تحميل النموذج، تحقق من الاتصال بالإنترنت أو إصدار المكتبة.

📷 فتح صورة ونسخ/لصق

function openImage() {
  const file = upload.files[0];
  // التحقق من وجود ملف
  originalSrc = URL.createObjectURL(file);
  img = new Image();
  img.onload = () => {
    ctx.clearRect(...);
    ctx.drawImage(...);
    saveState();
  };
  img.src = originalSrc;
}

يتم إنشاء كائن صورة من الملف وتحميله داخل الكانفس.
saveState يحفظ الحالة لميزة "تراجع".

✂️ وظيفة القص

function cropArea() {
  const x = 100, y = 100, w = 300, h = 200;
  const data = ctx.getImageData(x, y, w, h);
  canvas.width = w;
  canvas.height = h;
  ctx.putImageData(data, 0, 0);
  saveState();
}

يقتطع جزء محدد من الكانفس. لتعميم الوظيفة، يمكن جعل الإحداثيات ديناميكية.

✏️ الرسم الحر

canvas.onmousedown = ...
canvas.onmousemove = ...
canvas.onmouseup = ...

هذه الأحداث تستخدم لرسم يدوي عند الضغط على الكانفس ثم تحريك الماوس.

✅ تأكد من ضبط isDrawing = true عند بداية الرسم.

🖋️ أداة النقاط والمنحنيات

canvas.onclick = (e) => {
  penPoints.push({ x: e.offsetX, y: e.offsetY });
  drawBezier();
};

كل نقرة تضيف نقطة، وتُرسم المنحنيات باستخدام bezierCurve.

✅ تأكد أن عدد النقاط ≥ 4 حتى تعمل bezier بشكل صحيح.

✨ الكشف الذكي

detector.detect(canvas, (err, results) => { ... });

يكتشف العناصر المرسومة على الكانفس ويظهرها بمستطيل وعنوان.

🔎 مفيد جدًا لتحديد الأشخاص، السيارات، وغيرها داخل الصور.

🧠 الإصلاح التلقائي

ctx.fillStyle = "#f7f7f7";
ctx.fillRect(obj.x, obj.y, obj.width, obj.height);

يمسح العنصر المكتشف بلون الخلفية. هذه طريقة بسيطة، لكنها قد تكون قاسية. يمكن تحسينها بتقنيات inpainting لاحقًا.

💾 الحفظ

const link = document.createElement("a");
link.download = "edited-image.png";
link.href = canvas.toDataURL("image/png");
link.click();

يحفظ الكانفس كصورة PNG جاهزة للتحميل.

فكرة خاصة بي 19/7/2025

rmdesignflo55

بحث هذه المدونة الإلكترونية

حورات مع _rmdesignflo55_AI