Spaces:

oldfart
/

quack

Running

App Files Files Community

quack / index.html

oldfart

Update index.html

e5a9508 8 months ago

raw history blame contribute delete

No virus

6.95 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Format Converter</title>
	<style>
	body {
	font-family: 'Arial', sans-serif;
	max-width: 600px;
	margin: 20px auto;
	padding: 20px;
	background-color: #f4f4f4;
	border-radius: 10px;
	text-align: center;
	}

	h1 {
	color: #333;
	}

	form {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	label, select, button, input {
	display: block;
	margin: 10px auto;
	}

	select, input {
	width: 80%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}

	input[type="checkbox"] {
	margin-right: 5px;
	}

	button {
	background-color: #4caf50;
	color: #fff;
	padding: 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	}

	button:hover {
	background-color: #45a049;
	}

	a {
	color: #2196F3;
	text-decoration: none;
	display: block;
	margin-top: 10px;
	}

	a:hover {
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<h1>Image Format Converter</h1>

	<form id="imageForm">
	<label for="imageInput">Select an Image:</label>
	<input type="file" id="imageInput" accept="image/*" required onchange="detectImageProperties()">

	<p id="formatInfo">Detected Format: <span id="formatDisplay"></span></p>
	<p id="sizeInfo">Image Size: <span id="sizeDisplay"></span></p>

	<label for="targetFormat">Choose Target Format:</label>
	<select id="targetFormat" required>
	<option value="bmp">BMP</option>
	<option value="eps">EPS</option>
	<option value="gif">GIF</option>
	<option value="ico">ICO</option>
	<option value="jpeg">JPG</option>
	<option value="png">PNG</option>
	<option value="psd">PSD</option>
	<option value="svg+xml">SVG</option>
	<option value="tga">TGA</option>
	<option value="tiff">TIFF</option>
	<option value="webp">WebP</option>
	</select>

	<label for="customWidth">Custom Width (leave empty for original):</label>
	<input type="text" id="customWidth">

	<label for="customHeight">Custom Height (leave empty for original):</label>
	<input type="text" id="customHeight">

	<input type="checkbox" id="keepAspectRatio" checked>
	<label for="keepAspectRatio">Keep Aspect Ratio</label>

	<input type="checkbox" id="compressImage">
	<label for="compressImage">Compress Image</label>

	<button type="button" onclick="convertImage()">Convert</button>

	<a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
	</form>

	<script>
	function detectImageProperties() {
	const input = document.getElementById('imageInput');
	const formatDisplay = document.getElementById('formatDisplay');
	const sizeDisplay = document.getElementById('sizeDisplay');

	if (input.files.length > 0) {
	const file = input.files[0];
	const img = new Image();
	img.src = URL.createObjectURL(file);

	img.onload = function () {
	formatDisplay.textContent = file.type;
	sizeDisplay.textContent = `${img.width} x ${img.height} pixels`;
	};
	}
	}

	function convertImage() {
	const input = document.getElementById('imageInput');
	const targetFormat = document.getElementById('targetFormat').value;
	const customWidth = document.getElementById('customWidth').value;
	const customHeight = document.getElementById('customHeight').value;
	const keepAspectRatio = document.getElementById('keepAspectRatio').checked;
	const compressImage = document.getElementById('compressImage').checked;
	const formatDisplay = document.getElementById('formatDisplay');
	const downloadLink = document.getElementById('downloadLink');

	if (input.files.length > 0) {
	const file = input.files[0];

	// Display detected format
	formatDisplay.textContent = file.type;

	// Check if the target format is supported
	const supportedFormats = ['bmp', 'eps', 'gif', 'ico', 'jpeg', 'png', 'psd', 'svg+xml', 'tga', 'tiff', 'webp'];

	if (!supportedFormats.includes(targetFormat)) {
	alert('Unsupported target format. Please choose a supported format.');
	return;
	}

	// Convert and create a download link
	const img = new Image();
	img.src = URL.createObjectURL(file);

	img.onload = function () {
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');

	// Apply custom dimensions
	let newWidth, newHeight;

	if (customWidth && customHeight) {
	newWidth = parseInt(customWidth, 10);
	newHeight = parseInt(customHeight, 10);

	if (keepAspectRatio) {
	// Calculate new height to maintain aspect ratio
	newHeight = (img.height * newWidth) / img.width;
	}
	} else {
	// If custom dimensions are not provided, use original dimensions
	newWidth = img.width;
	newHeight = img.height;
	}

	canvas.width = newWidth;
	canvas.height = newHeight;

	// Draw the image on the canvas
	ctx.drawImage(img, 0, 0, newWidth, newHeight);

	// Convert and create a download link
	canvas.toBlob(function (blob) {
	const url = URL.createObjectURL(blob);
	downloadLink.href = url;
	downloadLink.style.display = 'block';
	}, `image/${targetFormat}`, compressImage ? 0.85 : 1.0); // Explicitly set the MIME type
	};
	}
	}
	</script>
	</body>
	</html>