【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序使用.getImageInfo()獲取圖片信息的示例

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序使用.getImageInfo()獲取圖片信息的示例

這篇文章給大家分享的是有關(guān)小程序使用.getImageInfo()獲取圖片信息的示例的內(nèi)容。在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過(guò)來(lái)看看吧。一.知識(shí)點(diǎn)二.列子(1).加載時(shí)<view

class="zn-uploadimg">

<image

src="{{tempFilePaths}}"

mode="aspecFill"

style="width:

100%;

height:

450rpx"

/>

<text>圖片的大?。簕{imgwidth}}px*{{imgheight}}px</text>

</view>var

app

=

getApp()

Page({

data:

{

tempFilePaths:

'../uploads/foods.jpg',

imgwidth:0,

imgheight:0,

},

onReady:function(){

//

頁(yè)面渲染完成

var

_this

=

this;

wx.getImageInfo({

src:

_this.data.tempFilePaths,

success:

function

(res)

{

_this.setData({

imgwidth:res.width,

imgheight:res.height,

})

}

})

}

})(2).上傳圖片時(shí)<view

class="zn-uploadimg">

<button

type="primary"bindtap="chooseimage">獲取圖片</button>

<image

src="{{tempFilePaths}}"

mode="aspecFill"

style="width:

100%;

height:

450rpx"/>

<text>圖片的大?。簕{imgwidth}}px*{{imgheight}}px</text>

</view>.zn-uploadimg{

padding:1rem;

}

.zn-uploadimg

image{

margin:1rem

0;

}var

app

=

getApp()

Page({

data:

{

tempFilePaths:

'',

imgwidth:0,

imgheight:0,

},

/**

*

上傳圖片

*/

chooseimage:

function

()

{

var

_this

=

this;

wx.chooseImage({

count:

1,

//

默認(rèn)9

sizeType:

['original',

'compressed'],

//

可以指定是原圖還是壓縮圖，默認(rèn)二者都有

sourceType:

['album',

'camera'],

//

可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有

success:

function

(res)

{

//

返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片

_this.setData({

tempFilePaths:res.tempFilePaths

})

wx.getImageInfo({

src:

res.tempFilePaths[0],

success:

function

(res)

{

_this.setData({

imgwidth:res.width,

imgheight:res.height,

})

}

})

}

})

}

})感謝各位的閱讀！關(guān)于