微信小程序wx.getImageInfo()如何獲取圖片信息
本文實(shí)例為大家分享了Android九宮格圖片展示的具體代碼,供大家參考,具體內(nè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, }) } }) } }) } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 拷貝節(jié)點(diǎn)cloneNode()使用介紹
這篇文章主要介紹了javascript 節(jié)點(diǎn)操作拷貝節(jié)點(diǎn)cloneNode()的使用,需要的朋友可以參考下2014-04-04layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁(yè)
本篇文章通過實(shí)例給大家分享了layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁(yè)的詳細(xì)方法,以及效果展示,有需要的朋友可以跟著參考學(xué)習(xí)下。2018-04-04靈活使用數(shù)組制作圖片切換js實(shí)現(xiàn)
這篇文章主要介紹了靈活使用數(shù)組制作圖片切換效果,js實(shí)現(xiàn)圖片切換特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07JavaScript實(shí)現(xiàn)給對(duì)象添加一個(gè)只讀屬性
這篇文章主要為大家介紹了JavaScript如何給對(duì)象加一個(gè)只讀屬性,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)資料,小編認(rèn)為非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法
這篇文章主要給大家分享的是JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法,有 typeof、instanceof、constructor、Object.prototype.toString.call(),下面文章詳細(xì)介紹內(nèi)容,需要的小伙伴可以參考一下2022-01-01JS實(shí)現(xiàn)簡(jiǎn)單省市二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單的省市二級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼,原理是綁定數(shù)據(jù),然后動(dòng)態(tài)的修改數(shù)據(jù),從而實(shí)現(xiàn)動(dòng)態(tài)樣式的改變而已,需要的朋友可以參考下2017-02-02簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換
這篇文章主要介紹了簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12