Skip to content

Commit 46a0e50

Browse files
insistenceinsistence
committed
chore: 个人资料模块头像裁剪引入裁剪组件，替换原有引入js方式
1 parent ff39306 commit 46a0e50

File tree

4 files changed

+47
-115
lines changed

4 files changed

+47
-115
lines changed

‎dash-fastapi-frontend/assets/css/cropper.min.css‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎dash-fastapi-frontend/assets/js/cropper.min.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎dash-fastapi-frontend/callbacks/system_c/user_c/profile_c/avatar_c.py‎

Lines changed: 32 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
@app.callback(
1313
[Output('avatar-cropper-modal', 'visible', allow_duplicate=True),
14-
Output('avatar-src-data', 'data', allow_duplicate=True)],
14+
Output('avatar-cropper', 'src', allow_duplicate=True)],
1515
Input('avatar-edit-click', 'n_clicks'),
1616
State('user-avatar-image-info', 'src'),
1717
prevent_initial_call=True
@@ -27,7 +27,7 @@ def avatar_cropper_modal_visible(n_clicks, user_avatar_image_info):
2727

2828

2929
@app.callback(
30-
Output('avatar-src-data', 'data', allow_duplicate=True),
30+
Output('avatar-cropper', 'src', allow_duplicate=True),
3131
Input('avatar-upload-choose', 'listUploadTaskRecord'),
3232
prevent_initial_call=True
3333
)
@@ -42,88 +42,36 @@ def upload_user_avatar(list_upload_task_record):
4242
raise PreventUpdate
4343

4444

45-
@app.callback(
46-
Output('avatar-cropper', 'jsString'),
47-
Input('avatar-src-data', 'data'),
48-
prevent_initial_call=True
49-
)
50-
def edit_user_avatar(src_data):
45+
# 头像放大、缩小、逆时针旋转、顺时针旋转操作浏览器端回调
46+
app.clientside_callback(
5147
"""
52-
使用cropper.js编辑头像回调
53-
"""
54-
55-
return """
56-
// 创建新图像元素
57-
var newImage = document.createElement('img');
58-
newImage.id = 'user-avatar-image';
59-
newImage.src = '% s';
60-
newImage.onload = function() {
61-
// 删除旧图像元素
62-
var oldImage = document.getElementById('user-avatar-image');
63-
oldImage.parentNode.removeChild(oldImage);
64-
// 销毁旧的 Cropper.js 实例
65-
var oldCropper = oldImage.cropper;
66-
if (oldCropper) {
67-
oldCropper.destroy();
68-
}
69-
// 将新图像添加到页面中
70-
var container = document.getElementById('avatar-cropper-container');
71-
container.appendChild(newImage);
72-
// var image = document.getElementById('user-avatar-image');
73-
var previewImage = document.getElementById('user-avatar-image-preview');
74-
// 创建新的 Cropper 实例
75-
var cropper = new Cropper(newImage, {
76-
viewMode: 1,
77-
dragMode: 'none',
78-
initialAspectRatio: 1,
79-
aspectRatio: 1,
80-
preview: previewImage,
81-
background: true,
82-
autoCropArea: 0.6,
83-
zoomOnWheel: true,
84-
crop: function(event) {
85-
// 当裁剪框的位置或尺寸发生改变时触发的回调函数
86-
console.log(event.detail.x);
87-
console.log(event.detail.y);
88-
console.log(event.detail.width);
89-
console.log(event.detail.height);
90-
console.log(event.detail.rotate);
91-
console.log(event.detail.scaleX);
92-
console.log(event.detail.scaleY);
93-
// 当需要获取裁剪后的数据时
94-
var croppedDataUrl = cropper.getCroppedCanvas().toDataURL("image/jpeg", 1);
95-
sessionStorage.setItem('cropper-avatar-base64', JSON.stringify({avatarBase64: croppedDataUrl}))
96-
}
97-
});
98-
// 获取旋转按钮的引用
99-
var rotateLeftButton = document.getElementById('rotate-left');
100-
var rotateRightButton = document.getElementById('rotate-right');
101-
102-
// 添加点击事件监听器
103-
rotateLeftButton.addEventListener('click', function() {
104-
// 向左旋转图像90度
105-
cropper.rotate(-90);
106-
});
107-
rotateRightButton.addEventListener('click', function() {
108-
// 向右旋转图像90度
109-
cropper.rotate(90);
110-
});
111-
// 获取缩小按钮和放大按钮的引用
112-
var zoomOutButton = document.getElementById('zoom-out');
113-
var zoomInButton = document.getElementById('zoom-in');
114-
115-
// 添加点击事件监听器
116-
zoomOutButton.addEventListener('click', function() {
117-
// 放大图像
118-
cropper.zoom(0.1);
119-
});
120-
121-
zoomInButton.addEventListener('click', function() {
122-
// 缩小图像
123-
cropper.zoom(-0.1);
124-
});
48+
(zoomOut, zoomIn, rotateLeft, rotateRight) => {
49+
triggered_id = window.dash_clientside.callback_context.triggered[0].prop_id;
50+
if (triggered_id == 'zoom-out.nClicks') {
51+
return [{isZoom: true, ratio: 0.1}, window.dash_clientside.no_update];
52+
}
53+
else if (triggered_id == 'zoom-in.nClicks') {
54+
return [{isZoom: true, ratio: -0.1}, window.dash_clientside.no_update];
12555
}
126-
""" % src_data
56+
else if (triggered_id == 'rotate-left.nClicks') {
57+
return [window.dash_clientside.no_update, {isRotate: true, degree: -90}];
58+
}
59+
else if (triggered_id == 'rotate-right.nClicks') {
60+
return [window.dash_clientside.no_update, {isRotate: true, degree: 90}];
61+
}
62+
else {
63+
throw window.dash_clientside.PreventUpdate;
64+
}
65+
}
66+
""",
67+
[Output('avatar-cropper', 'zoom'),
68+
Output('avatar-cropper', 'rotate')],
69+
[Input('zoom-out', 'nClicks'),
70+
Input('zoom-in', 'nClicks'),
71+
Input('rotate-left', 'nClicks'),
72+
Input('rotate-right', 'nClicks')],
73+
prevent_initial_call=True
74+
)
12775

12876

12977
@app.callback(
@@ -133,7 +81,7 @@ def edit_user_avatar(src_data):
13381
Output('user-avatar-image-info', 'key'),
13482
Output('avatar-info', 'key')],
13583
Input('change-avatar-submit', 'nClicks'),
136-
State('cropper-avatar-base64', 'data'),
84+
State('avatar-cropper', 'croppedImageData'),
13785
prevent_initial_call=True
13886
)
13987
def change_user_avatar_callback(submit_click, avatar_data):
@@ -142,7 +90,7 @@ def change_user_avatar_callback(submit_click, avatar_data):
14290
"""
14391

14492
if submit_click:
145-
params = dict(type='avatar', avatar=avatar_data['avatarBase64'])
93+
params = dict(type='avatar', avatar=avatar_data)
14694
change_avatar_result = change_user_avatar_api(params)
14795
if change_avatar_result.get('code') == 200:
14896

‎dash-fastapi-frontend/views/system/user/profile/user_avatar.py‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@
99

1010
def render():
1111
return [
12-
dcc.Store(id='init-cropper'),
13-
dcc.Store(id='avatar-src-data'),
14-
# 监听裁剪的图片数据
15-
fuc.FefferySessionStorage(
16-
id='cropper-avatar-base64'
17-
),
1812
html.Div(
1913
[
2014
fac.AntdImage(
@@ -58,7 +52,6 @@ def render():
5852
}
5953
'''
6054
),
61-
fuc.FefferyExecuteJs(id='avatar-cropper'),
6255
fac.AntdModal(
6356
[
6457
fac.AntdRow(
@@ -67,11 +60,21 @@ def render():
6760
[
6861
html.Div(
6962
[
70-
html.Img(
71-
id='user-avatar-image',
72-
height='120px',
73-
width='120px'
74-
),
63+
64+
fuc.FefferyImageCropper(
65+
id='avatar-cropper',
66+
alt='avatar',
67+
aspectRatio=1,
68+
dragMode='move',
69+
cropBoxMovable=False,
70+
cropBoxResizable=False,
71+
wheelZoomRatio=0.01,
72+
preview='#user-avatar-image-preview',
73+
style={
74+
'width': '100%',
75+
'height': '100%'
76+
}
77+
)
7578
],
7679
id='avatar-cropper-container',
7780
style={

0 commit comments

Comments
 (0)