flutter图片裁剪后上传

裁剪图片

这里推荐flutter 插件：simple_image_crop。用法非常简单，支持圆形和方形选区，支持放大缩小，完美兼容iOS 和安卓： packages地址

创建一个编辑图片的组件:

final imgCropKey = GlobalKey<CropState>();

Widget _buildCropImage() {
  return Container(
      color: Colors.black,
      child: ImgCrop(
        key: cropKey,
        chipRadius: 150,  // 裁剪区域半径
        chipShape: 'circle', // 裁剪区域类型 支持圆形"circle" 和 方形"rect"
        image: Image.file(imageFile), // 传入图片资源
      ),
  );
}

生成裁剪后的图片:

• 选择图片推荐使用 image-picker插件, 图片也许是上个页面传过来的(当然也可以是其他任意图片资源):
  final Map args = ModalRoute.of(context).settings.arguments
• 一个简单的异步函数获取裁剪后的图片:
  crop.cropCompleted('传入的图片资源', {pictureQuality: '图片质量 int '})

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    final crop = cropKey.currentState;
    final croppedFile =
        await crop.cropCompleted(args['image'], pictureQuality: 900);

    // show you croppedFile ……
    showImage(context, croppedFile);
  },

上传裁剪后的图片

上传图片同样非常简单，使用dio 库直接建立 formData 数据上传至服务器：

Future uploadImage(BuildContext context, File file) async {
    final path = file.path;
    final name = path.substring(path.lastIndexOf("/") + 1, path.length);
    var args = FormData.fromMap(
        {'file': await MultipartFile.fromFile(path, filename: name)});
    await net.request(requestUrl, args: args);
  }

非常简单 ! 对你有帮助的话记得点亮小星星 github地址