1. 程式人生 > 程式設計 >微信小程式實現拍照和相簿選取圖片

微信小程式實現拍照和相簿選取圖片

本文例項為大家分享了微信小程式實現拍照和相簿選取圖片的具體程式碼,供大家參考,具體內容如下

佈局:

<!--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/http://www.cppcns.comcamera.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.tapiXIis
Index == 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.saveImageT程式設計客棧
oPhotosAlbum({ filePath: path,success: function () { wx.showToast({ title: '儲存成功',}) },fail: function (res) { wx.showToast({ title: '儲存失敗',icon: 'none' }) } }) } }) } })

效果圖:

微信小程式實現拍照和相簿選取圖片

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。