تعديل الصور بمرونة واحترافية باستخدام Cropper.js
إنشاء أداة تفاعلية لتحرير الصور باستخدام HTML و JavaScript ومكتبة Cropper.js
تهدف هذه الأداة إلى توفير واجهة بسيطة وسهلة الاستخدام لتحرير الصور مباشرةً في المتصفح. باستخدام HTML وCSS وJavaScript، وأداة Cropper.js، يمكن للمستخدمين تحميل صورهم وتعديلها بمرونة من خلال إضافة التأثيرات مثل السطوع والتباين وتدرج الألوان، و بالإضافة إلى إضافة حواف دائرية وظلال للصورة. فيما يلي شرح مفصل لكل جزء من هذا الكود:
شرح الكود تعديل الصور
رأس الصفحة
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تعديل الصور باستخدام Cropper.js</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<style>
/* أنماط الصفحة */
</style>
</head>
في هذا الجزء، نقوم بتضمين مكتبة Cropper.js التي تسمح بإضافة ميزات التقطيع والتكبير والتصغير والتحكم في الصورة. يتم استيراد المكتبة مع ملف الـCSS الخاص بها لتنسيق واجهة Cropper.js.
محتوى الصفحة
<body>
<h2>تعديل الصور باستخدام Cropper.js</h2>
<input type="file" id="upload" accept="image/*">
<div id="image-container">
<img id="image">
</div>
<div class="controls">
<button onclick="cropImage()">قص الصورة</button>
<button onclick="downloadImage()">تحميل الصورة</button>
</div>
<div id="result-container">
<div id="result"></div>
</div>
</body>
يحتوي هذا الجزء على واجهة المستخدم: زر لاختيار صورة من الجهاز (باستخدام <input type="file">), مكان لعرض الصورة المحملة وعرض النتيجة النهائية بعد التعديل، وأزرار "قص الصورة" و"تحميل الصورة".
التحكمات الإضافية
<div class="slider-container">
<label>السطوع:</label>
<input type="range" id="brightness" class="slider" min="0" max="2" step="0.1" value="1" oninput="adjustImage()">
</div>
تتيح هذه العناصر التحكم بالسطوع والتباين وتدرج الألوان بالإضافة إلى إضافة حواف دائرية وظلال للصورة باستخدام شريط التمرير (Slider).
البرمجة باستخدام JavaScript
let cropper;
let imageDataURL;
const uploadInput = document.getElementById('upload');
const image = document.getElementById('image');
const result = document.getElementById('result');
uploadInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
image.src = url;
image.style.display = "block";
if (cropper) cropper.destroy();
cropper = new Cropper(image, {
viewMode: 1,
zoomable: true,
scalable: true,
});
}
});
عند اختيار صورة، يتم عرضها داخل عنصر <img>، وتُنشئ مكتبة Cropper.js واجهة لقص وتعديل الصورة.
وظيفة قص الصورة وعرضها بعد القص
function cropImage() {
if (cropper) {
const croppedCanvas = cropper.getCroppedCanvas();
imageDataURL = croppedCanvas.toDataURL("image/jpeg");
result.innerHTML = `<h3>الصورة المعدلة:</h3><img src="${imageDataURL}" alt="Cropped Image" style="${getImageStyle()}">`;
} else {
alert("يرجى رفع صورة أولاً.");
}
}
تقوم هذه الوظيفة بقص الصورة بناءً على التحديد الذي قام به المستخدم وتعرض النتيجة النهائية داخل <div id="result">.
تطبيق التعديلات البصرية
function adjustImage() {
const resultImage = result.querySelector('img');
if (resultImage) {
resultImage.style.cssText = getImageStyle();
}
}
تسمح هذه الوظيفة بتحديث إعدادات السطوع والتباين وتدرج الألوان وتطبيقها على الصورة بعد قصها.
إعداد التنسيقات بناءً على التعديلات
function getImageStyle() {
const brightness = document.getElementById('brightness').value;
const contrast = document.getElementById('contrast').value;
const hue = document.getElementById('hue').value;
const borderRadius = document.getElementById('borderRadius').value;
const boxShadow = document.getElementById('boxShadow').value;
return `
filter: brightness(${brightness}) contrast(${contrast}) hue-rotate(${hue}deg);
border-radius: ${borderRadius}px;
box-shadow: 0px 0px ${boxShadow}px rgba(0,0,0,0.5);
`;
}
وظيفة تحميل الصورة المعدلة
function downloadImage() {
if (imageDataURL) {
const a = document.createElement('a');
a.href = imageDataURL;
a.download = 'edited-image.jpg';
a.click();
} else {
alert("يرجى قص الصورة أولاً.");
}
}
تتيح هذه الوظيفة تحميل الصورة المعدلة بصيغة JPEG عن طريق إنشاء رابط <a> ثم إطلاق حدث النقر عليه لتحميل الملف.
الخلاصة
توفر هذه الأداة تفاعلية عالية لتعديل الصور باستخدام HTML وJavaScript وCSS، وتسمح لمستخدميها بتحميل صورة وتعديلها باستخدام قص وتغيير السطوع والتباين وإضافة تأثيرات أخرى.
