小程序——图片

吴声子夜歌2026-03-11 23:44

图片

    • [1、wx.chooseImage(Object object)](#1、wx.chooseImage(Object object))
    • [2、wx.getImageInfo(Object object)](#2、wx.getImageInfo(Object object))
    • [3、wx.previewImage(Object object)](#3、wx.previewImage(Object object))
    • [4、wx.saveImageToPhotosAlbum(Object object)](#4、wx.saveImageToPhotosAlbum(Object object))
    • [5、wx.previewMedia(Object object)](#5、wx.previewMedia(Object object))
    • [6、wx.editImage(Object object)](#6、wx.editImage(Object object))
    • [7、wx.cropImage(Object object)](#7、wx.cropImage(Object object))
    • [8、wx.compressImage(Object object)](#8、wx.compressImage(Object object))
    • [9、wx.chooseMessageFile(Object object)](#9、wx.chooseMessageFile(Object object))

1、wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。

参数：Object object

属性 类型 默认值 必填 说明
count number 9 否 最多可以选择的图片张数
sizeType Array.<string> ['original', 'compressed'] 否 所选的图片的尺寸，可选参数如下： original:原图 compressed:压缩图
sourceType Array.<string> ['album', 'camera'] 否 选择图片的来源，可选参数如下： album:从相册选图 camera:使用相机
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFilePaths Array.<string> 图片的本地临时文件路径列表 (本地路径)
tempFiles Array.<Object> 图片的本地临时文件列表，可选参数如下 path:本地临时文件路径 (本地路径) size:本地临时文件大小，单位 B
js 复制代码 
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

2、wx.getImageInfo(Object object)

获取图片信息。网络图片需先配置download域名才能生效。

参数：Object object

属性 类型 默认值 必填 说明
src string 是 图片的路径，支持网络路径、本地路径、代码包路径
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
width number 图片原始宽度，单位px。不考虑旋转。
height number 图片原始高度，单位px。不考虑旋转。
path string 图片的本地路径
orientation string 拍照时设备方向，可选值为： up:默认方向（手机横持拍照），对应 Exif 中的 1。或无 orientation 信息。 up-mirrored:同 up，但镜像翻转，对应 Exif 中的 2 down:旋转180度，对应 Exif 中的 3 down-mirrored:同 down，但镜像翻转，对应 Exif 中的 4 left-mirrored:同 left，但镜像翻转，对应 Exif 中的 5 right:顺时针旋转90度，对应 Exif 中的 6 right-mirrored:同 right，但镜像翻转，对应 Exif 中的 7 left:逆时针旋转90度，对应 Exif 中的 8
type string 图片格式，可选值如下： unknown:未知格式 jpeg:jpeg压缩格式 png:png压缩格式 gif:gif压缩格式 tiff:tiff压缩格式
js 复制代码 
wx.getImageInfo({
  src: 'images/a.jpg',
  success (res) {
    console.log(res.width)
    console.log(res.height)
  }
})

wx.chooseImage({
  success (res) {
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success (res) {
        console.log(res.width)
        console.log(res.height)
      }
    })
  }
})

示例：

html 复制代码 
<view class="container">
  <view>
    <button bind:tap="choose">请选择图片</button>
  </view>
  <view>图片类型：{{type}}</view>
  <view>图片height：{{height}}</view>
  <view>图片width：{{width}}</view>
</view>
js 复制代码 
Page({
  data: {
    type: '',
    height: null,
    width: null
  },
  onLoad: function() {

  },
  choose: function(e) {
    wx.chooseImage({
      success: (res)=>{
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: (res)=>{
            this.setData({
              type: res.type,
              height: res.height,
              width: res.width
            })
          }
        })
      }
    })
  }
})

3、wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

参数：Object object

属性 类型 默认值 必填 说明
urls Array.<string> 是 需要预览的图片链接列表。2.2.3 起支持云文件ID。
showmenu boolean true 否 是否显示长按菜单。
current string urls 的第一张 否 当前显示图片的链接
referrerPolicy string no-referrer 否 origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
html 复制代码 
<view class="container">
  <scroll-view scroll-y="true" class="show-area" style="height:{{scrollHeight}}px;">
    <view class="photo-list" wx:for="{{photoList}}">
      <image id="{{item}}" bind:tap="previewPhoto" style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx;" mode="aspectFill" src="{{item}}"/>
    </view>
  </scroll-view>
</view>
js 复制代码 
Page({
  data: {
    scrollHeight: 569,
    imageWidth: 250,
    imageHeight: 250,
    photoList: [
      "https://img1.baidu.com/it/u=857081394,2327693560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=675",
      "https://img1.baidu.com/it/u=1233280200,2290970389&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1731",
      "https://img2.baidu.com/it/u=3486713072,3743227353&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
    ]
  },
  onLoad: function() {

  },
  previewPhoto: function(e) {
    wx.previewImage({
      urls: this.data.photoList,
      success: (res)=>{

      }
    })
  }
})

4、wx.saveImageToPhotosAlbum(Object object)

保存图片到系统相册。

参数：Object object

属性 类型 默认值 必填 说明
filePath string 是 图片文件路径，可以是临时文件路径或永久文件路径 (本地路径) ，不支持网络路径
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

wx.savelmage ToPhotosAlbum()接口不能直接对网络图片进行保存操作，所以本例中先使用了wx.downloadFile()接口下载网络图片到本地形成临时文件

e.tempFilePath,然后再把e.tempFilePath作为wx.savelmage ToPhotosAlbum()接口的下载参数。

html 复制代码 
<view class="container">
  <scroll-view scroll-y="true" class="show-area" style="height:{{scrollHeight}}px;">
    <view class="photo-list" wx:for="{{photoList}}">
      <image id="{{item}}" bind:tap="saveImage" style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx;" mode="aspectFill" src="{{item}}"/>
    </view>
  </scroll-view>
</view>
js 复制代码 
Page({
  data: {
    scrollHeight: 569,
    imageWidth: 250,
    imageHeight: 250,
    photoList: [
      "https://img1.baidu.com/it/u=857081394,2327693560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=675",
      "https://img1.baidu.com/it/u=1233280200,2290970389&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1731",
      "https://img2.baidu.com/it/u=3486713072,3743227353&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
    ]
  },
  onLoad: function() {

  },
  saveImage: function(e) {
    var url = e.currentTarget.id
    wx.downloadFile({
      url: url,
      success: (res)=>{
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: (data)=>{
            wx.showToast({
              title: '下载成功',
            })
          }
        })
      }
    })
  }
})

5、wx.previewMedia(Object object)

预览图片和视频。

参数：Object object

属性 类型 默认值 必填 说明
sources Array.<Object> 是 需要预览的资源列表
current number 0 否 当前显示的资源序号
showmenu boolean true 否 是否显示长按菜单。
referrerPolicy string no-referrer 否 origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

其中sources结构如下：

结构属性 类型 默认值 必填 说明
url String 是 图片或视频的地址
type String image 否 资源的类型，默认为图片，可选值如下 image:图片 video:食品
poster string 否 视频的封面图片

6、wx.editImage(Object object)

编辑图片接口。

参数：Object object

属性 类型 默认值 必填 说明
src string 是 图片路径，图片的路径，支持本地路径、代码包路径
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFilePath string 编辑后图片的临时文件路径 (本地路径)
js 复制代码 
wx.editImage({
  src: '', // 图片路径
})

7、wx.cropImage(Object object)

裁剪图片接口。

参数：Object object

属性 类型 默认值 必填 说明
src string 是 图片路径，图片的路径，支持本地路径、代码包路径
cropScale string 是 裁剪比例，可选值如下： 16:9 9:16 4:3 3:4 5:4 4:5 1:1
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFilePath string 编辑后图片的临时文件路径 (本地路径)
js 复制代码 
wx.cropImage({
  src: '', // 图片路径
  cropScale: '16:9', // 裁剪比例
})

8、wx.compressImage(Object object)

压缩图片接口，可选压缩质量。iOS 仅支持压缩 JPG 格式图片。

参数：Object object

属性 类型 默认值 必填 说明
src string 是 图片路径，图片的路径，支持本地路径、代码包路径
quality number 80 否 压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）。
compressedWidth number 否 压缩后图片的宽度，单位为px，若不填写则默认以compressedHeight为准等比缩放。
compressedHeight number 否 压缩后图片的高度，单位为px，若不填写则默认以compressedWidth为准等比缩放
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFilePath string 编辑后图片的临时文件路径 (本地路径)
js 复制代码 
wx.compressImage({
  src: '', // 图片路径
  quality: 80 // 压缩质量
})

9、wx.chooseMessageFile(Object object)

从客户端会话选择文件。

参数：Object object

属性 类型 默认值 必填 说明
count number 是 最多可以选择的文件个数，可以 0～100
type string 'all' 否 所选的文件的类型 all:从所有文件选择 video:只能选择食品文件 image:只能选择图片文件 file:可以选择除了图片和视频之外的其它的文件
extension Array.<string> 否 根据文件拓展名过滤，仅 type==file 时有效。每一项都不能是空字符串。默认不过滤。
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success回调函数：

参数：Object res

属性 类型 说明
tempFiles Array.<Object> 返回选择的文件的本地临时文件对象数组

tempFIles结构如下：

结构属性 类型 说明
path string 本地临时文件路径 (本地路径)
size number 本地临时文件大小，单位 B
name string 选择的文件名称
type string 选择的文件类型，可选值如下： video:选择了视频文件 image:选择了图片文件 file:选择了图片和视频的文件
time number 选择的文件的会话发送时间，Unix时间戳，工具暂不支持此属性
js 复制代码 
wx.chooseMessageFile({
  count: 10,
  type: 'image',
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFiles
  }
})
相关推荐
杰建云1672 小时前
门店小程序是否有必要做
小程序·小程序搭建
Greg_Zhong2 小时前
小程序中页面和组件的区别
小程序
小马_xiaoen2 小时前
常规优化已用尽？小程序体积深层次优化实战！！！
前端·小程序·uniapp
2501_915918412 小时前
iOS App HTTPS 抓包工具，代理抓包和数据线直连 iPhone 抓包的流程
android·ios·小程序·https·uni-app·iphone·webview
TE-茶叶蛋2 小时前
从零实现H5 表格协同编辑：Yjs + WebSocket 实战
websocket·小程序·excel
吴声子夜歌3 小时前
小程序——跳转API
服务器·前端·小程序
qq_12498707533 小时前
基于springboot的个性化服装搭配推荐小程序（源码+论文+部署+安装）
spring boot·后端·spring·微信小程序·小程序·毕业设计·毕业设计源码
吴声子夜歌3 小时前
小程序——转发API
java·前端·小程序
CHU7290353 小时前
宠物寄养小程序前端设计：以用户为中心，构建温暖贴心的服务生态
小程序·宠物
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录05OpenClaw 飞书机器人不回复消息？3 小时踩坑总结06Window 10部署openclaw报错node.exe : npm error code 12807OpenClaw macOS 完整安装与本地模型配置教程（实战版）08npm-error code 128问题解决方法09OpenClaw 接入 QQ Bot 完整实践指南10得物前端部门，没了