spaces/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed cropping image

Browse Source
This commit is contained in:
jashton
2025-04-07 19:07:22 -06:00
parent 84d38dbeb3
commit e5b3e048b8
8 changed files with 44 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/profile_picture_cropper_modal.js
+9 -8
View File
@@ -1,7 +1,7 @@
document.addEventListener('DOMContentLoaded', function() {
var user_actions_modal = document.getElementById("user_actions_modal");
var modal_content = document.getElementById("modal_content");
var profile_picture_input = document.getElementById("profile_picture");
var user_actions_modal = document.getElementById("modal");
var modal_content = document.getElementById("display_modal");
var profile_picture_input = document.getElementById("profile_picture_input");
// Event listener on the file input
profile_picture_input.addEventListener('change', function() {
@@ -51,6 +51,9 @@ document.addEventListener('DOMContentLoaded', function() {
let crop_button = document.getElementById('crop_button');
let corners = document.querySelectorAll('.corner');
const img_bounds = img_to_crop.getBoundingClientRect();
console.log('img_bounds: ' + img_bounds.top + ', ' + img_bounds.left);
let selection = {
x: 0,
y: 0,
@@ -72,10 +75,8 @@ document.addEventListener('DOMContentLoaded', function() {
const { clientX, clientY } = e;
if (!selection_box.classList.contains('stop')) {
// const img_bounds = img_to_crop.getBoundingClientRect();
// const box_bounds = selection_box.getBoundingClientRect();
//
// console.log('img_bounds: ' + img_bounds.top);
// console.log('box_bounds: ' + box_bounds.top);
// if (box_bounds.left > img_bounds.left || box_bounds.right < img_bounds.right)
selection.x = clientX;
@@ -100,7 +101,6 @@ document.addEventListener('DOMContentLoaded', function() {
corners.forEach((corner) => {
corner.addEventListener('mousedown', (e) => {
console.log('resizing');
selection.resize_corner = corner.id;
selection.is_resizing = true;
e.stopPropagation(); // Prevent image click event
@@ -112,8 +112,9 @@ document.addEventListener('DOMContentLoaded', function() {
});
crop_button.addEventListener('click', () => {
document.getElementById('crop_x').value = selection.x + (selection.width / 1.5);
document.getElementById('crop_y').value = selection.y + (selection.width / 1.5);
var ratio = img_to_crop.naturalWidth / img_bounds.width;
document.getElementById('crop_x').value = (selection.x - img_bounds.left - (selection.width / 2)) * ratio;
document.getElementById('crop_y').value = (selection.y - img_bounds.top - (selection.width / 2)) * ratio;
document.getElementById('crop_width').value = selection.width;
closeModal();