【源码】基于uniapp的图片裁剪插件

项目简介

这是一个基于uni-app的图片裁剪插件项目。通过集成Cropper.js库，实现了在uni-app里进行图片裁剪的功能。该插件支持多种裁剪模式，能以base64以及blob格式导出图片，可应用于uni-app的应用、小程序及h5页面。

项目的主要特性和功能

1. 多种裁剪模式：支持裁剪预览、设置长宽比、设置裁剪大小、放大缩小以及圆形裁剪。
2. 数据交互：采用webview方式集成cropper.js，便于在uni-app中进行数据交互。
3. 预览功能：支持图片预览，裁剪过程中可实时查看效果。
4. 自定义配置：提供丰富配置选项，可自定义裁剪区域的大小和形状等。
5. 导出格式：支持base64和blob等多种导出格式。

安装使用步骤

假设用户已下载本项目的源码文件： 1. 安装插件：在uni-app项目中安装插件，推荐从dcloud插件市场安装。 2. 配置页面：在项目的pages.json中配置新页面，引入插件的页面。 3. 绑定事件：在模板中绑定事件，如点击按钮选择上传并裁剪图片。 4. 处理事件：在js中处理裁剪完成事件，获取裁剪后的图片数据。 5. 调整配置：根据项目需求，调整插件的配置选项，如裁剪区域的大小、形状等。

注意事项

1. 微信小程序：在微信小程序中使用时，需要将webview中加载的html设置为从网络加载，并加入微信白名单。
2. 部署地址：部署后，需要修改uni_modules/buuug7-img-cropper/pages/cropper.vue中<web-view>组件的src属性为你部署后访问的地址。

后续计划

未来计划通过给webview传参来控制cropper.js更多行为，以及优化插件的性能和用户体验。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】