PNG to JPG Pro – Transparency Handler
/* — CSS SEPARATION START — */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap’);:root {
–primary: #0D9488; /* Teal-600 */
–bg-dark: #111827;
}body {
font-family: ‘Inter’, sans-serif;
transition: background-color 0.3s, color 0.3s;
}/* Checkerboard pattern for PNG preview */
.checkerboard-bg {
background-color: #ffffff;
background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.dark .checkerboard-bg {
background-color: #374151;
background-image: linear-gradient(45deg, #4b5563 25%, transparent 25%),
linear-gradient(-45deg, #4b5563 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #4b5563 75%),
linear-gradient(-45deg, transparent 75%, #4b5563 75%);
}/* Loading Spinner */
.loader {
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #0D9488;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* Dropzone Active */
.dropzone-active {
border-color: #0D9488 !important;
background-color: rgba(13, 148, 136, 0.1) !important;
}/* Dark Mode */
.dark body {
background-color: var(–bg-dark);
color: #F9FAFB;
}
.dark .card {
background-color: #1F2937;
border-color: #374151;
}
.dark input, .dark select {
background-color: #374151;
color: white;
border-color: #4B5563;
}
/* — CSS SEPARATION END — */
tailwind.config = {
darkMode: ‘class’,
theme: {
extend: {
colors: {
primary: ‘#0D9488’,
}
}
}
}
Convert transparent PNGs to JPG format without turning backgrounds black. We automatically apply a white background or your custom color.
Fill Transparent Areas With:
White (Recommended)
Black
Gray
Custom Color…
JPG Quality
90%
Why convert? JPGs are much smaller than PNGs for photographs. Perfect for reducing website load times when transparency isn’t needed.
Clear All Files
Drop PNG files here Batch processing enabled
Browse PNGs
// — JAVASCRIPT SEPARATION START —// Elements
const dropzone = document.getElementById(‘dropzone’);
const fileInput = document.getElementById(‘fileInput’);
const resultsArea = document.getElementById(‘results-area’);
const resultsList = document.getElementById(‘results-list’);
const countBadge = document.getElementById(‘count-badge’);
const canvas = document.getElementById(‘process-canvas’);
const ctx = canvas.getContext(‘2d’);
// Controls
const bgSelect = document.getElementById(‘bg-select’);
const bgColor = document.getElementById(‘bg-color’);
const qualitySlider = document.getElementById(‘quality-slider’);
const qualityVal = document.getElementById(‘quality-val’);let processedCount = 0;
let isDarkMode = false;// — Event Listeners —
dropzone.addEventListener(‘click’, () => fileInput.click());
dropzone.addEventListener(‘dragover’, (e) => {
e.preventDefault();
dropzone.classList.add(‘dropzone-active’);
});
dropzone.addEventListener(‘dragleave’, () => dropzone.classList.remove(‘dropzone-active’));
dropzone.addEventListener(‘drop’, (e) => {
e.preventDefault();
dropzone.classList.remove(‘dropzone-active’);
if(e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener(‘change’, (e) => {
if(e.target.files.length) handleFiles(e.target.files);
});// Color Sync
bgSelect.addEventListener(‘change’, () => {
if(bgSelect.value !== ‘custom’) bgColor.value = bgSelect.value;
});
bgColor.addEventListener(‘input’, () => {
bgSelect.value = ‘custom’;
});
// Quality Sync
qualitySlider.addEventListener(‘input’, (e) => {
qualityVal.innerText = `${e.target.value}%`;
});// — Processing —function handleFiles(files) {
resultsArea.classList.remove(‘hidden’);
Array.from(files).forEach(file => {
if(file.type === ‘image/png’) {
processPNG(file);
} else {
alert(‘Skipped non-PNG file: ‘ + file.name);
}
});
}function processPNG(file) {
const uiId = ‘item-‘ + Math.random().toString(36).substr(2, 9);
createItemUI(uiId, file);const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
convertToJPG(img, uiId, file.name);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}function createItemUI(id, file) {
const div = document.createElement(‘div’);
div.id = id;
div.className = ‘card bg-white dark:bg-gray-800 p-3 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 flex items-center gap-4’;
div.innerHTML = `
${file.name}
${formatBytes(file.size)}
Converting…
`;
resultsList.prepend(div);
}function convertToJPG(img, id, originalName) {
// Canvas Setup
canvas.width = img.width;
canvas.height = img.height;
// 1. Fill Background (Handles Transparency)
ctx.fillStyle = bgColor.value;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. Draw PNG on top
ctx.drawImage(img, 0, 0);// 3. Export as JPG
const quality = parseInt(qualitySlider.value) / 100;
canvas.toBlob((blob) => {
updateItemUI(id, blob, originalName, img.src);
}, ‘image/jpeg’, quality);
}function updateItemUI(id, blob, originalName, originalSrc) {
const div = document.getElementById(id);
if(!div) return;const url = URL.createObjectURL(blob);
const newName = originalName.replace(/\.png$/i, ‘.jpg’);
div.innerHTML = `
${newName}
PNG
JPG
${formatBytes(blob.size)}
`;
processedCount++;
countBadge.innerText = processedCount;
}function formatBytes(bytes) {
if(bytes === 0) return ‘0 Bytes’;
const k = 1024;
const sizes = [‘Bytes’, ‘KB’, ‘MB’];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ‘ ‘ + sizes[i];
}function clearAll() {
resultsList.innerHTML = ”;
resultsArea.classList.add(‘hidden’);
processedCount = 0;
countBadge.innerText = ‘0’;
fileInput.value = ”;
}function toggleDarkMode() {
isDarkMode = !isDarkMode;
document.documentElement.classList.toggle(‘dark’);
const icon = document.getElementById(‘theme-icon’);
icon.classList.toggle(‘fa-moon’, !isDarkMode);
icon.classList.toggle(‘fa-sun’, isDarkMode);
}// — JAVASCRIPT SEPARATION END —
PNG to JPG: Overview and Usage Tips Use the PNG to JPG utility for tasks involving digital images. Review the tool interface for supported inputs and settings. For file-based tasks, keep a copy of your original file and check the output before using it.
Steps to get started Read the supported formats or input requirements shown in the tool. Choose the available options appropriate to your task. Run the tool and review its result for accuracy and quality. Related resources Try Image Compressor or Image Resizer for another document or digital task.