介绍:
1、点击"上传图片"按钮选择一张图片,图片选择后会自动进入裁剪界面,显示全屏的裁剪组件裁剪框可以通过以下方式操作。
2、直接拖动裁剪框在屏幕上移动位置,通过四个角的拖动点调整裁剪框的大小。
3、底部有两个按钮:点击"取消"可以关闭裁剪界面并返回,点击"确定"会裁剪选中区域的图片,并自动上传到您的接口。

图片裁剪组件实现思路:
-
上传图片:使用uni.chooseImage选择图片,显示裁剪界面
-
裁剪界面:使用aspectFit模式居中显示图片,保持原始比例不变形
-
裁剪框:可拖动整个裁剪框,四角可调整大小
-
坐标映射:计算图片实际显示区域,将裁剪框坐标映射回原图坐标
-
裁剪处理:使用canvas绘制裁剪区域,导出为临时文件并上传
-
交互控制:提供确认和取消按钮,完成后显示裁剪结果
已上传uniapp插件市场,下载链接: https://ext.dcloud.net.cn/plugin?name=Liang-imageCrop