鸿蒙应用中图片的显示（Image组件）

        

目录

1、加载图片资源

1.1、存档图类型数据源

a.本地资源

b.网络资源

c.Resource资源

d.媒体库file://data/storage

e.base64 

1.2、多媒体像素图片

2、显示矢量图

3、添加属性

3.1、设置图片缩放类型

3.2、设置图片重复样式

3.3、设置图片渲染模式 

3.4、设置图片解码尺寸

3.5、添加滤镜效果

3.6、同步加载图片

3.7、事件调用

        开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。

        Image通过调用接口来创建，接口调用形式如下：

Image(src: string | Resource | media.PixelMap)

        该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考加载图片资源。

1、加载图片资源

        Image支持加载存档图、多媒体像素图两种类型。

1.1、存档图类型数据源

        存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64。

  • a.本地资源

        创建文件夹，将本地图片放入ets文件夹下的任意位置。Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

Image('images/view.jpg')
.width(200)
  • b.网络资源

        引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Image组件的src参数为网络图片的链接。

Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址
  • c.Resource资源

        使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

        调用方式

Image($r('app.media.girl1'))

         还可以将图片放在rawfile文件夹下。

        调用方式： 

Image($rawfile('snap'))
  • d.媒体库file://data/storage

        支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。

  1. 调用接口获取图库的照片url。 
    import picker from '@ohos.file.picker';
import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';

@Entry
@Component
struct ImageSelectPage {
  @State imgDatas: string[] = [];

  @State image: PixelMap = null
  // 获取照片url集
  getAllImg() {

    let result = new Array<string>();
    try {
      let PhotoSelectOptions = new picker.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
      PhotoSelectOptions.maxSelectNumber = 5;
      let photoPicker = new picker.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
        this.imgDatas = PhotoSelectResult.photoUris;
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
      }).catch((err) => {
        console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);
      });
    } catch (err) {
      console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }
  }

  // aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中
  async aboutToAppear() {
    this.getAllImg();
  }
  // 使用imgDatas的url加载图片。
  build() {
    Column() {
      if (null != this.image) {
        Image(this.image)
      }

      Grid() {
        ForEach(this.imgDatas, item => {
          GridItem() {
            Image(item)
              .width(200)
          }
        }, item => JSON.stringify(item))
      }
    }.width('100%').height('100%')
  }
}

            选择照片后返回的数据格式如下：

e.base64 

        路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。Base64格式字符串可用于存储图片的像素数据，在网页上使用较为广泛。

1.2、多媒体像素图片

        PixelMap是图片解码后的像素图，具体用法请参考图片开发指导。以下示例将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上，代码如下：

import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';

@Entry
@Component
struct ShowNetworkImagePage {
  @State image: PixelMap = undefined;

  aboutToAppear() {

  }
  build() {
    Row() {
      Stack() {
        Column() {
          Image(this.image)
        }
        .width('100%')
        Text('点击加载网络图片').onClick(() => {
          this.httpRequest()
        }).fontSize(32)
      }
    }
    .height('100%').backgroundColor('#8067c8ff')
  }

  httpRequest() {
    http.createHttp().request('https://lmg.jj20.com/up/allimg/1112/04051Z03929/1Z405003929-4-1200.jpg',
      (error, data) => {
        if (error) {
          console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          let code = data.responseCode;
          if (http.ResponseCode.OK === data.responseCode) {
            let res: any = data.result
            let imageSource = image.createImageSource(res);
            let options = {
              alphaType: 0,    // 透明度
              editable: false, // 是否可编辑
              pixelFormat: 3,  // 像素格式
              scaleMode: 1,    // 缩略值
              size: { height: 100, width: 100 }
            } // 创建图片大小
            imageSource.createPixelMap(options).then((pixelMap) => {
              this.image = pixelMap
            })
          }
        }
      }
    )
  }
}

2、显示矢量图

        Image组件可显示矢量图（svg格式的图片），支持的svg标签为：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。

        svg格式的图片可以使用fillColor属性改变图片的绘制颜色。

@Entry
@Component
struct SVGImageTestPage {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Image($r('app.media.smile_beam'))
          .width(200)
          .height(200)
          .backgroundColor('#8067c8ff')
          .fillColor(Color.Red)
      }
      .width('100%')
    }
    .height('100%')
  }
}

        说明：

此处的fillColor属性没有生效，估计是svg资源的问题！！

3、添加属性

        给Image组件设置属性可以使图片显示更灵活，达到一些自定义的效果。以下是几个常用属性的使用示例，完整属性信息详见Image。 

3.1、设置图片缩放类型

        通过objectFit属性使图片缩放到高度和宽度确定的框内。

@Entry
@Component
struct MyComponent {
  scroller: Scroller = new Scroller()

  build() {
    Scroll(this.scroller) {
      Row() {
        Image($r('app.media.img_2')).width(200).height(150)
          .border({ width: 1 })
          .objectFit(ImageFit.Contain).margin(15) // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
          .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        Image($r('app.media.ic_img_2')).width(200).height(150)
          .border({ width: 1 })
          .objectFit(ImageFit.Cover).margin(15)
          // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
          .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        Image($r('app.media.img_2')).width(200).height(150)
          .border({ width: 1 })
            // 自适应显示。
          .objectFit(ImageFit.Auto).margin(15)
          .overlay('Auto', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      }
      Row() {
        Image($r('app.media.img_2')).width(200).height(150)
          .border({ width: 1 })
          .objectFit(ImageFit.Fill).margin(15)
          // 不保持宽高比进行放大缩小，使得图片充满显示边界。
          .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        Image($r('app.media.img_2')).width(200).height(150)
          .border({ width: 1 })
          // 保持宽高比显示，图片缩小或者保持不变。
          .objectFit(ImageFit.ScaleDown).margin(15)
          .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        Image($r('app.media.img_2')).width(200).height(150)
          .border({ width: 1 })
          // 保持原有尺寸显示。
          .objectFit(ImageFit.None).margin(15)
          .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      }
    }
  }
}

        运行效果如下：

3.2、图片插值

        当原图分辨率较低并且放大显示时，图片会模糊出现锯齿。这时可以使用interpolation属性对图片进行插值，使图片显示得更清晰。

@Entry
@Component
struct ImageInterpolationPage {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Row() {
        Image($r('app.media.wrench_simple_20'))
          .width('40%')
          .interpolation(ImageInterpolation.None)
          .borderWidth(1)
          .overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
        Image($r('app.media.wrench_simple_20'))
          .width('40%')
          .interpolation(ImageInterpolation.Low)
          .borderWidth(1)
          .overlay("Interpolation.Low", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
      }.width('100%')
      .justifyContent(FlexAlign.Center)

      Row() {
        Image($r('app.media.wrench_simple_20'))
          .width('40%')
          .interpolation(ImageInterpolation.Medium)
          .borderWidth(1)
          .overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
        Image($r('app.media.wrench_simple_20'))
          .width('40%')
          .interpolation(ImageInterpolation.High)
          .borderWidth(1)
          .overlay("Interpolation.High", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
      }.width('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

         效果如下：

3.2、设置图片重复样式

        通过objectRepeat属性设置图片的重复样式方式，重复样式请参考ImageRepeat枚举说明。 

@Entry
@Component
struct ImageRepeatTestPage {
  @State message: string = 'Hello World'

  build() {
    Column({ space: 10 }) {
      Column({ space: 5 }) {
        Image($r('app.media.wrench_simple_20'))
          .width('60%')
          .height(300)
          .border({ width: 1 })
          .objectRepeat(ImageRepeat.XY)
          .objectFit(ImageFit.ScaleDown)
          .margin({top: 48})
            // 在水平轴和竖直轴上同时重复绘制图片
          .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        Image($r('app.media.wrench_simple_20'))
          .width('60%')
          .height(300)
          .border({ width: 1 })
          .objectRepeat(ImageRepeat.Y)
          .objectFit(ImageFit.ScaleDown)
          .margin({top: 40})
            // 只在竖直轴上重复绘制图片
          .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        Image($r('app.media.wrench_simple_20'))
          .width('60%')
          .height(300)
          .border({ width: 1 })
          .objectRepeat(ImageRepeat.X)
          .objectFit(ImageFit.ScaleDown)
          .margin({top: 40})
            // 只在水平轴上重复绘制图片
          .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      }
    }.height(150).width('100%').padding(8)
  }
}

        效果如下：

3.3、设置图片渲染模式 

        通过renderMode属性设置图片的渲染模式为原色或黑白。

@Entry
@Component
struct RenderModePage {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({ space: 10 }) {
        Row({ space: 50 }) {
          Image($r('app.media.girl9'))// 设置图片的渲染模式为原色
            .renderMode(ImageRenderMode.Original)
            .width(100)
            .height(100)
            .border({ width: 1 })// overlay是通用属性，用于在组件上显示说明文字
            .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          Image($r('app.media.girl9'))// 设置图片的渲染模式为黑白
            .renderMode(ImageRenderMode.Template)
            .width(100)
            .height(100)
            .border({ width: 1 })
            .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
      }.height(150).width('100%').padding({ top: 20, right: 10 })
    }
  }
}

        效果如下：

3.4、设置图片解码尺寸

        通过sourceSize属性设置图片解码尺寸，降低图片的分辨率。原图尺寸为1280*960，该示例将图片解码为150*150和400*400。

 

@Entry
@Component
struct ImageSourceSizePage {
  @State message: string = 'Hello World'
  private imagrUrl:string = 'https://10wallpaper.com/wallpaper/1280x960/1605/Asian_fashion_beauty_model_photo_HD_Wallpapers_06_1280x960.jpg'

  build() {
    Column() {
      Row({ space: 20 }) {
        Image(this.imagrUrl)
          .sourceSize({
            width: 150,
            height: 150
          })
          .objectFit(ImageFit.ScaleDown)
          .width('25%')
          .aspectRatio(1)
          .border({ width: 1 })
          .overlay('width:150 height:150', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
        Image(this.imagrUrl)
          .sourceSize({
            width: 400,
            height: 400
          })
          .objectFit(ImageFit.ScaleDown)
          .width('25%')
          .aspectRatio(1)
          .border({ width: 1 })
          .overlay('width:400 height:400', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
      }
      .height(150)
      .width('100%')
      .padding(20)
      .justifyContent(FlexAlign.Center)
      .backgroundColor("#dfaaaa")

    }
  }
}

        效果如下：

3.5、添加滤镜效果

        通过colorFilter修改图片的像素颜色，为图片添加滤镜。 

@Entry
@Component
struct ImageColorFilterPage {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Row() {
        Image($r('app.media.girl16'))
          .width('40%')
          .margin(10)
        Image($r('app.media.girl16'))
          .width('40%')
          .colorFilter(
            [1, 1, 0, 0, 0,
              0, 1, 0, 0, 0,
              0, 0, 1, 0, 0,
              0, 0, 0, 1, 0])
          .margin(10)
      }.width('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

        效果如下：

3.6、同步加载图片

        一般情况下，图片加载流程会异步进行，以避免阻塞主线程，影响UI交互。但是特定情况下，图片刷新时会出现闪烁，这时可以使用syncLoad属性，使图片同步加载，从而避免出现闪烁。不建议图片加载较长时间时使用，会导致页面无法响应。

Image($r('app.media.icon'))
  .syncLoad(true)
3.7、事件调用

        通过在Image组件上绑定onComplete事件，图片加载成功后可以获取图片的必要信息。如果图片加载失败，也可以通过绑定onError回调来获得结果。

@Entry
@Component
struct ImageLoadEventPage {
  @State widthValue: number = 0
  @State heightValue: number = 0
  @State componentWidth: number = 0
  @State componentHeight: number = 0

  build() {
    Column() {
      Row() {
        Image($r('app.media.girl6'))
          .width(200)
          .height(150)
          .margin(15)
          .objectFit(ImageFit.Contain)
          .onComplete((msg: {
            width: number,
            height: number,
            componentWidth: number,
            componentHeight: number
          }) => {
            this.widthValue = msg.width
            this.heightValue = msg.height
            this.componentWidth = msg.componentWidth
            this.componentHeight = msg.componentHeight
          })// 图片获取失败，打印结果
          .onError(() => {
            console.info('load image fail')
          })
          .overlay('\nwidth: ' + String(this.widthValue) + ', height: ' + String(this.heightValue) + '\ncomponentWidth: ' + String(this.componentWidth) + '\ncomponentHeight: ' + String(this.componentHeight), {
            align: Alignment.Bottom,
            offset: { x: 0, y: 60 }
          })
      }
    }.justifyContent(FlexAlign.Center).backgroundColor('#777').width('100%')
  }
}

        效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/290785.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

二维码地址门牌管理系统：物业管理的未来趋势

二维码地址门牌管理系统：物业管理的未来趋势

文章目录 前言一、数字化管理与便捷服务二、身份认证与安全保障三、业主便利与贴心服务四、未来发展趋势 前言 在数字化时代&#xff0c;物业管理面临着不断增加的挑战。为了提高管理效率、服务业主&#xff0c;二维码门牌管理系统应运而生。本文将探讨这一新型管理方式&#…
阅读更多...
AIOps探索 | 基于大模型构建高效的运维知识及智能问答平台（2）案例分享

AIOps探索 | 基于大模型构建高效的运维知识及智能问答平台（2）案例分享

原作者&#xff1a;擎创科技产品专家 布博士 案例分享 所需要的软件列表 本次案例的实现&#xff0c;全部采用开源或SAAS的产品来提供&#xff0c;并不涉及到私有化部署的软件产品。软件列表如下所示&#xff0c;如何申请apikey请自行研究&#xff0c;在这里不再详细说明&…
阅读更多...
Python+PyCharm的安装配置及教程（实用）

Python+PyCharm的安装配置及教程（实用）

python and PyCharm 安装教程可参考&#xff1a;https://blog.csdn.net/wangyuxiang946/article/details/130634049 Pyhon 下载地址&#xff1a;https://www.python.org/downloads/ PyCharm 下载地址&#xff1a;https://www.jetbrains.com/pycharm/download/?sectionwindo…
阅读更多...
BMS开发之面向对象思想（adbms1818）

BMS开发之面向对象思想（adbms1818）

借鉴adbms1818的底层驱动代码 前言&#xff1a;adbms1818的主要用途就是不同种类的寄存器里面存储不同的数据&#xff0c;程序员需要通过特定的协议往寄存器里面写入或者读出数据 &#xff08;1&#xff09;定义一个结构体 里面存储了adbms1818的所有寄存器的信息。然后我们看…
阅读更多...
手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！

手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！

文件传输功能是日常必备功能&#xff0c;但总有传输工具不得“朕”心—— 想在手机和电脑之间传输稍微大一点的文件&#xff0c;弹出提示“限制多少多少G”&#xff0c;传个5G的视频或文件很平常吧&#xff0c;怎么就实现不了&#xff1f;想要将手机相册的视频和照片转移到电脑…
阅读更多...
什么是设备树？

什么是设备树？

一. 简介 前面只是简单使用过设备树文件&#xff0c;接下来详细谈一谈设备树。掌握设备树是 Linux 驱动开发人员必 备的技能&#xff01; 因为在新版本的 Linux 中&#xff0c;ARM 相关的驱动全部采用了设备树(也有支持老式驱动的&#xff0c;比较少)&#xff0c;最新出的 CP…
阅读更多...
Flink Watermark和时间语义

Flink Watermark和时间语义

Flink 中的时间语义 时间语义&#xff1a; EventTime&#xff1a;事件创建时间&#xff1b;Ingestion Time&#xff1a;数据进入Flink的时间&#xff1b;Processing Time&#xff1a;执行操作算子的本地系统时间&#xff0c;与机器无关。不同的时间语义有不同的应用场合&#x…
阅读更多...
光耀未来 第一届能源电子产业创新大赛太阳能光伏赛道决赛在宜宾举行

光耀未来 第一届能源电子产业创新大赛太阳能光伏赛道决赛在宜宾举行

1月3日&#xff0c;第一届能源电子产业创新大赛太阳能光伏赛道决赛在宜宾盛大举行&#xff0c;本次比赛吸引了全国范围内的光伏行业顶尖人才和创新团队参与。 为深入贯彻《关于推动能源电子产业发展的指导意见》&#xff0c;推动我国能源电子产业升级&#xff0c;工业和信息化部…
阅读更多...
CMake入门教程【核心篇】添加依赖(add_dependencies)

CMake入门教程【核心篇】添加依赖(add_dependencies)

&#x1f608;「CSDN主页」&#xff1a;传送门 &#x1f608;「Bilibil首页」&#xff1a;传送门 &#x1f608;「本文的内容」&#xff1a;CMake入门教程 &#x1f608;「动动你的小手」&#xff1a;点赞&#x1f44d;收藏⭐️评论&#x1f4dd; 文章目录 1. 基本用法2. 添加目…
阅读更多...
Docker网络模型

Docker网络模型

Docker容器是虚拟化技术&#xff0c;其使用虚拟化网络技术实现Docker容器主机中运行的容器实例之间的网络互连功能&#xff0c;本文主要描述Docker的网络模型。 Docker架构 如上所示&#xff0c;Docker容器化的架构分为三个部分&#xff0c;其中Docker Host是虚拟化主机系统&a…
阅读更多...
JAVA学习专栏

JAVA学习专栏

JAVA专栏 Java核心技术 Java核心技术 Java练手算法 Java练手算法 Java数据结构和算法 Java数据结构和算法 Java设计模式 Java设计模式 Java并发编程 Java并发编程 MySQL数据库 MySQL数据库 Java项目管理Maven Java项目管理Maven 项目管理工具gradle 项目管理工具gradle…
阅读更多...
leetcode2397. 被列覆盖的最多行数

leetcode2397. 被列覆盖的最多行数

目录 题目 思路 解题方法 题目 https://leetcode.cn/problems/maximum-rows-covered-by-columns/description/ 给你一个下标从 0 开始、大小为 m x n 的二进制矩阵 matrix &#xff1b;另给你一个整数 numSelect&#xff0c;表示你必须从 matrix 中选择的 不同 列的数量。 …
阅读更多...
助力工业生产“智造”，基于YOLOv8全系列模型【n/s/m/l/x】开发构建纺织生产场景下布匹瑕疵检测识别系统

助力工业生产“智造”，基于YOLOv8全系列模型【n/s/m/l/x】开发构建纺织生产场景下布匹瑕疵检测识别系统

纯粹的工业制造没有办法有长久的发展过程&#xff0c;转制造为全流程全场景的生产智造才是未来最具竞争力的生产场景&#xff0c;在前面的开发实践中我们已经涉足工业生产场景下进行了很多实地的项目开发&#xff0c;如&#xff1a;PCB电路板缺陷检测、焊接缺陷检测、螺母螺钉缺…
阅读更多...
深入浅出Python日志打印

深入浅出Python日志打印

0.引言 在编程过程中&#xff0c;日志记录是一项非常重要的任务&#xff0c;无论是用于调试代码、记录系统运行状态&#xff0c;还是跟踪可能出现的问题&#xff0c;日志都能发挥重要作用。然而&#xff0c;许多开发者习惯使用简单的print语句来记录信息&#xff0c;这种方法虽…
阅读更多...
SVN服务端的下载、安装

SVN服务端的下载、安装

地址 &#xff1a; Apache Subversion Binary Packages 下载 点击 VisualSVN 安装 都是点击 next 点击next &#xff0c;即可安装成功
阅读更多...
让设备更聪明 |启英泰伦离线自然说，开启智能语音交互新体验！

让设备更聪明 |启英泰伦离线自然说，开启智能语音交互新体验！

语音交互按部署方式可以分为两种&#xff1a;离线语音交互和在线语音交互。 在线语音交互是将数据储存在云端&#xff0c;其具备足够大的存储空间和算力&#xff0c;可以实现海量的语音数据处理。 离线语音交互是以语音芯片为载体&#xff0c;语音数据的采集、计算、决策均在…
阅读更多...
二叉树链式结构的实现(二叉树的遍历以及各种常用功能函数的实现)

二叉树链式结构的实现(二叉树的遍历以及各种常用功能函数的实现)

之前也是把堆部分的知识点梳理完毕&#xff08;即二叉树链式顺序的实现&#xff09;&#xff1a;堆的应用&#xff1a;堆排序和TOP-K问题 那么讲完了二叉树链式结构的实现。今天就进入二叉树链式结构的实现&#xff1a; 文章目录 1.准备工作2.二叉树的遍历2.1前序遍历2.2中序遍…
阅读更多...
用通俗易懂的方式讲解：基于扩散模型（Diffusion）,文生图 AnyText 的效果太棒了

用通俗易懂的方式讲解：基于扩散模型（Diffusion）,文生图 AnyText 的效果太棒了

近年来&#xff0c;随着AIGC的爆火&#xff0c;图片生成技术得到飞速发展&#xff0c;当前AI生成的图片已达到真假难辨的高保真度。不过&#xff0c;当合成图片中出现文字内容时&#xff0c;仍能够使AI露出马脚&#xff0c;因为当前主流方法尚无法在图片中生成准确可读的字符。…
阅读更多...
YOLOv8融合改进 更换检测头为Detect_DyHead同时添加C2f-EMSC和C2f-EMSCP模块

YOLOv8融合改进 更换检测头为Detect_DyHead同时添加C2f-EMSC和C2f-EMSCP模块

一、Detect_DyHead检测头和C2f-EMSC&#xff0c;C2f-EMSCP模块 详细介绍和代码在往期的博客里&#xff1a; Detect_DyHead&#xff1a; &#xff08;YOLOv8改进检测头Detect为Detect_Dyhead-CSDN博客&#xff09; C2f-EMSC和C2f-EMSCP&#xff1a; &#xff08;YOLOv8改进…
阅读更多...
Unity中Shader雾效在场景中的调节技巧

Unity中Shader雾效在场景中的调节技巧

文章目录 前言一、修改棋盘格Shader的Cull可以在属性面板控制1、在属性面板定义CullMode2、在SubShader中&#xff0c;使用CullMode3、这样就可以在不同剔除情况下使用棋盘格场景了 二、调节天际线颜色和雾融为一体1、在摄像机设置不渲染天空盒&#xff0c;渲染单一颜色2、采样…
阅读更多...
最新文章

Copyright @ 2022~2023