ساخت ادیتور عکس با HTML
در دنیای امروز، ویرایش عکس‌ها به یک نیاز اساسی تبدیل شده است. با استفاده از HTML، CSS و JavaScript، می‌توانیم یک ادیتور عکس ساده اما کارآمد بسازیم. بیایید مراحل ساخت این ادیتور را بررسی کنیم.
مراحل ساخت ادیتور عکس
۱. HTML ساختار اولیه
ابتدا باید ساختار HTML را ایجاد کنیم. در اینجا، یک فرم برای بارگذاری عکس و یک بوم (canvas) برای نمایش و ویرایش تصویر خواهیم داشت.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>ادیتور عکس</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>ادیتور عکس آنلاین</h1>
<input type="file" id="upload" accept="image/*">
<canvas id="canvas"></canvas>
<button id="save">ذخیره عکس</button>
<script src="script.js"></script>
</body>
</html>
```
۲. CSS برای استایل
حالا زمان آن است که به طراحی بپردازیم. با CSS می‌توانیم جلوه‌های بصری بهتری به ادیتور بدهیم.
```css
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #ccc;
margin-top: 20px;
}
```
۳. JavaScript برای ویرایش
در نهایت، به کدنویسی با JavaScript می‌پردازیم. این کد عکس بارگذاری شده را در بوم قرار می‌دهد و امکان ویرایش را فراهم می‌کند.
```javascript
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
upload.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
});
```
۴. ذخیره عکس
برای ذخیره عکس ویرایش شده نیز می‌توانیم از متد `toDataURL` استفاده کنیم.
```javascript
document.getElementById('save').addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'edited-image.png';
link.href = canvas.toDataURL();
link.click();
});
```
نتیجه‌گیری
در اینجا، یک ادیتور عکس ساده با استفاده از HTML، CSS و JavaScript ساختیم. این ادیتور به کاربران امکان می‌دهد عکس‌های خود را بارگذاری و ویرایش کنند. با اضافه کردن قابلیت‌های بیشتر مانند فیلترها و ابزارهای ویرایش پیشرفته‌تر، می‌توانیم این ادیتور را به یک ابزار قدرتمند برای ویرایش عکس تبدیل کنیم.
