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

news2025/6/8 5:53:08

        

目录

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%')
  }
}

        效果如下：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

工具篇--Spring-Cloud--feign 通过feign 接口完成文件的下载

工具篇--Spring-Cloud--feign 通过feign 接口完成文件的下载

文章目录 前言一、feign接口获取文件流程&#xff1a;二、文件获取实现2.1 引入jar&#xff1a;2.2 实现&#xff1a; 总结 前言 通常在spring-boot 项目中&#xff0c;对于文件的下载都是直接调用到对应的服务中&#xff0c;而不是通过feign 接口获取文件&#xff1b;有时我们…
阅读更多...
珠海盈致浅析MES生产管理系统的优点

珠海盈致浅析MES生产管理系统的优点

MES系统是用于管理和控制制造过程的信息化系统.它具有许多优点&#xff1a; 1. 生产过程可视化:MES系统提供实时的生产过程监控和数据收集,使管理人员能够清晰地了解生产线上的各个环节,包括设备状态、生产进度、质量指标等.这使得管理人员能够作出准确的决策并快速响应变化. 2…
阅读更多...
APPnium 自动化实践 ：第一步adb 连接手机

APPnium 自动化实践 ：第一步adb 连接手机

1. 下载安装 adb ,添加到环境变量。 ADB Download - Get the latest version of ADB and fastboot 2. 手机开启开发者模式 https://developer.huawei.com/consumer/cn/doc/quickApp-Guides/quickapp-open-developer-option-0000001137005543 3. adb 连接设备 【And…
阅读更多...
【C语言】字符串 和 ctype.h 中的函数 练习

【C语言】字符串 和 ctype.h 中的函数 练习

前面总结了有关字符串和ctype.h的文章&#xff0c;接下来就以几个例子来练习一下&#xff0c;以巩固之前的基础概念。注意&#xff1a;以下示例都有更简单更高效的解决方法&#xff0c;但本次仅以巩固基础为目的&#xff0c;所以方法可能稍作繁琐 Leetcode 344.反转字符串 编…
阅读更多...
HUAWEI WATCH 系列 eSIM 全新开通指南来了

HUAWEI WATCH 系列 eSIM 全新开通指南来了

HUAWEI WATCH 系列手表提供了eSIM硬件能力&#xff0c;致力为用户提供更便捷、高效的通信体验。但eSIM 业务是由运营商管理并提供服务的&#xff0c;当前运营商eSIM业务集中全面恢复&#xff0c;电信已经全面恢复&#xff0c;移动大部分省份已经全面放开和多号App开通方式&…
阅读更多...
自由DIY预约小程序源码系统：适用于任何行业+自由DIY你的界面布局+全新升级的UI+多用户系统 带安装部署教程

自由DIY预约小程序源码系统：适用于任何行业+自由DIY你的界面布局+全新升级的UI+多用户系统 带安装部署教程

随着移动互联网的普及&#xff0c;预约服务逐渐成为人们日常生活的一部分。从家政服务、医疗挂号到汽车保养&#xff0c;预约已经渗透到各个行业。然而&#xff0c;市面上的预约小程序大多功能单一&#xff0c;界面老旧&#xff0c;无法满足商家和用户的个性化需求。今天来给大…
阅读更多...
PPT如何画半圆和半圆弧

PPT如何画半圆和半圆弧

一、画半圆 这里总结为两种方法&#xff0c;具体如下&#xff1a; 1.形状剪除法 1.打开PPT&#xff0c;选择“插入”->“形状”&#xff0c;接着画一个正圆 2.在刚才画好的圆形一半的位置&#xff0c;画出一个矩形 3.按住Ctrl键&#xff0c;同时选中圆形和矩形两个图形…
阅读更多...
Pytest fixture 及 conftest详解！

Pytest fixture 及 conftest详解！

前言 fixture是在测试函数运行前后&#xff0c;由pytest执行的外壳函数。fixture中的代码可以定制&#xff0c;满足多变的测试需求&#xff0c;包括定义传入测试中的数据集、配置测试前系统的初始状态、为批量测试提供数据源等等。fixture是pytest的精髓所在&#xff0c;类似u…
阅读更多...
[排序算法] 如何解决快速排序特殊情况效率低的问题------三路划分

[排序算法] 如何解决快速排序特殊情况效率低的问题------三路划分

前言 在[C/C]排序算法 快速排序 (递归与非递归)一文中,对于快速排序的单趟排序一共讲了三种方法: hoare、挖坑法、双指针法 ,这三种方法实现的快速排序虽然在一般情况下效率很高,但是如果待排序数据存在大量重复数据,那这几种方法的效率就很低,而为了解决快速排序在这样特殊情况…
阅读更多...
面试题：你如何理解 System.out.println()?

面试题：你如何理解 System.out.println()?

文章目录 前言首先分析System源码&#xff1a;out源码分析println分析 前言 如果你能自己读懂System.out.println()&#xff0c;就真正了解了Java面向对象编程的含义。 面向对象编程即创建了对象&#xff0c;所有的事情让对象帮亲力亲为&#xff08;即对象调用方法&#xff09…
阅读更多...
CDD文件的制作

CDD文件的制作

CDD文件 1、核查诊断调查表2、制作CDD3、Diva测试 1、核查诊断调查表 ECU级别&#xff1a;包括文档相关、控制器的诊断ID和时间参数&#xff0c;支持的服务&#xff0c;DTC、DID、刷写流程。 2、制作CDD 2.1、cddt编辑思路&#xff08;每一步都要根据调查表进行操作&#xf…
阅读更多...
AI：112-基于卷积神经网络的美食图片识别与菜谱推荐

AI：112-基于卷积神经网络的美食图片识别与菜谱推荐

🚀点击这里跳转到本专栏，可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航！ 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码，详细讲解供…
阅读更多...
基于Java SSM框架实现四六级在线考试系统项目【项目源码+论文说明】

基于Java SSM框架实现四六级在线考试系统项目【项目源码+论文说明】

基于java的SSM框架实现四六级在线考试系统演示 摘要 随着现在网络的快速发展&#xff0c;网上管理系统也逐渐快速发展起来&#xff0c;网上管理模式很快融入到了许多学院的之中&#xff0c;随之就产生了“四六级在线考试系统”&#xff0c;这样就让四六级在线考试系统更加方便…
阅读更多...
修改选择框el-select样式,显示及下拉样式

修改选择框el-select样式,显示及下拉样式

修改选择框el-select样式,显示及下拉样式 .el-input__inner {background: rgba(25, 126, 195, 0.2);border: none;color: #fff; }.el-select-dropdown {background: rgba(19, 73, 104, 0.79);border: 2px solid #48e3ff;border-radius: 0; }.el-popper .popper__arrow {display…
阅读更多...
随机森林，Random Forests Classifiers/Regressor

随机森林，Random Forests Classifiers/Regressor

目录 介绍&#xff1a; 一、 Random Forests Classifiers&#xff08;离散型&#xff09; 1.1 数据处理 1.2建模 1.3特征值权值分析 1.4 特征值的缩减 二、Random Forests Regressor&#xff08;连续型&#xff09; 2.1数据处理 2.2建模 2.3调参 介绍&#xff1a; …
阅读更多...
灵芝，到2025年有望达到9.2亿美元

灵芝，到2025年有望达到9.2亿美元

灵芝是一种传统的药食两用菌&#xff0c;其具有丰富的营养成分和医疗价值&#xff0c;因此备受关注。全球市场分析 从全球市场来看&#xff0c;近年来灵芝的市场需求持续增长。据估计&#xff0c;2019年全球灵芝市场规模为4.1亿美元&#xff0c;到2025年有望达到9.2亿美元。市场…
阅读更多...
山西电力市场日前价格预测【2024-01-05】

山西电力市场日前价格预测【2024-01-05】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-05&#xff09;山西电力市场全天平均日前电价为259.10元/MWh。其中&#xff0c;最高日前电价为363.99元/MWh&#xff0c;预计出现在18:00。最低日前电价为0.00元/MWh&#xff0c;预计出…
阅读更多...
跨模态检索论文阅读：Plug-and-Play Regulators for Image-Text Matching用于图像文本匹配的即插即用调节器

跨模态检索论文阅读：Plug-and-Play Regulators for Image-Text Matching用于图像文本匹配的即插即用调节器

Plug-and-Play Regulators for Image-Text Matching用于图像文本匹配的即插即用调节器 利用细粒度的对应关系和视觉语义比对在图像-文本匹配中显示出巨大的潜力。通常&#xff0c;最近的方法首先使用跨模态注意力单元来捕捉潜在的区域-单词交互&#xff0c;然后整合所有比对以获…
阅读更多...
如何使用VsCode编译C语言？

如何使用VsCode编译C语言？

下载VsCode (1) 解压到D盘跟目录 (2) 运行[vscode.reg]&#xff0c;注册右键菜单 (3) 进入[pack]文件夹&#xff0c;运行[install.bat]。安装基本插件。 下载mingw32 (1) 解压任意目录 (2) 我的电脑右键–高级系统设置–高级–环境变量–系统变量–Path(双击)–空白行(双击)–…
阅读更多...
Arduino使用PWM驱动TB6612控制直流减速电机

Arduino使用PWM驱动TB6612控制直流减速电机

目录 一、PWM介绍 二、硬件介绍 1、设备型号 2、接线图 3、TB6612控制电机转动逻辑 &#xff08;1&#xff09;控制逻辑 &#xff08;2&#xff09;真值表 4、G37系列JGB-520直流减速电机 三、测试程序 1、电机正反转控制 2、编码器脉冲读取 &#xff08;1&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023