ساخت یک اپلیکیشن ویرایش عکس ساده با استفاده از HTML، CSS و JavaScript می‌تواند یک پروژه جذاب و آموزنده باشد. در اینجا یک نمونه ساده از ویرایشگر عکس ارائه شده است که به کاربر امکان بارگذاری تصویر، اعمال فیلترها و ذخیره تصویر ویرایش شده را می‌دهد.
### ویژگی‌های اصلی پروژه
1. **بارگذاری تصویر**: کاربر می‌تواند یک تصویر را بارگذاری کند.
2. **اعمال فیلتر**: اعمال فیلترهای ساده مانند روشنایی و کنتراست.
3. **ذخیره تصویر ویرایش شده**: امکان ذخیره تصویر ویرایش شده به عنوان فایل.
4. **رابط کاربری ساده**: طراحی کاربرپسند و آسان.
### کد منبع نمونه
#### ۱. ایجاد فایل HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کرده و کد زیر را در آن قرار دهید:
```html
ویرایشگر عکس
ویرایشگر عکس ساده
```
#### ۲. ایجاد فایل CSS
سپس یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
```css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
color: #333;
}
canvas {
border: 1px solid #ccc;
margin: 20px 0;
}
input[type="range"] {
margin: 10px 0;
}
```
#### ۳. ایجاد فایل JavaScript
یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
```javascript
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const brightnessSlider = document.getElementById('brightness');
const contrastSlider = document.getElementById('contrast');
const downloadButton = document.getElementById('download');
let image = new Image();
upload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
image.src = event.target.result;
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
};
};
reader.readAsDataURL(file);
}
});
// تابعی برای به‌روزرسانی تصویر
function updateImage() {
ctx.drawImage(image, 0, 0);
ctx.filter = `brightness(${brightnessSlider.value}%) contrast(${contrastSlider.value}%)`;
ctx.drawImage(image, 0, 0);
}
// به‌روزرسانی تصویر در هنگام تغییر فیلترها
brightnessSlider.addEventListener('input', updateImage);
contrastSlider.addEventListener('input', updateImage);
// ذخیره تصویر
downloadButton.addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'edited-image.png';
link.href = canvas.toDataURL();
link.click();
});
```
### نحوه اجرای پروژه
1. پس از ایجاد همه فایل‌ها، به پوشه پروژه خود بروید.
2. فایل `index.html` را در مرورگر خود باز کنید.
### نتیجه‌گیری
این پروژه یک ویرایشگر عکس ساده است که به کاربر این امکان را می‌دهد تا تصاویر را بارگذاری کرده، فیلترهای مختلف را بر روی آن‌ها اعمال کند و تصویر ویرایش شده را ذخیره کند. شما میتوانید این ویرایشگر را با افزودن ویژگی‌های بیشتر مانند فیلترهای اضافی، برش، چرخش و افزودن متن گسترش دهید. همچنین میتوانید با استفاده از کتابخانه‌های جاوااسکریپت مانند Fabric.js یا p5.js، امکانات بیشتری به ویرایشگر اضافه کنید.
