كود تعديل الصور باستخدام HTML، CSS و JavaScript

مقدمة

يُعدّ تعديل الصور من المهام الأساسية في التطبيقات والواجهات الرسومية المختلفة، سواءً لإنشاء تصميمات مبتكرة أو لإجراء تعديلات بسيطة على الصور المرفوعة من قبل المستخدمين.

فيديو توضيحي 

و من خلال هذا الكود البسيط المكتوب باستخدام HTML، CSS، وJavaScript، يمكن للمستخدم رفع صورة من جهازه، وتعديل أبعادها، وتطبيق حواف دائرية (border-radius)،

و كذلك يمكن من إضافة إطار (border) بلون وسمك مخصصين. كما يمكنه بعد الانتهاء تحميل الصورة المعدلة بصيغة PNG.

ميزات الكود

يقدّم هذا الكود واجهة بسيطة وسهلة الاستخدام تحتوي على الأدوات التالية:

• رفع الصور: يمكن للمستخدم رفع صورة من جهازه الشخصي لبدء التعديل.
• تغيير الأبعاد: يمكن تعديل العرض والارتفاع باستخدام عناصر إدخال من نوع range.
• تطبيق حواف دائرية (border-radius): يمكن تعديل نصف القطر للحواف، مما يتيح التحكم في مدى انحناء الزوايا.
• إضافة إطار (border): يتضمن الكود القدرة على إضافة إطار خارجي للصورة مع تخصيص سمك ولون هذا الإطار.
• تحميل الصورة المعدلة: يمكن للمستخدم بعد إجراء التعديلات حفظ الصورة النهائية على جهازه.

شرح الكود

1. HTML - إنشاء عناصر واجهة المستخدم

يتم إعداد واجهة المستخدم باستخدام HTML، حيث تُعرض أدوات التحكم في صورة عناصر input مثل أشرطة التمرير (range) لاختيار العرض، الارتفاع، نصف القطر، وسمك الإطار، بالإضافة إلى محدد ألوان لتغيير لون الإطار.

<div class="controls">
    <input type="file" id="upload" accept="image/*">
    <label>العرض: <input type="range" id="width" min="50" max="500" value="300"></label>
    <label>الارتفاع: <input type="range" id="height" min="50" max="500" value="300"></label>
    <label>نصف القطر للحواف: <input type="range" id="radius" min="0" max="50" value="0"></label>
    <label>سمك الإطار: <input type="range" id="borderWidth" min="0" max="20" value="0"></label>
    <label>لون الإطار: <input type="color" id="borderColor" value="#000000"></label>
    <button onclick="downloadImage()">تحميل الصورة المعدلة</button>
</div>

CSS - تنسيق عناصر الواجهة

يتم تنسيق الحاوية الخاصة بالصورة باستخدام CSS، حيث يتم تعيين الحدود القصوى لحجم الحاوية، وتطبيق خاصية overflow: hidden لضمان عدم ظهور أي جزء من الصورة خارج الإطار.

#image-container {
    max-width: 400px;
    max-height: 400px;
    margin: 20px auto;
    border: var(--border-width, 0) solid var(--border-color, #000);
    border-radius: var(--border-radius, 0);
    overflow: hidden;
    display: none;
}
#output {
    display: block;
    width: 100%;
    height: 100%;
}

JavaScript - تحميل وتعديل الصورة

يُستخدم JavaScript للتعامل مع رفع الصورة، وتحديث الأبعاد، وتطبيق الحواف والإطار، وأخيراً تحميل الصورة النهائية.

 و من خلال هذا الكود، قمنا بتعريف بعض الوظائف لتسهيل هذه العمليات:

أ. handleImageUpload - تحميل الصورة

تقوم هذه الدالة بتحميل الصورة من جهاز المستخدم وعرضها على لوحة الرسم (canvas).

function handleImageUpload() {
    const file = upload.files[0];
    const reader = new FileReader();
    reader.onload = () => {
        img.src = reader.result;
        img.onload = () => {
            canvas.width = widthRange.value;
            canvas.height = heightRange.value;
            updateImage();
            document.getElementById('image-container').style.display = 'block';
        };
    };
    if (file) {
        reader.readAsDataURL(file);
    }
}

ب. updateImage - تعديل الصورة

تقوم هذه الدالة بتحديث خصائص الصورة بناءً على القيم المحددة من قبل المستخدم (العرض، الارتفاع، نصف القطر، وسمك ولون الإطار).

function updateImage() {
    const width = parseInt(widthRange.value);
    const height = parseInt(heightRange.value);
    const radius = parseInt(radiusRange.value);
    const borderWidth = parseInt(borderWidthRange.value);
    const borderColor = borderColorPicker.value;

    canvas.width = width + 2 * borderWidth;
    canvas.height = height + 2 * borderWidth;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(borderWidth + radius, borderWidth);
    ctx.arcTo(width + borderWidth, borderWidth, width + borderWidth, height + borderWidth, radius);
    ctx.arcTo(width + borderWidth, height + borderWidth, borderWidth, height + borderWidth, radius);
    ctx.arcTo(borderWidth, height + borderWidth, borderWidth, borderWidth, radius);
    ctx.arcTo(borderWidth, borderWidth, width + borderWidth, borderWidth, radius);
    ctx.closePath();
    ctx.clip();

    ctx.drawImage(img, borderWidth, borderWidth, width, height);
    ctx.restore();

    if (borderWidth > 0) {
        ctx.lineWidth = borderWidth;
        ctx.strokeStyle = borderColor;
        ctx.stroke();
    }
}

ج. downloadImage - تحميل الصورة المعدلة

تقوم هذه الدالة بحفظ الصورة النهائية المعدلة على جهاز المستخدم بصيغة PNG.

function downloadImage() {
    const link = document.createElement('a');
    link.download = 'modified-image.png';
    link.href = canvas.toDataURL();
    link.click();
}

كيف يعمل الكود؟

1. يقوم المستخدم بتحميل صورة من جهازه باستخدام عنصر input من نوع file.
2. عند رفع الصورة، يتم عرضها في لوحة الرسم (canvas) ويتم تفعيل أدوات التحكم لتغيير الخصائص.
3. يتمكن المستخدم من تعديل عرض وارتفاع الصورة، نصف القطر للحواف، وسمك ولون الإطار.
4. بعد تطبيق التعديلات، يمكن للمستخدم النقر على زر "تحميل الصورة المعدلة" لحفظ الصورة النهائية على جهازه.

التطبيقات العملية

هذا الكود يمكن استخدامه في تطبيقات وتنسيقات متعددة، مثل:

• تطبيقات تحرير الصور البسيطة.
• صفحات الويب التي تتيح للمستخدمين تعديل صورهم الشخصية قبل رفعها.
• تطبيقات التصميم البسيطة التي تحتاج أدوات تعديل سريعة ومباشرة.

كود سكريبت image editor

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

بحيث يعدّ هذا الكود مقدمة ممتازة لفهم كيفية التعامل مع الصور وتعديلها عبر المتصفح، مما يساعد في تطوير المزيد من التطبيقات والخصائص المتقدمة.

مثال Script Image Editor 

العرض: الارتفاع: نصف القطر للحواف: سمك الإطار: لون الإطار:

<div class="container"> <style> #image-container { max-width: 400px; max-height: 400px; margin: 20px auto; border: var(--border-width, 0) solid var(--border-color, #000); border-radius: var(--border-radius, 0); overflow: hidden; display: none; } #output { display: block; width: 100%; height: 100%; } .controls { margin: 20px auto; text-align: center; } </style> <div class="controls"> <input type="file" id="upload" accept="image/*"> <label>العرض: <input type="range" id="width" min="50" max="500" value="300"></label> <label>الارتفاع: <input type="range" id="height" min="50" max="500" value="300"></label> <label>نصف القطر للحواف: <input type="range" id="radius" min="0" max="50" value="0"></label> <label>سمك الإطار: <input type="range" id="borderWidth" min="0" max="20" value="0"></label> <label>لون الإطار: <input type="color" id="borderColor" value="#000000"></label> <button onclick="downloadImage()">تحميل الصورة المعدلة</button> </div> <div id="image-container"> <canvas id="output"></canvas> </div> <script> const upload = document.getElementById('upload'); const widthRange = document.getElementById('width'); const heightRange = document.getElementById('height'); const radiusRange = document.getElementById('radius'); const borderWidthRange = document.getElementById('borderWidth'); const borderColorPicker = document.getElementById('borderColor'); const canvas = document.getElementById('output'); const ctx = canvas.getContext('2d'); let img = new Image(); upload.addEventListener('change', handleImageUpload); widthRange.addEventListener('input', updateImage); heightRange.addEventListener('input', updateImage); radiusRange.addEventListener('input', updateImage); borderWidthRange.addEventListener('input', updateImage); borderColorPicker.addEventListener('input', updateImage); function handleImageUpload() { const file = upload.files[0]; const reader = new FileReader(); reader.onload = () => { img.src = reader.result; img.onload = () => { canvas.width = widthRange.value; canvas.height = heightRange.value; updateImage(); document.getElementById('image-container').style.display = 'block'; }; }; if (file) { reader.readAsDataURL(file); } } function updateImage() { const width = parseInt(widthRange.value); const height = parseInt(heightRange.value); const radius = parseInt(radiusRange.value); const borderWidth = parseInt(borderWidthRange.value); const borderColor = borderColorPicker.value; // إعداد حجم اللوحة لتشمل حدود الإطار canvas.width = width + 2 * borderWidth; canvas.height = height + 2 * borderWidth; // تنظيف اللوحة ctx.clearRect(0, 0, canvas.width, canvas.height); // تطبيق الإطار الدائري ctx.save(); ctx.beginPath(); ctx.moveTo(borderWidth + radius, borderWidth); ctx.arcTo(width + borderWidth, borderWidth, width + borderWidth, height + borderWidth, radius); ctx.arcTo(width + borderWidth, height + borderWidth, borderWidth, height + borderWidth, radius); ctx.arcTo(borderWidth, height + borderWidth, borderWidth, borderWidth, radius); ctx.arcTo(borderWidth, borderWidth, width + borderWidth, borderWidth, radius); ctx.closePath(); ctx.clip(); // رسم الصورة ctx.drawImage(img, borderWidth, borderWidth, width, height); ctx.restore(); // رسم الإطار if (borderWidth > 0) { ctx.lineWidth = borderWidth; ctx.strokeStyle = borderColor; ctx.stroke(); } } function downloadImage() { const link = document.createElement('a'); link.download = 'modified-image.png'; link.href = canvas.toDataURL(); link.click(); } </script> </div>

Tags

كود سكريبت

• Facebook
• Twitter
• Whatsapp

• أحدث

• أقدم