VueCropper 初级采坑

发布网友发布时间：2024-10-04 06:19

共1个回答

热心网友时间：2024-11-10 04:10

公司后台项目需图片裁剪功能，搜索后选用了 VueCropper，因其广受好评。在使用过程中，发现配置选项已基本适配，无需额外设置，只需关注自身需求。演示中基于 view-design，以下概述 VueCropper 关键配置：

img: 图源地址，支持 url/base64/blob。初次接触时需注意，上传组件返回对象需转换为 base64 格式，以确保兼容。

autoCrop: 默认值为 false，因此需手动开启以生成截图框。开启后，截图功能即得以实现。

centerBox: 限制截图框仅在图片内部移动，确保可操作区域仅为图片本身，避免超出范围。

autoCropWidth/autoCropHeight: 默认值为容器大小的 80%，根据项目需求调整以优化截图效果。例如，设定为 600x600，满足特定宽度与高度需求。

基本截图功能至此实现，如需进一步定制截取图片效果，可深入 VueCropper 文档，探索更多高级配置选项。