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); }
Flutter裁剪图片的更多相关文章
- Java+jquery实现裁剪图片上传到服务器
大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片 首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http: ...
- PHP图片裁剪与缩放 / 无损裁剪图片
图片太大且规格不统一,显示的控制需要靠JavaScript来完成,用在移动设备上时显示效果不好且流量巨大,需要对现有图片库的图片进行一次处理,生成符合移动设备用的缩略图,将原来客户端JS做的工作转移到 ...
- iOS开发——UI进阶篇(十八)核心动画小例子,转盘(裁剪图片、自定义按钮、旋转)图片折叠、音量震动条、倒影、粒子效果
一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...
- IOS 按比例裁剪图片
拍照或者从图片库中获取图片 操作过程中容易闪退,也总会有内存压力警告,第一步,首先可以考虑裁剪图片,实际上可能不需要那么大的.其次可以考虑把耗时的比如存储过程放进线程. 这里封装裁剪图片的类方法. / ...
- HTML5 本地裁剪图片
下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一:获取文件,读取文件并生成url 二:根据容器的大小 ...
- PHP裁剪图片
PHP裁剪图片 $src_path = '1.jpg'; //创建源图的实例 $src = imagecreatefromstring(file_get_contents($src_path)); / ...
- iOS 压缩与裁剪图片问题
我们假设要在截图中的举行图片展示区显示图片,由于原图片的宽高比例与图片显示窗口的宽高比例不一定相同,所以,直接将图片扔进去会改变图片的宽高比例,展示效果不好. 这时你可能想到设置UIImageView ...
- HTML5 本地裁剪图片并上传至服务器(转)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- Windows Phone – 裁剪图片 (Crop Image)
原文:Windows Phone – 裁剪图片 (Crop Image) 最近在处理图像的功能,对於图像的比例我也不是非常的清楚,因此,在编辑图片上花了不少时间. 该篇文章主要说明的是:如何对图片选择 ...
随机推荐
- cnetos6.5安装Varnish
安装依赖包: tar -zxvf docutils-0.13.1.tar.gz python setup.py install unzip pcre2-10.23.zip ./configure -- ...
- SSH框架整合3——原生态SessionFactory
================================================web.xml============================================= ...
- HBase 介绍
HBase的列族式存储 列族式存储的概念 HBase Table的组成 Table = RowKey + Family + Column + Timestamp + Value 数据存储模式 (Row ...
- git 只提交部分修改文件
1.git status //查看修改文件状态 2.git add //将想要提交的文件add到本地库 4.git status //查看修改文件状态 3.git commit //提交add到 ...
- USB安装ESXi出错,menu.c32 not a com32r image
USB安装EXSi出错,menu.c32 not a com32r image 不能进入安装界面. 提供提取的menu.c32 下载下来覆盖U盘根目录源文件 EXSi6.7测试可以用 文件csdn下载 ...
- python开发--列表当全局变量来使用
python中,申明全局变量的时候,一般该变量类型基本上是:字符串或数字: 比较少用“列表”当做变量, 当有作用域限制的情况下,想要外部调用内部作用域的“列表”变量时,可以用这种方式,外部申明一个空列 ...
- tp5 Class 'gmars\rbac\Rbac' not found
tp强调的是资源的自动加载,自动加载前提是要配置进去,不管是手工还是系统自动配置. 解决方案:查看autoload_psr4.php文件,如果没有的话,是composer的操作哪里有问题.
- (转)自动微分(Automatic Differentiation)简介——tensorflow核心原理
现代深度学习系统中(比如MXNet, TensorFlow等)都用到了一种技术——自动微分.在此之前,机器学习社区中很少发挥这个利器,一般都是用Backpropagation进行梯度求解,然后进行SG ...
- 【linux学习笔记八】常用命令
查询与自动挂载 #查询系统中已经挂载的设备 mount #依据配置文件/etc/fstab的内容,自动挂载 mount -a 挂载命令格式 mount [-t 文件系统] [-o 特殊选项] 设备文件 ...
- 【视频开发】RTSP SERVER(基于live555)详细设计
/* *本文基于LIVE555的嵌入式的RTSP流媒体服务器一个设计文档,个中细节现剖于此,有需者可参考指正,同时也方便后期自己查阅.(本版本是基于2011年的live555) 作者:llf_17@q ...