图片API

本文编辑：  大妖怪浏览 8428 1 版权所有，严禁转载

接口说明:

接口用法：

wxml
index.wxml

<import src="../template/imgtpl"/>
<button bindtap="chooseImg">上传图片</button>
<block wx:for="{{tempFilePaths}}">
  <view>
    <template is="imgItem" data="{{item}}"/>
    <button bindtap="getImageInfo" id="{{item}}">获取图片信息</button>
    <text>{{info}}</text>
  </view>
</block>

imgtpl.wxml

<template name="imgItem">
    <image src="{{item}}"></image>
</template>

js

chooseImg: function(){
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.setData({
          tempFilePaths:res.tempFilePaths
        })
      }
    })
  },
  getImageInfo:function(e){
    var imgUrl = e.currentTarget.id;
    var that = this;
    wx.getImageInfo({
      src: imgUrl,
      success: function (res) {
        that.setData({
          info:"图片长度:"+res.height+"
图片宽度:"+res.width
        })
      }
    })
  }

wxml

<image bindtap="previewImage"     id="http://www.wxappclub.com/upload/column/c413eaf4-bfad-43bd-820b-538d5c7dcfd0.png" src="http://www.wxappclub.com/upload/column/c413eaf4-bfad-43bd-820b-538d5c7dcfd0.png"></image>

js

previewImage:function(e){
    var imgUrl = e.currentTarget.id;
    wx.previewImage({
    current: imgUrl, // 当前显示图片的http链接
    urls: [imgUrl] // 需要预览的图片http链接列表
    })
}

主要方法：

【wx.chooseImage】：【从本地相册选择图片或使用相机拍照。】

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
  }
})

【wx.previewImage】：【预览图片】

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

【wx.getImageInfo】：【获取图片信息】

success返回参数说明：

wx.getImageInfo({
  src: 'images/a.jpg',
  success: function (res) {
    console.log(res.width)
    console.log(res.height)
  }
})

wx.chooseImage({
  success: function (res) {
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success: function (res) {
        console.log(res.width)
        console.log(res.height)
      }
    })
  }
})