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

💡 مميزات إضافة صفحة ضغط الصور إلى موقعك:

✅ 1. تحسين تجربة المستخدم:

توفر أداة ضغط الصور وسيلة سهلة وسريعة للزوار لضغط صورهم دون الحاجة لمغادرة الموقع أو استخدام أدوات خارجية.

⚡ 2. أداء فائق وسرعة ضغط عالية:

تستخدم تقنيات حديثة لضغط الصور بجودة عالية وبأقل وقت ممكن، مما يوفر للمستخدمين تجربة سلسة وسريعة.

📁 3. دعم تنسيقات متعددة:

تدعم الأداة ضغط صور بصيغ مختلفة مثل JPG، PNG، WEBP، وغيرها، مما يزيد من شمولية الاستخدام.

🖼️ 4. تعديل ذكي على الصور (اختياري):

تشمل خيارات إضافية مثل:

تغيير الجودة والمقاسات.

تحويل صيغة الصورة.

تدوير الصور.

إضافة علامة مائية (نص أو شعار).

🔄 5. دعم رفع عدة صور دفعة واحدة:

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

🌙 6. تصميم متجاوب مع دعم الوضع الليلي:

واجهة أنيقة تدعم الوضع الداكن/الفاتح وتعمل بسلاسة على الجوال والأجهزة اللوحية.

📦 7. تحميل الصور المضغوطة كملف ZIP:

لتوفير الوقت والراحة، يمكن تحميل جميع الصور المضغوطة دفعة واحدة بملف مضغوط.

💼 8. تعزيز قيمة موقعك:

يُظهر احترافية موقعك ويعزز من ثقة الزوار، خاصة عند تقديم أدوات مفيدة بدون إعلانات مزعجة.

💰 9. إمكانية دمج إعلانات (اختياري):

يمكنك الاستفادة من الأداة كمصدر دخل من خلال عرض إعلانات بطريقة غير مزعجة أثناء الاستخدام.

ضغط الصور.txt – 8 KB

واليك المعاينة والتحميل او النسخ ووضع الاسكريبت فى صفحة مخصصة

function previewTemplate() {
window.open(“https://shms4m.blogspot.com/2025/04/compress-images.html”, “PreviewWindow”, “width=1000,height=700,resizable=yes”);
}

.modal-bg {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999;
}
.modal-box {
background: #fff; padding: 0; border-radius: 10px; width: 90%; height: 90%;
box-shadow: 0 0 20px rgba(0,0,0,0.3); position: relative;
}
.modal-box iframe {
width: 100%; height: 100%; border: none;
border-radius: 10px;
}
.modal-close {
position: absolute; top: 10px; right: 10px;
background: #f44336; color: #fff; border: none; border-radius: 50%;
width: 30px; height: 30px; font-size: 20px; cursor: pointer;
}

function openModal() {
document.getElementById(“previewModal”).style.display = “flex”;
}
function closeModal() {
document.getElementById(“previewModal”).style.display = “none”;
}

تحميل ميديا فاير

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

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

:root {
–bg: #f9f9f9;
–text: #222;
–card: #fff;
–accent: #4CAF50;
}

@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 {
border: 2px dashed var(–accent);
padding: 40px;
margin: auto;
width: 90%;
max-width: 600px;
background: var(–card);
border-radius: 10px;
cursor: pointer;
}

.uploader input {
display: none;
}

.options {
margin: 20px auto;
max-width: 600px;
background: var(–card);
padding: 20px;
border-radius: 10px;
}

.options label, .options input, .options select {
display: block;
margin: 10px auto;
font-size: 14px;
}

.preview-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}

.preview-container img {
max-width: 200px;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

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;
}

input[type=”number”] {
width: 100px;
padding: 6px;
}

input[type=”file”] {
margin-top: 10px;
}

a.download-link {
display: inline-block;
margin-top: 10px;
text-decoration: none;
color: var(–accent);
}

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

const imageInput = document.getElementById(“imageInput”);
const watermarkInput = document.getElementById(“watermarkInput”);
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 optionsBox = document.getElementById(“options”);
const previewContainer = document.getElementById(“previewContainer”);

let selectedFiles = [];

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) {
const wmWidth = watermark.width / 4;
const wmHeight = watermark.height / 4;
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 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 watermarkFile = watermarkInput.files[0];

previewContainer.innerHTML = “”;

const loadWatermark = new Promise((resolve) => {
if (watermarkFile) {
const reader = new FileReader();
reader.onload = e => {
const wm = new Image();
wm.onload = () => resolve(wm);
wm.src = e.target.result;
};
reader.readAsDataURL(watermarkFile);
} else {
resolve(null);
}
});

loadWatermark.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 finalWidth = width || img.width;
let finalHeight = height || img.height;

canvas.width = finalWidth;
canvas.height = finalHeight;

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

if (watermark) {
drawWatermark(ctx, watermark, canvas.width, canvas.height, position);
}

const dataURL = canvas.toDataURL(format, quality);
const preview = document.createElement(“div”);
preview.innerHTML = `


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

نتشرف بعرض كل ماهو جديد فى عالم التقنيات ونتمنى ان ننال رضاكم الكريم وكما نتمنى ان تكون عضو دائم بالاشتراك بالموقع