Crop and Rotate Images using this Flutter plugin

Overview

image_cropping

image_cropping version MIT License MIT License

This plugin supports cropping and rotating images for multiplatform. It Allow inclusion of background, Rotation of image, changing ratio of selection as per requirements.

Allow inclusion of background.

Image Plugin

Rotation of image.

Image Plugin

Change ratio of selection.

Image Plugin

Usage

Example

ImageCropper.cropImage(
  context,
  imageBytes!,
  () {
    showLoader();
  },
  () {
    hideLoader();
  },
  (data) {
    setState(() {
      imageBytes = data;
    });
  },
  selectedImageRatio: ImageRatio.RATIO_1_1,
  visibleOtherAspectRatios: true,
  squareBorderWidth: 2,
  squareCircleColor: Colors.black,
  defaultTextColor: Colors.orange,
  selectedTextColor: Colors.black,
  colorForWhiteSpace: Colors.grey,
);

Required parameters

BuildContext:

Context is use to push new screen for image cropping.

_imageBytes:

Image bytes is use to draw image in device and if image not fits in device screen then we manage background color(if you have passed colorForWhiteSpace or else White background) in image cropping screen.

_onImageStartLoading:

This is a callback. you have to override and show dialog or etc when image cropping is in loading state.

_onImageEndLoading:

This is a callback. you have to override and hide dialog or etc when image cropping is ready to show result in cropping screen.

_onImageDoneListener:

This is a callback. you have to override and you will get Uint8List as result.

Optional parameters

ImageRatio:

This property contains ImageRatio value. You can set the initialized a spect ratio when starting the cropper by passing a value of ImageRatio. default value is ImageRatio.FREE

visibleOtherAspectRatios:

This property contains boolean value. If this properties is true then it shows all other aspect ratios in cropping screen. default value is true.

squareBorderWidth:

This property contains double value. You can change square border width by passing this value.

squareCircleColor:

This property contains Color value. You can change square circle color by passing this value.

defaultTextColor:

This property contains Color value. By passing this property you can set aspect ratios color which are unselected.

selectedTextColor:

This property contains Color value. By passing this property you can set aspect ratios color which is selected.

colorForWhiteSpace:

This property contains Color value. By passing this property you can set background color, if screen contains blank space.

Note:

The result returns in Uint8List. so it can be lost later, you are responsible for storing it somewhere permanent (if needed).

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue

Library used

LICENSE!

Image Cropper is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.

Comments
  • Add minor function and Updated gradle, plugins

    Add minor function and Updated gradle, plugins

    Added dark effect of square outside. There are sometimes need to cropping only image except white outside. So I added constrained cropping. Fix bug 'can't move when circle position is side.'

    image

    enhancement 
    opened by n7484443 2
  • Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

    Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

    https://github.com/Mindinventory/image_cropping/blob/master/lib/image_cropping.dart

    remove old one : WidgetsBinding.instance?.addPostFrameCallback((timeStamp) async { topViewHeight = stackGlobalKey.globalPaintBounds?.top ?? 0; });

    replace with: WidgetsBinding.instance.addPostFrameCallback((timeStamp) async { topViewHeight = stackGlobalKey.globalPaintBounds?.top ?? 0; });

    Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

    image

    opened by EBBozkurt 1
  • Performance on WEB

    Performance on WEB

    Hi! I found a possibility of most performance on flutter web. Its possible to use the resources of the dart:ui package. In example bellow you can resize an image and possible pass the width and heigth properties for the image in result.

    Size _calculateSize({required Size imageSize, double? width, double? height}) {
        if (width != null && height != null) {
          return Size(width, height);
        } else if (width != null) {
          final scale = width / imageSize.width;
          final height = imageSize.height * scale;
          return Size(width, height);
        } else if (height != null) {
          final scale = height / imageSize.height;
          final width = imageSize.width * scale;
          return Size(width, height);
        }
        return imageSize;
      }
      
    Future<ui.Image> resize(Uint8List image, {double? width, double? height}) async {
        final codec = await ui.instantiateImageCodec(image);
        final frameInfo = await codec.getNextFrame();
        final pictureRecorder = ui.PictureRecorder();
        final size = _calculateSize(
          imageSize: Size(
            frameInfo.image.width.toDouble(),
            frameInfo.image.height.toDouble(),
          ),
          height: height,
          width: width,
        );
        Canvas(pictureRecorder).drawImageRect(
          frameInfo.image,
          Rect.fromLTWH(0, 0, frameInfo.image.width.toDouble(), frameInfo.image.height.toDouble()), //change here 
          Rect.fromLTWH(0, 0, size.width, size.height), //change here
          Paint(),
        );
        frameInfo.image.dispose();
        return await pictureRecorder.endRecording().toImage(size.width.toInt(), size.height.toInt());
      }
    

    For croping, you maybe change the parameters commenteds such necessary. I hope this helps.

    enhancement 
    opened by leonardojribeiro 1
  • image_cropping infos

    image_cropping infos

    From the README

    Library used ... flutter_image_compress

    This raises two questions for me:

    1. Is this still right, its not shown in the pub.dev dependencies nor in the pubspec.yaml
    2. Does this package also works on other platforms
    opened by M123-dev 1
  • Wrong are cropping issue

    Wrong are cropping issue

    Hi! I am so thankful. your package is looks very nice and useful. But when i try to crop image as 1/1 , the result shape should be square. Actually it never really crops right. the result stays to the left of which is clipped. Is this happening only to me? I am working on windows by the way.

    bug 
    opened by worldwidee 1
  • Landscape mode

    Landscape mode

    Hi! First of all, thanks for this package!

    I am experiencing an issue when using it in an application that must support also landscape mode, when the image_cropping screen pops up it will move to portrait mode and once it's done it will not go back to landscape.

    Would it be possible for you to also support landscape mode?

    enhancement 
    opened by savy-91 1
  • want to cropper set on whole image instead of center

    want to cropper set on whole image instead of center

    Hello Team,

    I need some help. I want cropper set on whole image base on image height and width how to achieve it using current code and which file /function need to changes also i need x & y starting position 0,0 .please team help me out.

    Thanks , Screenshot_1 Screenshot_2

    Yogita

    enhancement 
    opened by YogitaPat 0
Owner
MindInventory
MindInventory works with Enterprises, Startups, and Agencies since 2011 providing web, mobile app development, enterprise mobility solutions & DevOps services.
MindInventory
A plugin for panning and zooming images by touch.

zoomable_image A dart+flutter package for panning and zooming images by touch. Getting Started // You can use any ImageProvider, including NetworkImag

null 119 Dec 27, 2022
Caffodils - Download everything | Flutter app for Android and IOS. Download Video, Reels, Shorts, Music, Images, Files from Instagram, Facebook and Youtube

caffodils Caffodils - Download everything Flutter app for Android and IOS. Download Video, Reels, Shorts, Music, Images, Files from Instagram, Faceboo

Caffodils 11 Oct 24, 2022
A chatting app made with Flutter and FireBase. It supports GIPHY gifs, images, stcikers, dark mode, custom animations, google login, online storage, beautiful UI and more.

ChatMe A Flutter based chatting app which lets user chat from random peoples or strangers, has GIPHY gif support, sitckers, custom animations, dark mo

Hash Studios 20 Nov 7, 2022
A sample application that allows a user to upload and share images, made with Flutter and Firebase

FlutterFire Gallery A sample Flutter app to upload images and share them via lin

Mais Alheraki 9 Oct 29, 2022
A social media app where people can post images, follow users ,chat with other users and much more.

Nallagram A Social media app (Both frontend and backend) created with Flutter and Firebase.(inspired from instagram) Show some ❤️ and star ⭐ the repo

Pranav Ajay 34 Jan 6, 2023
Images gathered by NASA's Curiosity, Opportunity, and Spirit rovers on Mars.

Eye of rover This app includes image data gathered by NASA's Curiosity, Opportunity, and Spirit rovers on Mars with given filters (Sol and Camera). Lo

İbrahim Mert Gül 1 Jan 6, 2022
Mobile app to square images by adding padding around it.

Resizrr Mobile app to crop images. Screens ?? How to set-up this project on local machine? Fork this project Then clone the forked project by git clon

Aman Kumar 9 Oct 23, 2022
We are building an open database of COVID-19 cases with chest X-ray or CT images.

?? Note: please do not claim diagnostic performance of a model without a clinical study! This is not a kaggle competition dataset. Please read this pa

Joseph Paul Cohen 2.9k Jan 7, 2023
Dart library with stack blur algorithm for RGBA images

stack_blur The Dart library for blurring images with the Stack blur algorithm. T

Artёm IG 3 Nov 19, 2022
App to seamlessly share files/images from your phone to your pc

Self-Share App to seamlessly share files/images from your phone to your pc Image

Wahbi 1 May 28, 2022
Official plugin for using Thepeer SDK with flutter https://thepeer.co

Flutter Thepeer This package makes it easy to use the Thepeer in a flutter project. ?? Screen Shots ?? How to Use plugin ThePeer Send Launch ThepeerSe

The Peer 23 Dec 27, 2022
Official plugin for using Thepeer SDK with flutter https://thepeer.co

Flutter Thepeer This package makes it easy to use the Thepeer in a flutter project. ?? Screen Shots ?? How to Use plugin Adding MaterialSupport Add th

Thepeer 23 Dec 27, 2022
A Flutter plugin for handling Connectivity and REAL Connection state in the mobile, web and desktop platforms. Supports iOS, Android, Web, Windows, Linux and macOS.

cross_connectivity A Flutter plugin for handling Connectivity and REAL Connection state in the mobile, web and desktop platforms. Supports iOS, Androi

MarchDev Toolkit 29 Nov 15, 2022
A Flutter plugin to retrieve and manage contacts on Android and iOS devices. Maintainer: @lukasgit

contacts_service A Flutter plugin to access and manage the device's contacts. Usage To use this plugin, add contacts_service as a dependency in your p

Lukas Dickie 166 Dec 28, 2022
This plugin allows Flutter desktop apps to resizing and repositioning the window.

window_manager This plugin allows Flutter desktop apps to resizing and repositioning the window. window_manager Platform Support Quick Start Installat

LeanFlutter 346 Jan 3, 2023
A Flutter plugin that supports Pangle SDK on Android and iOS.

Thanks for non-commercial open source development authorization by JetBrains. 穿山甲 Flutter SDK `pangle_flutter`是一款集成了字节跳动穿山甲 Android 和 iOS SDK的 Flutter

null 121 Dec 2, 2022
Playify is a Flutter plugin for play/pause/seek songs, fetching music metadata, and browsing music library.

Playify Playify is a Flutter plugin for play/pause/seek songs, fetching music metadata, and browsing music library. Playify was built using iOS's Medi

Ibrahim Berat Kaya 32 Dec 14, 2022
A robust Flutter plugin for making payments via Paystack Payment Gateway. Completely supports Android and iOS

?? Paystack Plugin for Flutter A Flutter plugin for making payments via Paystack Payment Gateway. Fully supports Android and iOS. ?? Installation To u

Wilberforce Uwadiegwu 165 Jan 4, 2023
A Flutter plugin for playing music on iOS and Android.

Stereo plugin for Flutter A Flutter plugin for playing music on iOS and Android. Features Play/pause Stop Duration / seek to position Load track from

2find 67 Sep 24, 2022