Flutter裁剪图片

最近在学习中需要用到裁剪图片，记录一下解决方法

思路：

使用canvas的drawImageRect()方法，对Image进行裁剪，这里的Image需要 'dart:ui' 库中的Image。

1. canvas的drawImageRect()方法

drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void

　　

①第一个参数是'dart:ui' 库中的Image。

②第二个参数为你需要截取的矩形Rect，举个栗子：截取一张图片，原图的宽高分别为w和h，

将第二个参数设置为：

Rect.fromLTRB(0, 0, w/2, h/2)

　　

意思就是从原图片中截取一个矩形，矩形的坐标从(0.0)到（w/2, h/2)。

这里的是fromLTWH意思是指定left，top，right，bottom坐标，通过指定四个点来获取矩形

③第三个为目标矩形Rect，即你想要在canvas上绘制的区域，

举个栗子：接着上面所讲的，将第三个参数设置为

Rect.fromLTWH(0, 0, 100, 100), paint);

　　

意思就是将上面截取的矩形，在canvas的（0，0）坐标开始绘制，绘制的宽和高为100，

这里的是fromLTWH意思是指定left和top坐标，并设置宽高来获取矩形

④第四个参数为画笔。

2.'dart:ui' 库中的Image

这里我们要引入'dart:ui' 取别名为ui，避免库里的方法与'package:flutter/material.dart'中的方法重名冲突

import 'dart:ui' as ui;

　　

从我们平常用的图片去获取ui库下的Image的方法如下：

将图片转化为流，并添加监听，在图片流加载完成之后获取到ui.Image

Future<ui.Image> imageLoader() {
 
    ImageStream imageStream = NetworkImage(
 
            'https://avatars0.githubusercontent.com/u/45789654?s=460&v=4')
 
        .resolve(ImageConfiguration.empty);
 
    Completer<ui.Image> imageCompleter = Completer<ui.Image>();
 
    void imageListener(ImageInfo info, bool synchronousCall) {
 
      ui.Image image = info.image;
 
      imageCompleter.complete(image);
 
      imageStream.removeListener(imageListener);
 
    }
 
    imageStream.addListener(imageListener);
 
    return imageCompleter.future;
 
  }

　　

clip() async {
 
    ui.Image _image;
 
    imageLoader().then((image) => _image = image).whenComplete(() {
 
      clipper = ImageClipper(_image,left: 0,top: 0,right: 0.5,bottom: 0.5);
 
      setState(() {});
 
    });
 
  }

　　

通过clip()方法得到ImageClipper对象，并且setState通知界面更新Container的内容，

Container(color: Colors.green,child: CustomPaint(painter: clipper,size: Size(50, 50),)),

　　

ImageClipper中的核心方法

@override
 
  void paint(Canvas canvas, Size size) {
 
    Paint paint = Paint();
 
    canvas.drawImageRect(_image, Rect.fromLTRB(_image.width*left, _image.height*top, _image.width*right, _image.height*bottom),
 
    Rect.fromLTWH(0, 0, size.width,  size.height), paint);
 
  }