商城系統(tǒng) 注冊

小程序獲取本地相冊及開發(fā)拍照功能

2018-02-28|HiShop
導讀:圖片類小程序中,相冊獲取圖片授權,使用相機拍照,本地圖片上傳都是最基本的功能,下面是開發(fā)授權本地相冊及拍照功能的開發(fā)步驟。...

 

  圖片類小程序中,相冊獲取圖片授權,使用相機拍照,本地圖片上傳都是最基本的功能,下面是開發(fā)授權本地相冊及拍照功能的開發(fā)步驟。

小程序獲取本地相冊及開發(fā)拍照功能
 

小程序上傳圖片,獲取本地相冊相關
小程序開發(fā)上傳圖片如何實現(xiàn) 保存圖片到手機 相機組件控制 wx.createCameraContext

 小程序獲取本地相冊開發(fā)文檔:

 1.index.wxml

<!--index.wxml-->
<button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button>
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>

  2.index.js

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    tempFilePaths: ''
  },
  onLoad: function () {
  },
  chooseimage: function () {
    var _this = this;
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片
        _this.setData({
          tempFilePaths:res.tempFilePaths
        })
      }
    })
  }
})
 

  API 說明:

小程序獲取本地相冊及開發(fā)拍照功能

  這里說說sourcetype.默認是從相冊獲取和使用相機拍照,跟微信現(xiàn)在選擇圖片的界面一樣,第一格是拍照,后面的是相冊照片.

  這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務器,需要用到另一個API.

  示例代碼:
 

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'http://example.weixin.qq.com/upload', //僅為示例,非真實的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。

更多小程序開發(fā)案例,盡在:http://zytcm.com.cn/xiaocx/kaifa.html


電話咨詢 預約演示 0元開店