<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: ‘Arial’, sans-serif;
background-color: #f0f0f0;
}
#imageContainer {
position: relative;
width: 480px;
height: 480px;
border: 2px solid #ddd;
overflow: hidden;
margin-bottom: 20px;
}
/* Add a media query for smaller screens */
@media (max-width: 500px) {
#imageContainer {
width: 100%;
height: 350px;
/* Allow height to adjust based on the aspect ratio */
}
}
#selectedImage {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
cursor: grab;
}
#customFrame {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#uploadInput {
display: none;
}
#downloadButton {
display: none;
background-color: #4caf50;
color: white;
border: none;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
#zoomSlider {
display: none;
width: 50%;
margin-top: 10px;
}
#buttonsContainer {
display: flex;
justify-content: space-between;
}
#moveContainer{
display: flex;
justify-content: space-between;
padding-top: 15px;
}
#moveContainer button {
font-size: 10px; /* Set the desired font size */
}
#chooseButton,
#downloadButton {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
#chooseButton {
background-color: #3498db;
color: white;
border: none;
margin-right: 10px;
}
#downloadButton {
background-color: #4caf50;
color: white;
border: none;
}
#zoomContainer {
display: flex;
align-items: center;
margin-top: 10px;
}
#zoomLabel {
margin-right: 10px;
font-size: 16px;
}
#resetZoom {
padding: 8px;
font-size: 14px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #e74c3c;
color: white;
transition: background-color 0.3s;
}
#resetZoom:hover,
#chooseButton:hover,
#downloadButton:hover {
background-color: #555;
}
</style>
</head>
<body>
<div id=”imageContainer”>
<img id=”selectedImage” alt=”Selected Image”>
<img id=”customFrame” src=”https://defeatmsa.org/wp-content/uploads/2024/03/Defeat_MSA_Awareness-01.png”
alt=”Custom Frame”>
</div>
<div id=”buttonsContainer”>
<button id=”chooseButton” onclick=”chooseImage()”>Choose Image</button>
<button id=”downloadButton” onclick=”downloadImage()”>Download Image</button>
</div>
<div id=”moveContainer”>
<button onclick=”moveImage(‘left’)”>Move Left</button>
<button onclick=”moveImage(‘right’)”>Move Right</button>
<button onclick=”moveImage(‘up’)”>Move Up</button>
<button onclick=”moveImage(‘down’)”>Move Down</button>
</div>
<div id=”zoomContainerHide”>
<div id=”zoomContainer”>
<label id=”zoomLabel”>Zoom:</label>
<input type=”range” id=”zoomSlider” min=”50″ max=”200″ value=”100″ step=”1″ oninput=”adjustImageSize()”>
<button id=”resetZoom” onclick=”resetZoom()”>Reset Zoom</button>
</div>
</div>
<input type=”file” id=”uploadInput” accept=”image/*” onchange=”previewImage(event)”>
<script src=”https://html2canvas.hertzen.com/dist/html2canvas.min.js”></script>
<script>
let offsetX = 0;
let offsetY = 0;
let zoomValue = 100;
function chooseImage() {
document.getElementById(‘uploadInput’).click();
}
function previewImage(event) {
const selectedImage = document.getElementById(‘selectedImage’);
const downloadButton = document.getElementById(‘downloadButton’);
const zoomSlider = document.getElementById(‘zoomSlider’);
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
selectedImage.src = e.target.result;
downloadButton.style.display = ‘block’;
zoomSlider.style.display = ‘block’;
offsetX = 0;
offsetY = 0;
adjustImageSize();
};
if (file) {
reader.readAsDataURL(file);
}
}
function adjustImageSize() {
const zoomSlider = document.getElementById(‘zoomSlider’);
const selectedImage = document.getElementById(‘selectedImage’);
zoomValue = zoomSlider.value;
selectedImage.style.transform = `translate(-50%, -50%) scale(${zoomValue / 100}) translate(${offsetX}px, ${offsetY}px)`;
}
function resetZoom() {
const zoomSlider = document.getElementById(‘zoomSlider’);
zoomValue = 100;
zoomSlider.value = 100;
adjustImageSize();
}
function moveImage(direction) {
const step = 10; // Adjust the step size as needed
const selectedImage = document.getElementById(‘selectedImage’);
switch (direction) {
case ‘left’:
offsetX -= step / (zoomValue / 100); // Adjust the step considering zoom level
break;
case ‘right’:
offsetX += step / (zoomValue / 100); // Adjust the step considering zoom level
break;
case ‘up’:
offsetY -= step / (zoomValue / 100); // Adjust the step considering zoom level
break;
case ‘down’:
offsetY += step / (zoomValue / 100); // Adjust the step considering zoom level
break;
}
selectedImage.style.transform = `translate(-50%, -50%) scale(${zoomValue / 100}) translate(${offsetX}px, ${offsetY}px)`;
}
function downloadImage() {
const imageContainer = document.getElementById(‘imageContainer’);
html2canvas(imageContainer).then(function (canvas) {
const link = document.createElement(‘a’);
link.href = canvas.toDataURL(‘image/png’);
link.download = ‘framed_image.png’;
link.click();
});
}
</script>
</body>
</html>
