Skip to content

Instantly share code, notes, and snippets.

@davidjenner

davidjenner/index.html

Created April 5, 2024 18:43
Show Gist options
  • Save davidjenner/3352b967598e58fc4655cca38f48c9d7 to your computer and use it in GitHub Desktop.
Save davidjenner/3352b967598e58fc4655cca38f48c9d7 to your computer and use it in GitHub Desktop.
Download ZIP
Logo Converter to 512 and 256 pixels png
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Converter</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
#drop-area {
border: 2px dashed #4F46E5;
padding: 40px;
transition: background-color 0.3s ease;
}
#drop-area.dragover {
background-color: rgba(79, 70, 229, 0.1);
animation: celebrate 2s infinite;
}
@keyframes celebrate {
0% { transform: scale(1); background-color: rgba(79, 70, 229, 0.1); }
25% { transform: scale(1.1); background-color: rgba(79, 70, 229, 0.2); }
50% { transform: scale(1.2); background-color: rgba(79, 70, 229, 0.3); }
75% { transform: scale(1.1); background-color: rgba(79, 70, 229, 0.2); }
100% { transform: scale(1); background-color: rgba(79, 70, 229, 0.1); }
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-8">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-4">Logo Converter</h1>
<p class="text-center text-gray-600 mb-4">Looking for logos? Check out <a href="https://seeklogo.com/" target="_blank" class="underline">SeekLogo</a>!</p>
<div id="drop-area" class="border border-gray-300 rounded-lg mb-4 p-8 text-center">
<p class="text-gray-500">Drag and drop images here, or click to select files</p>
</div>
<div id="results" class="mt-8"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', function(event) {
event.preventDefault();
dropArea.classList.add('dragover');
});
dropArea.addEventListener('dragleave', function(event) {
dropArea.classList.remove('dragover');
});
dropArea.addEventListener('drop', function(event) {
event.preventDefault(); // Prevent the default behavior of opening the dropped image in a new tab
dropArea.classList.remove('dragover');
const files = event.dataTransfer.files;
handleFiles(files);
});
dropArea.addEventListener('click', function() {
document.getElementById('logo-input').click();
});
document.getElementById('logo-input').addEventListener('change', function() {
const files = this.files;
handleFiles(files);
});
function handleFiles(files) {
const resultsContainer = document.getElementById('results');
resultsContainer.innerHTML = '';
Array.from(files).forEach((file, index) => {
const reader = new FileReader();
reader.onload = function() {
const image = new Image();
image.src = reader.result;
image.onload = function() {
const canvas512 = document.createElement('canvas');
canvas512.width = 512;
canvas512.height = 512;
const context512 = canvas512.getContext('2d');
context512.fillStyle = '#ffffff'; // Set background color to white
context512.fillRect(0, 0, canvas512.width, canvas512.height);
context512.drawImage(image, 0, 0, 512, 512);
const icon512 = canvas512.toDataURL('image/png');
const icon256 = resizeImage(canvas512, 256).toDataURL('image/png');
const resultElement = document.createElement('div');
resultElement.classList.add('flex', 'items-center', 'space-x-4', 'mb-4');
resultElement.innerHTML = `
<img src="${icon512}" alt="512x512 Logo" class="w-24 h-24 cursor-pointer" onclick="downloadImage('${icon512}', 'logo_${index + 1}_512x512.png')">
<img src="${icon256}" alt="256x256 Logo" class="w-16 h-16 cursor-pointer" onclick="downloadImage('${icon256}', 'logo_${index + 1}_256x256.png')">
`;
resultsContainer.appendChild(resultElement);
};
};
reader.readAsDataURL(file);
});
}
function resizeImage(image, size) {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const context = canvas.getContext('2d');
context.fillStyle = '#ffffff'; // Set background color to white
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, size, size);
return canvas;
}
function downloadImage(dataUrl, filename) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
link.click();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment