Fixed #31990

Author: kerwin612

package-lock.json

@@ -21,6 +21,7 @@
     "chartjs-adapter-dayjs-4": "1.0.4",
     "chartjs-plugin-zoom": "2.0.1",
     "clippie": "4.1.3",
+    "cropperjs": "1.6.2",
     "css-loader": "7.1.2",
     "dayjs": "1.11.13",
     "dropzone": "6.0.0-beta.2",

package.json

@@ -127,6 +127,21 @@
 					<input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
 				</div>
 
+				<div class="inline field cropper hidden" id="cropper">
+					<div class="preview">
+						<h3>预览</h3>
+						<div>
+							<img id="result">
+						</div>
+					</div>
+					<div class="editor">
+						<h3>编辑</h3>
+						<div>
+							<img id="image">
+						</div>
+					</div>
+				</div>
+
 				<div class="field">
 					<button class="ui primary button">{{ctx.Locale.Tr "settings.update_avatar"}}</button>
 					<button class="ui red button link-action" data-url="{{.Link}}/avatar/delete">{{ctx.Locale.Tr "settings.delete_current_avatar"}}</button>

templates/user/settings/profile.tmpl

@@ -0,0 +1,22 @@
+@import "cropperjs/dist/cropper.css";
+
+.cropper {
+  display: flex;
+  column-gap: 10px;
+}
+
+.hidden {
+  display: none;
+}
+
+.editor {
+  flex: 1;
+}
+
+#result {
+  overflow: hidden;
+  width: 256px;
+  height: 256px;
+  max-width: 256px;
+  max-height: 256px;
+}

web_src/css/features/cropper.css

@@ -40,6 +40,7 @@
 @import "./features/codeeditor.css";
 @import "./features/projects.css";
 @import "./features/tribute.css";
+@import "./features/cropper.css";
 @import "./features/console.css";
 
 @import "./markup/content.css";

web_src/css/index.css

@@ -0,0 +1,52 @@
+import Cropper from 'cropperjs';
+
+export function initCompCropper() {
+  if (!document.querySelector('#cropper')) {
+    return;
+  }
+
+  let filename;
+  const image = document.querySelector('#image');
+  const result = document.querySelector('#result');
+  const input = document.querySelector('#new-avatar');
+
+  const done = function (url) {
+    image.src = url;
+
+    const cropper = new Cropper(image, {
+      aspectRatio: 1,
+      viewMode: 1,
+      crop() {
+        const canvas = cropper.getCroppedCanvas();
+        result.src = canvas.toDataURL();
+        canvas.toBlob((blob) => {
+          const file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
+          const container = new DataTransfer();
+          container.items.add(file);
+          input.files = container.files;
+        });
+      },
+    });
+    document.querySelector('#cropper').classList.remove('hidden');
+  };
+
+  input.addEventListener('change', (e) => {
+    const files = e.target.files;
+
+    let reader;
+    let file;
+    if (files && files.length > 0) {
+      file = files[0];
+      filename = file.name;
+      if (URL) {
+        done(URL.createObjectURL(file));
+      } else if (FileReader) {
+        reader = new FileReader();
+        reader.addEventListener('load', () => {
+          done(reader.result);
+        });
+        reader.readAsDataURL(file);
+      }
+    }
+  });
+}

web_src/js/features/comp/Cropper.ts

@@ -49,6 +49,7 @@ import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts';
 import {initRepoEditor} from './features/repo-editor.ts';
 import {initCompSearchUserBox} from './features/comp/SearchUserBox.ts';
 import {initInstall} from './features/install.ts';
+import {initCompCropper} from './features/comp/Cropper.ts';
 import {initCompWebHookEditor} from './features/comp/WebHookEditor.ts';
 import {initRepoBranchButton} from './features/repo-branch.ts';
 import {initCommonOrganization} from './features/common-organization.ts';
@@ -137,6 +138,7 @@ onDomReady(() => {
 
     initCompSearchUserBox,
     initCompWebHookEditor,
+    initCompCropper,
 
     initInstall,