https://menstherapyhub.co.uk/wp-content/plugins/jetform-image-crop-fixed-done-button/jetform-crop.js

1
2document.addEventListener('DOMContentLoaded', function () {
3  const fileInput = document.querySelector('.profile_picture');
4  if (!fileInput) return;
5
6  let cropper;
7  let previewContainer = document.getElementById('image-preview-container');
8
9  if (!previewContainer) {
10    previewContainer = document.createElement('div');
11    previewContainer.id = "image-preview-container";
12    previewContainer.style.cssText = "display:none; margin-top:10px; text-align:center;";
13    previewContainer.innerHTML = `
14      <img id="image-to-crop" style="width: 300px; height: 300px; object-fit: contain; border:1px solid #ddd; border-radius:8px;" />
15      <div style="margin-top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;">
16        <button type="button" id="rotate-btn" class="jfc-btn">Rotate</button>
17        <button type="button" id="reset-btn" class="jfc-btn jfc-secondary">Reset</button>
18        <button type="button" id="crop-btn" class="jfc-btn jfc-primary">Crop</button>
19        <button type="button" id="done-btn" class="jfc-btn jfc-primary" style="display:none;">Done</button>
20      </div>
21      <style>
22        .jfc-btn {
23          padding: 6px 16px;
24          font-weight: bold;
25          border: none;
26          border-radius: 6px;
27          cursor: pointer;
28          transition: all 0.3s ease;
29        }
30        .jfc-btn:hover {
31          opacity: 0.9;
32        }
33        .jfc-primary {
34          background-color: #0073aa;
35          color: #fff;
36        }
37        .jfc-secondary {
38          background-color: #eee;
39          color: #333;
40        }
41      </style>
42    `;
43    fileInput.parentNode.appendChild(previewContainer);
44  }
45
46  const image = document.getElementById('image-to-crop');
47  const cropBtn = document.getElementById('crop-btn');
48  const doneBtn = document.getElementById('done-btn');
49  const rotateBtn = document.getElementById('rotate-btn');
50  const resetBtn = document.getElementById('reset-btn');
51
52  fileInput.addEventListener('change', (e) => {
53    const file = e.target.files[0];
54    if (!file) return;
55
56    const reader = new FileReader();
57    reader.onload = () => {
58      image.src = reader.result;
59      previewContainer.style.display = 'block';
60      cropBtn.style.display = 'inline-block';
61      doneBtn.style.display = 'none';
62
63      if (cropper) cropper.destroy();
64
65      cropper = new Cropper(image, {
66        aspectRatio: 1,
67        viewMode: 1,
68        autoCropArea: 1,
69        responsive: true,
70      });
71    };
72    reader.readAsDataURL(file);
73  });
74
75  rotateBtn.addEventListener('click', () => {
76    if (cropper) cropper.rotate(90);
77  });
78
79  resetBtn.addEventListener('click', () => {
80    if (cropper) cropper.reset();
81  });
82
83  cropBtn.addEventListener('click', () => {
84    if (!cropper) return;
85
86    const canvas = cropper.getCroppedCanvas(); // preserve quality
87
88    canvas.toBlob((blob) => {
89      const newFile = new File([blob], 'cropped-image.png', { type: 'image/png' });
90      const dt = new DataTransfer();
91      dt.items.add(newFile);
92      fileInput.files = dt.files;
93      fileInput.dispatchEvent(new Event('change', { bubbles: true }));
94
95      setTimeout(() => {
96        cropBtn.style.display = 'none';
97        doneBtn.style.display = 'inline-block';
98      }, 100);
99    }, 'image/png');
100  });
101
102  doneBtn.addEventListener('click', () => {
103    previewContainer.style.display = 'none';
104    if (cropper) {
105      cropper.destroy();
106      cropper = null;
107    }
108  });
109});