<!--pages/image/image.wxml-->
<text>這是一個image元件</text>
<!-- 
<image src='../../images/0.jpg'></image>
<image src='/images/0.jpg'></image> -->
 <view class="section section_gap" wx:for="{{list}}" wx:for-item="item">
    <view class="section__title">{{item.text}}</view>
    <view class="section__ctn">
      <image  bindtap="preview" style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" data-src="{{src}}" src="{{src}}"></image>
    </view>
  </view>
 

// pages/image/image.js
Page({

  /**
   * 頁面的初始資料
 */
  data: {
    list: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來'
    }, {
      mode: 'top',
      text: 'top：不縮放圖片，只顯示圖片的頂部區域'
    }, {
      mode: 'bottom',
      text: 'bottom：不縮放圖片，只顯示圖片的底部區域'
    }, {
      mode: 'center',
      text: 'center：不縮放圖片，只顯示圖片的中間區域'
    }, {
      mode: 'left',
      text: 'left：不縮放圖片，只顯示圖片的左邊區域'
    }, {
      mode: 'right',
      text: 'right：不縮放圖片，只顯示圖片的右邊邊區域'
    }, {
      mode: 'top left',
      text: 'top left：不縮放圖片，只顯示圖片的左上邊區域'
    }, {
      mode: 'top right',
      text: 'top right：不縮放圖片，只顯示圖片的右上邊區域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區域'
    }],
    src: '/images/0.jpg'
  } ,


  preview(e){

    console.log(e.target.dataset.src);

    var current = e.target.dataset.src;

    wx.previewImage({
      current: current, // 當前顯示圖片的http連結
      urls: ['https://pic4.zhimg.com/80/v2-092ca55bea745e0af303e199fe9365a9_hd.jpg','https://pic2.zhimg.com/80/v2-41b41d2cec6dd5933760b42ee62e7d88_hd.jpg'] // 需要預覽的圖片http連結列表
    })
  }
})
 

<view class="page-body">
  <view class="page-body-wrapper">
    <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <view class="btn-area">
      <button type="primary" bindtap="takePhoto">拍照</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="startRecord">開始錄影</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="stopRecord">結束錄影</button>
    </view>
    <view class="preview-tips">預覽</view>
    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
    <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
  </view>
</view>
 

Page({
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  startRecord() {
    this.ctx.startRecord({
      success: (res) => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

<view class="page">
  
  <view class="page__bd">
    <view class="section section_gap">
      <audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
    </view>
  </view>

  <view class="section section_gap">
    
    <view class="body-view">
      <button bindtap="playAudio">播放</button>
    </view>
  </view>

  <view class="section section_gap">
   
    <view class="body-view">
      <button bindtap="pauseAudio">暫停</button>
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">進度</text>
    <view class="body-view">
      <slider bindchange="timeSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">播放速率</text>
    <view class="body-view">
      <slider min="1" max="10" bindchange="playbackRateSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
  </view>
</view>

Page({
  data: {
    current: {
      poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
      name: '此時此刻',
      author: '許巍',
      src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
    },
    audioAction: {
      method: 'pause'
    }
  },
  audioPlayed: function (e) {
    console.log('audio is played')
  },

  //獲取音訊播放的總時間
  audioTimeUpdated: function (e) {

    this.duration = e.detail.duration;     /*獲取音訊的播放時間  s*/
  },

  timeSliderChanged: function (e) {

    if (!this.duration)
      return;

    var time = this.duration * e.detail.value / 100;    //總時間誠意百分比

    this.setData({         //改變音訊的播放時間
      audioAction: {
        method: 'setCurrentTime',
        data: time
      }
    });
  },
  playbackRateSliderChanged: function (e) {    /*改變音訊播放的速率*/

    this.setData({
      audioAction: {
        method: 'setPlaybackRate',
        data: e.detail.value
      }
    })

  },

  playAudio: function () {
    this.setData({
      audioAction: {
        method: 'play'
      }
    });
  },
  pauseAudio: function () {
    this.setData({
      audioAction: {
        method: 'pause'
      }
    });
  }
})