返回顶部
首页 > 资讯 > 移动开发 >AndroidFlutter图片处理之高斯模糊的实现
  • 343
分享到

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

AndroidFlutter高斯模糊Android高斯模糊Flutter高斯模糊 2022-11-13 14:11:39 343人浏览 安东尼
摘要

目录ImageFilter横向模糊垂直模糊xy轴同时模糊用法BackdropFilterImageFiltered区别ImageFilter 在Flutter中,使图片模糊有2种方式

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高斯模糊的资料请关注编程网其它相关文章!

--结束END--

本文标题: AndroidFlutter图片处理之高斯模糊的实现

本文链接: https://lsjlt.com/news/171767.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • AndroidFlutter图片处理之高斯模糊的实现
    目录ImageFilter横向模糊垂直模糊xy轴同时模糊用法BackdropFilterImageFiltered区别ImageFilter 在Flutter中,使图片模糊有2种方式...
    99+
    2022-11-13
    Android Flutter高斯模糊 Android 高斯模糊 Flutter 高斯模糊
  • Android实现图片高斯模糊
    本文实例为大家分享了Android实现图片高斯模糊的具体代码,供大家参考,具体内容如下 原图: 高斯模糊后: FastBlur.java import android.graph...
    99+
    2024-04-02
  • Android实现图片转高斯模糊以及高斯模糊布局
    第一个为大家介绍图片如何转高斯模拟:方法的实现:public static void updateBgToBlur(Activity a, Bitmap bmpToBlur, View view, int resId) { ...
    99+
    2023-05-30
    android 高斯模糊 roi
  • OpenCV3.3+Python3.6实现图片高斯模糊
    本文实例为大家分享了OpenCV3.3+Python3.6实现图片高斯模糊的具体代码,供大家参考,具体内容如下 高斯模糊 高斯模糊(英语:Gaussian Blur),通常用它来减少图像噪声以及降低细节层次。这种模糊...
    99+
    2022-06-02
    OpenCV python 高斯模糊
  • php如何实现图片高斯模糊
    这篇文章将为大家详细讲解有关php如何实现图片高斯模糊,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在php中可以通过高斯算法实现图片的模糊,其实现的语句是“function gaussian_blur(...
    99+
    2023-06-15
  • Android实现图片的高斯模糊(两种方式)
    在市面上很多的APP都使用了对图片作模糊化处理后作为背景的效果,来使得整个页面更具有整体感。如下就是网易云音乐的音乐播放页面: 很明显这个页面的背景是由中间的小图片模糊化后而...
    99+
    2022-06-06
    图片 高斯 高斯模糊 Android
  • 怎么用css3实现图片的高斯模糊效果
    小编给大家分享一下怎么用css3实现图片的高斯模糊效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!    ...
    99+
    2024-04-02
  • 如何进行图片JNI C++\Java高斯模糊的实现
    这篇文章将为大家详细讲解有关如何进行图片JNI C++\Java高斯模糊的实现,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。开工吧说明:其中代码大部分来源于网络,不过都是开源的。最原始的代码...
    99+
    2023-06-19
  • Android 实现图片模糊、高斯模糊、毛玻璃效果的三种方法
    在前几天写过一个使用glide-transformations的方法实现高斯模糊的方法,今天偶然间有发现一个大神写的另一个方法,感觉挺不错的,分享一下: 效果图: 原文链接:...
    99+
    2022-06-06
    方法 图片 高斯 高斯模糊 毛玻璃 Android
  • Android RenderScript实现高斯模糊
    昨天看了下RenderScript的官方文档,发现RenderScript这厮有点牛逼。无意中发现ScriptIntrinsic这个抽象类,有些很有用的子类。其中有个子类叫Sc...
    99+
    2022-06-06
    高斯 高斯模糊 Android
  • python如何实现高斯模糊
    这篇文章给大家分享的是有关python如何实现高斯模糊的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。高斯模糊是一种常见的模糊技术,相关知识点有:高斯函数、二维卷积。 (一)一维高斯分布函数一维(连续变量...
    99+
    2023-06-15
  • python实现高斯模糊及原理详解
    高斯模糊是一种常见的模糊技术,相关知识点有:高斯函数、二维卷积。  (一)一维高斯分布函数 一维(连续变量)高斯函数形式如下,高斯函数又称“正态分布函数”: μ是分布函数的均值(或者期望),sigma是...
    99+
    2022-06-02
    python 高斯模糊
  • Python如何生成随机高斯模糊图片详解
    高斯模糊的介绍与原理 通常,图像处理软件会提供"模糊"(blur)滤镜,使图片产生模糊的效果。 "模糊"的算法有很多种,其中有一种叫做"高斯模糊"(Gaussian Blur)。它将...
    99+
    2024-04-02
  • Android实现动态高斯模糊效果
    高斯模糊是什么? 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效...
    99+
    2022-06-06
    高斯 高斯模糊 动态 Android
  • Android模糊处理实现图片毛玻璃效果
    本文实例讲解了Android 虚化图片、模糊图片、图片毛玻璃效果的实现方法,具体内容如下 效果如图: 在Android可以用RenderScript方便的实现这个方法: ...
    99+
    2022-06-06
    图片 毛玻璃 Android
  • Java怎样实现高斯模糊和图像的空间卷积
    这期内容当中小编将会给大家带来有关Java怎样实现高斯模糊和图像的空间卷积,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。高斯模糊高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe ...
    99+
    2023-06-17
  • Java如何实现高斯模糊和图像的空间卷积
    这篇文章主要介绍Java如何实现高斯模糊和图像的空间卷积,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!高斯模糊高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop、GIMP以...
    99+
    2023-05-30
    java
  • 在Android项目中如何将图片进行高斯模糊
    本篇文章给大家分享的是有关在Android项目中如何将图片进行高斯模糊,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。高斯模糊的几种实现方式:(1)RenderScriptRen...
    99+
    2023-05-31
    android roi 目中
  • Android Picasso使用高斯模糊处理的示例代码
    众所周知,Picasso是一个在Android开发中经常使用到的图片加载库,常规用法一般是这样:Picasso.with(context) .load(img_url) .config(Bitmap.Config.RGB_565...
    99+
    2023-05-30
    android picasso roi
  • css怎么使用高斯模糊的效果逐步加载图片
    本篇内容主要讲解“css怎么使用高斯模糊的效果逐步加载图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么使用高斯模糊的效果逐步加载图片”吧!用过 Me...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作