Android Flutter图片处理之高斯模糊的实现

目录
  • ImageFilter
    • 横向模糊
    • 垂直模糊
    • xy轴同时模糊
  • 用法
    • BackdropFilter
    • ImageFiltered
    • 区别

ImageFilter

在Flutter中,使图片模糊有2种方式,这2种方式都需要配合ImageFilter.blur()使用。

 factory ImageFilter.blur({ double sigmaX = 0.0, double sigmaY = 0.0, TileMode tileMode = TileMode.clamp })

sigmaX:以x轴方向模糊,值越大越模糊

sigmaY:以Y轴方向模糊,值越大越模糊

TileMode:不需要设置,使用默认值就行

原图

横向模糊

ImageFilter.blur(sigmaX: 10, sigmaY: 0)

垂直模糊

ImageFilter.blur(sigmaX: 0, sigmaY: 10)

xy轴同时模糊

ImageFilter.blur(sigmaX: 20, sigmaY: 20)

用法

BackdropFilter

如果是前端开发,看到这个名字应该很熟悉。和CSS中的backdrop-filter一样,都是用来实现毛玻璃效果。

  const BackdropFilter({
    Key? key,
    required this.filter,
    Widget? child,
  })

filter是一个ImageFilter过滤器,过滤器的效果会应用于父Widget的子widget,过滤器不会作用在child上。所以一般都是使用Stack,将BackdropFilter放在图片之上。

示例:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('blur demo'),
      ),
      body: Stack(
        children: [
          /// 图片在Stack最底层
          Image.asset(
            “assets/images/painting2.jpg”,
          ),
          BackdropFilter(
          	/// 过滤器
            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
            /// 必须设置一个空容器
            child: Container(),
          ),
    }

注意:child中必须设置一个空的Container,不然模糊效果不会生效。

局部模糊

BackdropFilter支持局部模糊,必须使用ClipRect或者其他ClipXXX包裹。

 body: Stack(
   children: [
     Image.asset(imgs[0]),
     Positioned(
       left: 100,
       right: 100,
       top: 200,
       bottom: 200,
       /// 必须clip,否则会对整个区域模糊。
       child: ClipRect(
         child: BackdropFilter(
           filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
           child: Container(
             alignment: Alignment.center,
             color: Colors.black.withOpacity(0),
             child: Text('child不会被模糊处理'),
           ),
         ),
       ),
     )
   ],
 ),

ImageFiltered

使用起来非常简单,只需要设置一个过滤器,child中添加图片即可实现模糊效果。

 ImageFiltered(
   imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
   child: Image.asset(
     "assets/images/painting2.jpg",
   ),
 )

区别

Drop更适合处理局部模糊,性能没有ImageFiltered好。如果只需要对图片全部区域进行模糊处理,推荐使用ImageFiltered

以上就是Android Flutter图片处理之高斯模糊的实现的详细内容,更多关于Android Flutter高斯模糊的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android实现图片高斯模糊

    本文实例为大家分享了Android实现图片高斯模糊的具体代码,供大家参考,具体内容如下 原图: 高斯模糊后: FastBlur.java import android.graphics.Bitmap; /**  * Description:  * User: chenzheng  * Date: 2017/2/22 0022  * Time: 12:22  */ public class FastBlur {     public static Bitmap doBlur(Bitmap sent

  • Android实现动态高斯模糊效果示例代码

     写在前面 现在,越来越多的App里面使用了模糊效果,这种模糊效果称之为高斯模糊.大家都知道,在Android平台上进行模糊渲染是一个相当耗CPU也相当耗时的操作,一旦处理不好,卡顿是在所难免的.一般来说,考虑到效率,渲染一张图片最好的方法是使用OpenGL,其次是使用C++/C,使用Java代码是效率是最低,速度也是最慢的.但是Android推出RenderScript之后,我们就有了选择,测试表明,使用RederScript的渲染效率和使用C++/C不相上下,但是使用RenderScript

  • Android实现图片的高斯模糊(两种方式)

    在市面上很多的APP都使用了对图片作模糊化处理后作为背景的效果,来使得整个页面更具有整体感.如下就是网易云音乐的音乐播放页面: 很明显这个页面的背景是由中间的小图片模糊化后而来的.最常用的模糊化处理就是高斯模糊. 高斯模糊的几种实现方式: (1)RenderScript RenderScript是Google在Android 3.0(API 11)中引入的一个高性能图片处理框架. 使用RenderScriprt实现高斯模糊: 首先在在build.gradle的defaultConfig中添加Re

  • Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)

    目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高斯模糊,并把它作为整个页面的背景色. 关于Android如何快速实现高斯模糊(毛玻璃效果),网上一堆相关介绍,可参考下面文章一种快速毛玻璃虚化效果实现–Android. 下面直接给出模糊化工具类(已验证可行): import android.graphics.Bitmap; /** * 快速模糊化工

  • Android项目实战之Glide 高斯模糊效果的实例代码

    核心需要高斯模糊的库 compile 'jp.wasabeef:glide-transformations:2.0.1' 针对于3.7的版本 使用方法为: //加载背景, Glide.with(MusicPlayerActivity.this) .load(service.getImageUri()) .dontAnimate() .error(R.drawable.no_music_rotate_img) // 设置高斯模糊,模糊程度(最大25) 缩放比例 .bitmapTransform(n

  • Android实现动态高斯模糊效果

    高斯模糊是什么? 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次.这种模糊技术生成的图像,其视觉效果就像是经过一个半透明屏幕在观察图像,这与镜头焦外成像效果散景以及普通照明阴影中的效果都明显不同. 什么?看不明白?没关系,我也看不明白,维基百科复制回来的嘛.我们直接放一些图片来了解以下这个高斯模糊是怎么样的.因为高斯模糊在iOS中最常见,这里抓

  • Android仿微信通话背景的高斯模糊效果

    先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高斯模糊,并把它作为整个页面的背景色. 关于Android如何快速实现高斯模糊(毛玻璃效果),网上一堆相关介绍, 下面直接给出网上模糊化工具类(已验证可行): import android.graphics.Bitmap; /** * 快速模糊化工具 */ public class FastBlur { public static Bitmap doBlur(Bitmap sentBitmap, int radius,

  • Android 实现图片模糊、高斯模糊、毛玻璃效果的三种方法

    在前几天写过一个使用glide-transformations的方法实现高斯模糊的方法,今天偶然间有发现一个大神写的另一个方法,感觉挺不错的,分享一下: 效果图: 原文链接:点击访问 这使用也很简单,导入依赖,使用模糊方法就行,就这两步搞定 依赖: compile 'net.qiujuer.genius:blur:2.0.0-beta4' 实现方法有三种,第一个是Java实现的,第二个和第三个是调用C语言实现的 ,具体的区别也就是代码执行的耗时操作时间,从图片中可以看出Java使用时间远大于c运

  • Android实现图片压缩(bitmap的六种压缩方式)

    Android中图片是以bitmap形式存在的,那么bitmap所占内存,直接影响到了应用所占内存大小,首先要知道bitmap所占内存大小计算方式: 图片长度 x 图片宽度 x 一个像素点占用的字节数 以下是图片的压缩格式: 其中,A代表透明度:R代表红色:G代表绿色:B代表蓝色. ALPHA_8 表示8位Alpha位图,即A=8,一个像素点占用1个字节,它没有颜色,只有透明度 ARGB_4444 表示16位ARGB位图,即A=4,R=4,G=4,B=4,一个像素点占4+4+4+4=16位,2个

  • Android Glide图片加载(加载监听、加载动画)

    本文实例为大家分享了Android Glide图片加载的具体代码,供大家参考,具体内容如下 1.普通用法 Glide.with(context) .load(url) .into(view); with中可以放context.activity.fragment..:当放activity.fragment时glide会根据生命周期来加载图片.推荐使用activity. 2.设置加载中和加载失败的图片 Glide.with(context) .load(url) .placeholder(R.dra

  • Android实现图片叠加效果的两种方法

    本文实例讲述了Android实现图片叠加效果的两种方法.分享给大家供大家参考,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // 防止出现Immutable bitmap passed to Canvas constructor错误 Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.apple).copy(Bi

  • Android实现图片反转、翻转、旋转、放大和缩小

    ********************************************************************** android 实现图片的翻转 ********************************************************************** Resources res = this.getContext().getResources(); img = BitmapFactory.decodeResource(res, R.

  • android实现图片反转效果

    可能有些同学不明白,为啥要图片反转(不是旋转哦),我们在游戏开发中,为了节省图片资源(空间) 有可能会使用到图片反转,例如,一个人物图片,面向左,或右,如果不能实现图片反转的情况下,就需要两张图片了,废话少说,看效果上代码: 在上图中,实际两个人物使用的是一张图片,只是针对一张图片做了处理而已. 详细代码: public class ImageSurfaceView extends SurfaceView implements SurfaceHolder.Callback{ public Bit

  • Android实现图片轮播切换实例代码

    利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击"上一张"图片时,切换到上一张图片:当点击"下一张"图片时,切换到下一张图片.其效果图如下: 设置布局文件,其内容如下: activity_image_flipper_shade.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • android中图片加载到内存的实例代码

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="matc

随机推荐

其他