最后更新于5 天前。
本次更新为左侧边栏头像更换增加裁剪预览流程。
点击侧边栏头像选择图片后,会先打开裁剪窗口,可拖动图片调整位置、使用滑块缩放,并在确认后上传裁剪后的头像。
修改源码
// 选择头像后先打开裁剪弹窗,用户确认后才上传裁剪结果。
openCropModal(file);
fileInput.value = '';
return;
// Pointer dragging adjusts the crop source before the cropped blob is uploaded.
crop.stage.addEventListener('pointerdown', function(event) {
if (!cropState || pending) return;
event.preventDefault();
cropState.dragging = true;
cropState.startX = event.clientX;
cropState.startY = event.clientY;
cropState.startOffsetX = cropState.offsetX;
cropState.startOffsetY = cropState.offsetY;
crop.stage.setPointerCapture(event.pointerId);
});
function confirmCropUpload() {
if (!cropState || pending) return;
var canvas = drawCropCanvas(512);
canvas.toBlob(function(blob) {
uploadAvatarBlob(blob);
}, 'image/jpeg', 0.9);
}