欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

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

程序员文章站 2022-07-04 10:34:47
本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下布局:

本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下

布局:

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

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。