微信小程序拍照和相册选取图片

最新推荐文章于 2026-04-19 13:06:27 发布

原创最新推荐文章于 2026-04-19 13:06:27 发布 · 936 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在微信小程序中进行布局设置、应用样式，并实现从相机和相册选择图片的功能，最终展示图片并保存。内容包括布局设计、图片路径获取及图片显示的相关代码操作。

布局：

<!--pages/camera/camera.wxml-->
<view 
class="tui-menu-list" 
id="view1" 
style="display:flex;flex-direction:space-between">
	<button 
		id="b1" 
		size="mini"
		type="primary" 
		bindtap="chooseimage">
		获取图片
	</button>
	<button 
		id="b2" 
		size="mini"
		type="primary"
		bindtap="savePhone">
		保存
	</button>
</view>

<image
	 src="{{tempFilePaths}}" 
	 catchtap="chooseImageTap"
	 mode="aspectFit" 
	 style="width:100%;height:400px;background-color:#ffffff;">
</image>

样式：

/* pages/camera/camera.wxss */

.view1 {
  height: 25px
}

.tui-menu-list {
  display: flex;
  flex-direction: row;
  margin: 20rpx;
  padding: 20rpx;
}

获取图片路径，显示图片和保存

// pages/camera/camera.js
Page({

  data: {
    tempFilePaths: 'http://pic2.cxtuku.com/00/01/08/b207004f7104.jpg'
  },
  chooseimage: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册选择', '拍照'],
      itemColor: "#CED63A",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },

  chooseWxImage: function (type) {
    var that = this
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      count: 1,
      success: function (res) {
        console.log(res)
        that.setData({
          tempFilePaths: res.tempFilePaths[0],
        })
      }
    })
  },
  savePhone: function () {
    wx.getImageInfo({
      src: this.data.tempFilePaths,
      success: function (res) {
        var path = res.path
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function () {
            wx.showToast({
              title: '保存成功',
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
        })
      }
    })
  }
})

效果图：