• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序调用相册和相机功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

官网里面的代码,使用chooseImage即可,count表示最多可以选择的图片张数, sizeType表示所选的图片的尺寸sourceType表示选择图片的来源,详情可以仔细阅读一下文档。

wx.chooseImage({
  count: 1,
  sizeType: [\'original\', \'compressed\'],
  sourceType: [\'album\', \'camera\'],
  success(res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

有很多功能设计的时候是这样的,点击按钮之后会从手机的底部弹出来一个询问按钮,询问是从手机里选择一张照片,还是调用摄像功能拍摄照片,这个时候其实只要多调用一下这个函数showActionSheet就可以了。

效果如下:点击按钮,选择图片进行替换,或者拍到一张照片,进行更换。

 

代码:

wxml:

<view class="container">
  <view>
    <button class="btn" bindtap="chooseimage">点击更换图片</button>
  </view>
 
  <view>
    <image src="{{img}}" catchTap="chooseImageTap" mode="aspectFit" class="img" />
  </view>
</view>

wxss:

.btn {
  margin: 140rpx;
}
 
.img {
  width: 100%;
  height: 480rpx;
}

js

Page({
  data: {
    img: \'../../images/1.jpg\'
  },
  onLoad: function() {},
 
  chooseWxImage: function(type) {
    var that = this;
    wx.chooseImage({
      sizeType: [\'original\', \'compressed\'],
      sourceType: [type],
      success: function(res) {
        console.log(res);
        that.setData({
     // tempFilePath可以作为img标签的src属性显示图片
          img: res.tempFilePaths[0],
        })
      }
    })
  },
 
  chooseimage: function() {
    var that = this;
    wx.showActionSheet({
      itemList: [\'从相册中选择\', \'拍照\'],
      itemColor: "#a3a2a2",
      success: function(res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage(\'album\')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage(\'camera\')
          }
        }
      }
    })
 
  },
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序使用相机发布时间:2022-07-18
下一篇:
小程序学习-支付以及调起摄像头扫描二维码发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap