gawells/Self-Service-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

resize image to fit bounds

Browse Source
This commit is contained in:
gawells
2026-06-30 12:46:11 -04:00
parent 0b47af3b4f
commit 8685cb4e6f
3 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile_page.html
+38 -14
View File
@@ -99,16 +99,31 @@
class="noselect"
draggable="false"
/>
<!--<div id="darken_part"></div>-->
</div>
<div id="grab-area">
<div id="grab-area" draggable="false">
<div id="box-scale-holder">
<div id="top_left_resize" class="resize_anchor"></div>
<div id="top_right_resize" class="resize_anchor"></div>
<div id="bottom_left_resize" class="resize_anchor"></div>
<div id="bottom_right_resize" class="resize_anchor"></div>
<div
draggable="false"
id="top_left_resize"
class="resize_anchor"
></div>
<div
draggable="false"
id="top_right_resize"
class="resize_anchor"
></div>
<div
draggable="false"
id="bottom_left_resize"
class="resize_anchor"
></div>
<div
draggable="false"
id="bottom_right_resize"
class="resize_anchor"
></div>
</div>
<div id="resize_photo_box"></div>
<div id="resize_photo_box" draggable="false"></div>
</div>
<button id="confirm_change">Confirm Change</button>
</div>
@@ -206,7 +221,8 @@
var x_start = 0,
y_start = 0;
var bitmap;
var image_width = 0,
image_height = 0;
fileInput.addEventListener("change", async () => {
document.getElementById("popup_background").classList.remove("hidden");
@@ -225,17 +241,25 @@
.classList.remove("hidden");
image = URL.createObjectURL(file);
bitmap = await createImageBitmap(file);
var bitmap = await createImageBitmap(file);
new_profile_image.src = image;
resize_photo_box.style.setProperty(
"--image-width",
bitmap.width + "px",
);
new_profile_image.style.setProperty("--x-offset", "0px");
new_profile_image.style.setProperty("--y-offset", "0px");
x_dimension = max(bitmap.width, 360);
y_dimension = max(bitmap.height, 360);
smaller_dimension = min(x_dimension, y_dimension);
diff_to_350 = 360 / smaller_dimension;
image_width = bitmap.width * diff_to_350;
image_height = bitmap.height * diff_to_350;
new_profile_image.style.setProperty("--x-size", image_width + "px");
new_profile_image.style.setProperty("--y-size", image_height + "px");
resize_photo_box.style.setProperty("--size", "350px");
});