body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; } .container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { color: #007bff; text-align: center; } label { display: block; margin-bottom: 5px; color: #333; } input[type="file"] { margin-bottom: 15px; } input[type="number"] { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } select { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-size: 16px; margin-right: 10px; } button:hover { background-color: #0056b3; } #output { margin-top: 20px; text-align: center; } `

Image Resizer and Converter

Select an image: Output width (in inches): Output height (in inches): Output format: JPEG PNG GIF Resize and Convert Save Image

var resizedDataUrl = ""; function resizeAndConvert() { var input = document.getElementById("imageInput"); var file = input.files[0]; if (!file) { alert("Please select an image file."); return; } var reader = new FileReader(); reader.onload = function (e) { var img = new Image(); img.onload = function () { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var widthInches = parseFloat(document.getElementById("widthInput").value); var heightInches = parseFloat(document.getElementById("heightInput").value); var width = widthInches * 96; // Assuming 96 pixels per inch var height = heightInches * 96; canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); var format = document.getElementById("formatSelect").value; resizedDataUrl = canvas.toDataURL("image/" + format); // Change format here if needed document.getElementById("output").innerHTML = ''; document.getElementById("saveButton").style.display = "inline"; } img.src = e.target.result; } reader.readAsDataURL(file); } function saveImage() { var link = document.createElement('a'); link.href = resizedDataUrl; link.download = 'resized_image.' + document.getElementById("formatSelect").value; document.body.appendChild(link); link.click(); document.body.removeChild(link); }