diff --git a/README.md b/README.md index 0ac326d..0d34df2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # panosplitter -Split your horizontal images into 4x5 images for Instagram carousel posts. +Split your horizontal images into 4images of variable aspect ratio (4x5, 1x1, 9x16) for Instagram carousel posts. # License The code in this project is licensed under GPLv3. Except for all images which are not free to use. diff --git a/index.html b/index.html index e0f543c..86c079f 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,17 @@

FUTC's Instagram Panorama Slicer

-

Split your panorama images into Instagram-friendly carousel posts (4:5 aspect ratio)

+

Split your panorama images into Instagram-friendly carousel posts (standard is 4:5 aspect ratio, choose yours below)

Your photos never leave your computer, all processing is done locally

+ +
+ + +
diff --git a/script.js b/script.js index 7fe3c8c..85c4848 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,9 @@ +function getAspectRatio(aspectRatioSelect) { + const value = aspectRatioSelect.value; + const [w, h] = value.split(":").map(Number); + return w / h; // returns numerical ratio + } + document.addEventListener('DOMContentLoaded', () => { // DOM Elements const uploadArea = document.getElementById('upload-area'); @@ -21,18 +27,18 @@ document.addEventListener('DOMContentLoaded', () => { const loadingText = document.getElementById('loading-text'); const downloadBtnText = document.querySelector('.btn-text'); const downloadBtnLoader = document.querySelector('.btn-loader'); + + // variable aspectRatio + let aspectRatio = getAspectRatio(document.getElementById("aspect-ratio")); // Variables to store image data let originalImage = null; let slicedImages = []; let fullViewImage = null; - // Standard Instagram 4:5 aspect ratio - const aspectRatio = 4/5; // width:height ratio - // Standard resolution (for standard mode) const standardWidth = 1080; - const standardHeight = Math.round(standardWidth / aspectRatio); // Should be 1350 + let standardHeight = Math.round(standardWidth / aspectRatio); // Should be 1350 const minSlices = 2; const halfSliceWidth = standardWidth / 2; @@ -137,6 +143,16 @@ document.addEventListener('DOMContentLoaded', () => { updateImageDetails(); } }); + + // Aspect ratio change + aspectRatioSelect = document.getElementById("aspect-ratio"); + aspectRatioSelect.addEventListener('change', () => { + if (originalImage) { + aspectRatio = getAspectRatio(aspectRatioSelect); + standardHeight = Math.round(standardWidth / aspectRatio); + updateImageDetails(); + } + }); // Handle file upload function handleFile(file) { @@ -405,6 +421,7 @@ document.addEventListener('DOMContentLoaded', () => { if (fullViewImage) { const fullViewItem = document.createElement('div'); fullViewItem.className = 'slice-item full-view-item'; + fullViewItem.style.aspectRatio = `${fullViewImage.width}/${fullViewImage.height}`; const img = document.createElement('img'); img.src = fullViewImage.dataURL; @@ -428,11 +445,12 @@ document.addEventListener('DOMContentLoaded', () => { slicedImages.forEach(slice => { const sliceItem = document.createElement('div'); sliceItem.className = 'slice-item'; + sliceItem.style.aspectRatio = `${slice.width} / ${slice.height}`; const img = document.createElement('img'); img.src = slice.dataURL; img.alt = `Slice ${slice.number}`; - + const number = document.createElement('div'); number.className = 'slice-number'; number.textContent = slice.number; diff --git a/styles.css b/styles.css index a54dfb2..acc3af4 100644 --- a/styles.css +++ b/styles.css @@ -676,4 +676,37 @@ footer { flex-direction: row; justify-content: space-between; } +} + +/* Style for aspect ratio selector */ +.aspect-ratio-selector { + margin-top: 1.5rem; +} + +.aspect-ratio-selector label { + font-weight: 600; + margin-right: 0.5rem; + color: #333; +} + +.aspect-ratio-selector select { + padding: 0.5rem 1rem; + font-size: 1rem; + border: 2px solid #ccc; + border-radius: 8px; + background: white; + color: #333; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +.aspect-ratio-selector select:hover { + border-color: #007bff; + box-shadow: 0 0 6px rgba(0, 123, 255, 0.3); +} + +.aspect-ratio-selector select:focus { + outline: none; + border-color: #0056b3; + box-shadow: 0 0 6px rgba(0, 86, 179, 0.3); } \ No newline at end of file