Flutter裁剪图片
最近在学习中需要用到裁剪图片,记录一下解决方法
思路:
使用canvas的drawImageRect()方法,对Image进行裁剪,这里的Image需要 'dart:ui' 库中的Image。
1. canvas的drawImageRect()方法
1 | drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void |
①第一个参数是'dart:ui' 库中的Image。
②第二个参数为你需要截取的矩形Rect,举个栗子:截取一张图片,原图的宽高分别为w和h,
将第二个参数设置为:
1 | Rect.fromLTRB( 0 , 0 , w / 2 , h / 2 ) |
意思就是从原图片中截取一个矩形,矩形的坐标从(0.0)到(w/2, h/2)。
这里的是fromLTWH意思是指定left,top,right,bottom坐标,通过指定四个点来获取矩形
③第三个为目标矩形Rect,即你想要在canvas上绘制的区域,
举个栗子:接着上面所讲的,将第三个参数设置为
1 | 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'中的方法重名冲突
1 | import 'dart:ui' as ui; |
从我们平常用的图片去获取ui库下的Image的方法如下:
将图片转化为流,并添加监听,在图片流加载完成之后获取到ui.Image
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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的内容,
1 | Container(color: Colors.green,child: CustomPaint(painter: clipper,size: Size( 50 , 50 ),)), |
ImageClipper中的核心方法
1 2 3 4 5 6 7 8 9 10 11 | @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); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步