كيفية إنشاء أداة لتعديل الصور

byمدونة العرائش التقنية -

كيفية إنشاء أداة تعديل الصور باستخدام Cropper.js

كيفية إنشاء أداة لتعديل الصور

في هذا الموضوع و من خلال مدونة العرائش التقنية سوف نتعلم كيفية بناء أداة متكاملة لتعديل الصور باستخدام مكتبة Cropper.js التي تعتبر من أفضل المكتبات المخصصة لقص وتعديل الصور في الويب.

لماذا Cropper.js؟

  • خفيفة الوزن (حوالي 35KB فقط)
  • تدعم جميع المتصفحات الحديثة
  • سهلة التكامل مع المشاريع
  • توفر واجهة مستخدم بديهية

ماهي المتطلبات الأساسية لإنشاء كود تعديل الصور

قبل البدء، أنت بحاجة إلى:

  1. محرر نصوص مثل VS Code
  2. متصفح ويب حديث (يفضل Chrome أو Firefox)
  3. معرفة أساسية بـ HTML و JavaScript
 

إعداد الهيكل الأساسي لصفحة تعديل الصور


<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>أداة تعديل الصور</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>أداة تعديل الصور</h1>
        <input type="file" id="upload" accept="image/*">
        <div id="image-container"><img id="image"></div>
        <button id="crop-btn">قص الصورة</button>
        <div id="result"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
    <script>
        // الكود البرمجي سيأتي هنا
    </script>
</body>
</html>

كيفية تهيئة Cropper.js

أضف هذا الكود البرمجي داخل وسم <script>:


document.addEventListener('DOMContentLoaded', function() {
    const image = document.getElementById('image');
    let cropper;
    
    document.getElementById('upload').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = function(event) {
            image.src = event.target.result;
            
            if (cropper) {
                cropper.destroy();
            }
            
            cropper = new Cropper(image, {
                aspectRatio: 16 / 9,
                viewMode: 1,
                autoCropArea: 0.8,
            });
        };
        reader.readAsDataURL(file);
    });
});

يمكنك معرفة المزيد عن خيارات التهيئة من الوثائق الرسمية.


إضافة كود وظيفة قص الصور


document.getElementById('crop-btn').addEventListener('click', function() {
    if (!cropper) {
        alert('الرجاء تحميل صورة أولاً');
        return;
    }
    
    const croppedCanvas = cropper.getCroppedCanvas();
    if (!croppedCanvas) {
        alert('حدث خطأ أثناء القص');
        return;
    }
    
    document.getElementById('result').innerHTML = '';
    croppedCanvas.toBlob(function(blob) {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        document.getElementById('result').appendChild(img);
    }, 'image/jpeg', 0.9);
});

إضافة ادوات متقدمة لتعديل الصور

1. دعم السحب والإفلات


document.getElementById('image-container').addEventListener('dragover', function(e) {
    e.preventDefault();
});

document.getElementById('image-container').addEventListener('drop', function(e) {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file && file.type.match('image.*')) {
        document.getElementById('upload').files = e.dataTransfer.files;
        const event = new Event('change');
        document.getElementById('upload').dispatchEvent(event);
    }
});

2. إمكانية التكبير والتصغير

يمكنك استخدام خاصية zoomable في خيارات Cropper:


new Cropper(image, {
    zoomable: true,
    zoomOnWheel: true
});

راجع دليل التكبير لمزيد من التفاصيل.

نصائح لتحسين الأداء

كود تعديل الصور كامل 


كيفية النشر والتوزيع

يمكنك نشر الأداة باستخدام:

المراجع والمصادر

آخر تحديث: يوليو 2025

Tags
أحدث أقدم

نموذج الاتصال