File size: 5,554 Bytes
bb7f1f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Viewer</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden; /* Remove any default margin and scrolling */
background-color: black; /* Set background color to black */
}
#imageContainer {
position: relative;
text-align: center; /* Center the image horizontally */
width: 100%;
height: 100%;
overflow: hidden; /* Hide any content that overflows the container */
cursor: grab; /* Change cursor to grab */
}
#imageContainer:active {
cursor: grabbing; /* Change cursor to grabbing while dragging */
}
img {
width: 100%;
height: 100%;
display: inline-block; /* Display as inline-block for center alignment */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */
/*transition: transform 0.3s ease;*/
object-fit: contain; /* Maintain aspect ratio */
border: none; /* Remove border */
user-select: none; /* Prevent text selection */
pointer-events: none; /* Prevent default drag behavior */
}
</style>
</head>
<body>
<div id="imageContainer">
<img id="currentImage" src="file:///your/path/stable-diffusion-webui/outputs/saved.png" alt="Current Image">// Set your path.
</div>
<script>
var imgElement = document.getElementById('currentImage');
var zoomLevel = 1.0;
var zoomIncrement = 0.1;
// Variables to track mouse movement
var isDragging = false;
var startX, startY;
var startTranslateX = 0, startTranslateY = 0;
// Center the image initially
centerImage();
// Listen for the mouse wheel event
document.getElementById('imageContainer').addEventListener('wheel', function(event) {
if (event.deltaY < 0) {
// Zoom in when scrolling up
zoomIn();
} else {
// Zoom out when scrolling down
zoomOut();
}
event.preventDefault(); // Prevent default scrolling behavior
});
// Listen for the mouse move event
document.getElementById('imageContainer').addEventListener('mousedown', function(event) {
// Check if the left mouse button is pressed
if (event.button === 0) {
isDragging = true;
startX = event.clientX;
startY = event.clientY;
var transform = imgElement.style.transform.match(/translate\((.*)px, (.*)px\)/);
startTranslateX = transform ? parseFloat(transform[1]) : 0;
startTranslateY = transform ? parseFloat(transform[2]) : 0;
event.preventDefault(); // Prevent default browser behavior
}
});
document.addEventListener('mousemove', function(event) {
if (isDragging) {
var deltaX = event.clientX - startX;
var deltaY = event.clientY - startY;
var newTranslateX = startTranslateX + deltaX;
var newTranslateY = startTranslateY + deltaY;
imgElement.style.transform = 'scale(' + zoomLevel + ') translate(' + newTranslateX + 'px, ' + newTranslateY + 'px)';
event.preventDefault(); // Prevent default browser behavior
}
});
document.addEventListener('mouseup', function(event) {
isDragging = false;
});
function zoomIn() {
zoomLevel += zoomIncrement;
updateZoom();
}
function zoomOut() {
if (zoomLevel > 1.0) {
zoomLevel -= zoomIncrement;
updateZoom();
}
}
function updateZoom() {
var containerWidth = document.getElementById('imageContainer').offsetWidth;
var containerHeight = document.getElementById('imageContainer').offsetHeight;
var imageWidth = imgElement.offsetWidth * zoomLevel;
var imageHeight = imgElement.offsetHeight * zoomLevel;
var currentTransform = imgElement.style.transform.match(/translate\((.*)px, (.*)px\)/);
var currentTranslateX = currentTransform ? parseFloat(currentTransform[1]) : 0;
var currentTranslateY = currentTransform ? parseFloat(currentTransform[2]) : 0;
var newTranslateX = currentTranslateX;
var newTranslateY = currentTranslateY;
imgElement.style.transform = 'scale(' + zoomLevel + ') translate(' + newTranslateX + 'px, ' + newTranslateY + 'px)';
//If zoomLevel is greater than 1 and the image size is smaller than the container size, center the image
if (zoomLevel > 1.0 && imageWidth < containerWidth && imageHeight < containerHeight) {
centerImage();
} else if (zoomLevel === 1.0) {
centerImage(); // Center image only when zoom level is 1
}
}
function centerImage() {
imgElement.style.transform = 'scale(' + zoomLevel + ') translate(0px, 0px)';
}
// Refresh the image every 1 second (adjust as needed)
setInterval(refreshImage, 50);
function refreshImage() {
var imgElement = document.getElementById('currentImage');
var previousSrc = imgElement.src;
imgElement.src = "file:///your/path/stable-diffusion-webui/outputs/saved.png" + "?" + new Date().getTime(); // Set your path
// Check if the new src is equal to the previous one (which means the image wasn't found)
imgElement.onload = function() {
// Image loaded successfully
}
imgElement.onerror = function() {
// Image not found, revert to the previous src
imgElement.src = previousSrc;
}
}
</script>
</body>
</html>
|