أداة ضغط وتعديل الصور

:root {
–bg: #f9f9f9;
–text: #222;
–card: #fff;
–accent: #0965e9;
}
@media (prefers-color-scheme: dark) {
:root {
–bg: #121212;
–text: #eee;
–card: #1e1e1e;
–accent: #81C784;
}
}
body {
background: var(–bg);
color: var(–text);
font-family: ‘Segoe UI’, Tahoma, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
.uploader, .options, .preview-container {
background: var(–card);
border-radius: 10px;
margin: auto;
max-width: 800px;
padding: 20px;
}
.uploader {
border: 2px dashed var(–accent);
cursor: pointer;
}
.uploader input {
display: none;
}
label, input, select {
display: block;
margin: 10px auto;
font-size: 14px;
}
button {
background: var(–accent);
color: white;
border: none;
padding: 10px 25px;
margin-top: 10px;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
}
button:hover {
opacity: 0.9;
}
.preview-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.preview-container .image-box {
position: relative;
text-align: center;
}
.preview-container img {
max-width: 180px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s;
}
.download-btn {
background: var(–accent);
color: white;
border: none;
padding: 8px 18px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-top: 8px;
display: inline-block;
}
.download-btn:hover {
background-color: #388e3c;
}
#downloadAllBtn {
display: none;
}

/* نافذة تكبير الصورة */
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
}
.modal img {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
}

أداة ضغط وتعديل الصور

تحميل الكل كـ ZIP

const imageInput = document.getElementById(“imageInput”);
const previewContainer = document.getElementById(“previewContainer”);
const qualitySlider = document.getElementById(“quality”);
const qualityValue = document.getElementById(“qualityValue”);
const formatSelect = document.getElementById(“format”);
const resizeWidth = document.getElementById(“resizeWidth”);
const resizeHeight = document.getElementById(“resizeHeight”);
const rotateInput = document.getElementById(“rotate”);
const positionSelect = document.getElementById(“position”);
const watermarkInput = document.getElementById(“watermarkInput”);
const watermarkTextInput = document.getElementById(“watermarkText”);
const watermarkSizeInput = document.getElementById(“watermarkSize”);
const optionsBox = document.getElementById(“options”);
const downloadAllBtn = document.getElementById(“downloadAllBtn”);
const modalImg = document.getElementById(“modalImg”);
const imgModal = document.getElementById(“imgModal”);

let selectedFiles = [], dataURLs = [];

imageInput.addEventListener(“change”, e => {
selectedFiles = Array.from(e.target.files);
if (selectedFiles.length) optionsBox.style.display = “block”;
});

qualitySlider.addEventListener(“input”, () => {
qualityValue.textContent = qualitySlider.value;
});

function drawWatermark(ctx, watermark, canvasWidth, canvasHeight, position, scale) {
const wmWidth = watermark.width * (scale / 100);
const wmHeight = watermark.height * (scale / 100);
let x = 0, y = 0;
switch (position) {
case “top-right”: x = canvasWidth – wmWidth – 10; y = 10; break;
case “bottom-left”: x = 10; y = canvasHeight – wmHeight – 10; break;
case “bottom-right”: x = canvasWidth – wmWidth – 10; y = canvasHeight – wmHeight – 10; break;
case “center”: x = (canvasWidth – wmWidth) / 2; y = (canvasHeight – wmHeight) / 2; break;
default: x = 10; y = 10;
}
ctx.globalAlpha = 0.6;
ctx.drawImage(watermark, x, y, wmWidth, wmHeight);
ctx.globalAlpha = 1.0;
}

function drawTextWatermark(ctx, text, canvasWidth, canvasHeight, position) {
if (!text) return;
ctx.font = “20px Arial”;
ctx.fillStyle = “rgba(255,255,255,0.6)”;
ctx.textBaseline = “top”;
let x = 10, y = 10;
switch (position) {
case “top-right”: x = canvasWidth – ctx.measureText(text).width – 10; break;
case “bottom-left”: y = canvasHeight – 30; break;
case “bottom-right”: x = canvasWidth – ctx.measureText(text).width – 10; y = canvasHeight – 30; break;
case “center”: x = (canvasWidth – ctx.measureText(text).width) / 2; y = canvasHeight / 2; break;
}
ctx.fillText(text, x, y);
}

function processImages() {
const quality = parseFloat(qualitySlider.value);
const format = formatSelect.value;
const width = parseInt(resizeWidth.value);
const height = parseInt(resizeHeight.value);
const rotate = parseInt(rotateInput.value) || 0;
const position = positionSelect.value;
const watermarkText = watermarkTextInput.value.trim();
const watermarkSize = parseInt(watermarkSizeInput.value);
dataURLs = [];
previewContainer.innerHTML = “”;

const wmPromise = new Promise(resolve => {
if (watermarkInput.files[0]) {
const reader = new FileReader();
reader.onload = e => {
const wm = new Image();
wm.onload = () => resolve(wm);
wm.src = e.target.result;
};
reader.readAsDataURL(watermarkInput.files[0]);
} else resolve(null);
});

wmPromise.then(watermark => {
selectedFiles.forEach(file => {
const reader = new FileReader();
reader.onload = e => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement(“canvas”);
const ctx = canvas.getContext(“2d”);
let w = width || img.width;
let h = height || img.height;

canvas.width = rotate ? h : w;
canvas.height = rotate ? w : h;

if (rotate) {
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((rotate * Math.PI) / 180);
ctx.drawImage(img, -w / 2, -h / 2, w, h);
} else {
ctx.drawImage(img, 0, 0, w, h);
}

if (watermark) drawWatermark(ctx, watermark, canvas.width, canvas.height, position, watermarkSize);
if (watermarkText) drawTextWatermark(ctx, watermarkText, canvas.width, canvas.height, position);

const dataURL = canvas.toDataURL(format, quality);
dataURLs.push({ dataURL, name: `SHMS4M-${file.name.split(‘.’)[0]}.${format.split(‘/’)[1]}` });

const box = document.createElement(“div”);
box.className = “image-box”;
box.innerHTML = `


تحميل الصورة
`;
previewContainer.appendChild(box);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});

downloadAllBtn.style.display = “inline-block”;
});
}

function downloadAll() {
const zip = new JSZip();
dataURLs.forEach((img, i) => {
zip.file(img.name, img.dataURL.split(‘,’)[1], { base64: true });
});
zip.generateAsync({ type: “blob” }).then(blob => {
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “images.zip”;
link.click();
});
}

function showModal(src) {
modalImg.src = src;
imgModal.style.display = “flex”;
}

📉 فوائد ضغط الصور وتحويلها إلى صيغة WebP

🚀 1. تسريع تحميل الموقع

الصور المضغوطة وصيغة WebP تساهم في تقليل حجم الصفحة، مما يؤدي إلى تحميل أسرع بنسبة كبيرة.

هذا يُحسن تجربة الزائر ويقلل معدل الارتداد.

📶 2. توفير في استهلاك البيانات

تقلل من استهلاك بيانات الإنترنت للزوار، خصوصًا لمستخدمي الجوال أو الإنترنت البطيء.

💾 3. تقليل حجم التخزين على السيرفر

تساعد على تقليل المساحة المستخدمة لتخزين الصور في موقعك أو قواعد البيانات.

🖼️ 4. الحفاظ على جودة الصورة

ضغط الصور لا يعني فقدان الجودة، خاصة عند استخدام خوارزميات ذكية أو تحويلها إلى WebP الذي يحافظ على جودة ممتازة بأحجام صغيرة.

🌐 5. تحسين السيو (SEO)

المواقع الأسرع في التحميل تحصل على تقييم أعلى من محركات البحث.

الصور الخفيفة تعزز ترتيبك في نتائج البحث.

📱 6. تحسين أداء الموقع على الهواتف

WebP مدعومة من جميع المتصفحات الحديثة، وتُعتبر مثالية لعرض الصور على الهواتف بجودة ممتازة وسرعة عالية.

💡 7. دعم الشفافية والرسوم المتحركة

صيغة WebP تدعم الشفافية مثل PNG والرسوم المتحركة مثل GIF ولكن بحجم أصغر.

✅ مثال توضيحي:

صورة بصيغة PNG حجمها 500KB

➡ بعد ضغطها وتحويلها إلى WebP تصبح فقط 80KB

🔥 بنفس الجودة تقريبًا!

#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:100%!important;} .post { width:100%!important; }