کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **ویرایشگر تصویر** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران امکان می‌دهد که یک تصویر را بارگذاری کنند و سپس بر روی آن ویرایش‌هایی مانند تغییر اندازه، برش، و فیلترها را اعمال کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای ویرایشگر تصویر ایجاد می‌کنیم.
```html
ویرایشگر تصویر
```
### 2. **CSS**
برای طراحی ظاهری ویرایشگر تصویر از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="file"] {
margin-bottom: 20px;
}
canvas {
border: 1px solid #ccc;
margin-bottom: 20px;
max-width: 100%;
}
.controls button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin: 5px;
}
.controls button:hover {
background-color: #218838;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل بارگذاری تصویر و اعمال فیلترها و تنظیمات است.
```javascript
const imageUpload = document.getElementById('imageUpload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const grayscaleBtn = document.getElementById('grayscaleBtn');
const resetBtn = document.getElementById('resetBtn');
let originalImageData;
// بارگذاری تصویر
imageUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
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);
originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
});
// فیلتر خاکستری
grayscaleBtn.addEventListener('click', () => {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // Red
data[i + 1] = avg; // Green
data[i + 2] = avg; // Blue
}
ctx.putImageData(imageData, 0, 0);
});
// تنظیم مجدد
resetBtn.addEventListener('click', () => {
if (originalImageData) {
ctx.putImageData(originalImageData, 0, 0);
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی بارگذاری تصویر، یک بوم (canvas) برای نمایش تصویر و دکمه‌هایی برای اعمال فیلترها و تنظیم مجدد است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **بارگذاری تصویر**: هنگامی که کاربر یک تصویر بارگذاری می‌کند، تصویر روی بوم (canvas) رسم می‌شود و داده‌های آن ذخیره می‌شود.
- **فیلتر خاکستری**: هنگامی که کاربر دکمه "فیلتر خاکستری" را فشار می‌دهد، تصویر به رنگ خاکستری تغییر می‌کند.
- **تنظیم مجدد**: دکمه تنظیم مجدد تصویر را به حالت اولیه برمی‌گرداند.
### نتیجه‌گیری
این پروژه **ویرایشگر تصویر** یک مثال عالی برای استفاده از مفاهیم JavaScript، HTML5 و CSS برای کار با تصاویر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند برش تصویر، تغییر اندازه، و فیلترهای مختلف اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **ویرایشگر تصویر** با استفاده از HTML، CSS و JavaScript می‌باشد
