这次给大家带来小程序使用.getimageinfo()获取图片信息,小程序使用.getimageinfo()获取图片信息的注意事项有哪些,下面就是实战案例,一起来看一下。
本文实例为大家分享了android九宫格图片展示的具体代码,供大家参考,具体内容如下
一.知识点
二.列子
(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, // 默认9
sizetype: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourcetype: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempfilepath可以作为img标签的src属性显示图片
_this.setdata({
tempfilepaths:res.tempfilepaths
})
wx.getimageinfo({
src: res.tempfilepaths[0],
success: function (res) {
_this.setdata({
imgwidth:res.width,
imgheight:res.height,
})
}
})
}
})
}
})
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
怎样开发微信小程序获取用户个人信息
vue2.5与element ui的组件分页功能实现
微信小程序的多文件下载封装使用
jquery动态添加和遍历option的方法
以上就是小程序使用.getimageinfo()获取图片信息的详细内容。
