您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)小程序使用.getImageInfo()獲取圖片信息的示例的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
一.知識點
二.列子
(1).加載時
<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(){ // 頁面渲染完成 var _this = this; wx.getImageInfo({ src: _this.data.tempFilePaths, success: function (res) { _this.setData({ imgwidth:res.width, imgheight:res.height, }) } }) } })
(2).上傳圖片時
<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'], // 可以指定來源是相冊還是相機(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)于“小程序使用.getImageInfo()獲取圖片信息的示例”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。