
<view>
<image src='{{upload}}' mode='widthFix' bindtap='uploadImg'></image>
</view>
js
page({
data:{
uploadImg:'',
}
uploadImg:function(){
var that = this
wxchooseImage({
count: 1,//表示只能穿一张
thatsetData({
uploadImg: restempFilePaths,
})
})
}
})
//可以拍照 也可上传
wxml部分:
<image src="/images/xwbannerpng" mode="widthFix" bindload="imageLoad" style="width:{{ images[index]width }}rpx; height:{{ images[index]height }}rpx;" ></image>
wxss部分:
image{
width:100%;
}
js部分:
Page({
data: {
images:{}
},
imageLoad: function(e){
var $width=edetailwidth, //获取真实宽度
$height=edetailheight,
ratio=$width/$height; //的真实宽高比例
var viewWidth=718, //设置显示宽度,左右留有16rpx边距
viewHeight=718/ratio; //计算的高度值
var image=thisdataimages;
//将的datadata-index作为image对象的key,然后存储的宽高值
image[etargetdatasetindex]={
width:viewWidth,
height:viewHeight
}
thissetData({
images:image
})
},
})
小程序的image组件提供了缩放的模式选择,默认的scaletofill就是设置固定的宽高模式比较少使用,更多的是需要自适应宽高的情况。
widthfix多适用于通栏,width:100%,高度不同设备自适应的情况。此时会按照原图比列自动缩放高度,常用于轮播图。
aspectFill多用用在固定大小的范围内显示,区别是可以保留一边,除去通栏外一般用处较多。
个别情况下需要始终居中缩放,多用在用户头像圆环之类,一般留在保留中心内容的部分,文档中暂没,需要单独设置。
以上就是关于微信小程序 拍照上传后台怎么写全部的内容,包括:微信小程序 拍照上传后台怎么写、小程序的image怎么自适应大小、小程序图片自适应缩放设置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)