自己搭建云服务平台/英语seo
产品分类：
uniapp/H5
PC开发环境操作系统：
Windows
PC开发环境操作系统版本号：
win10
HBuilderX类型：
正式
HBuilderX版本号：
2.7.5
浏览器平台：
微信内置浏览器
浏览器版本：
微信公众号
项目创建方式：
HBuilderX
示例代码：
长按分享给您的好友
export default {
data() {
return {
PosterPath: uni.getStorageSync('defule_poster'),
qrcodeSrc:'',
imgPath:"/static/1.jpg",//保存图片的路径
screenHeight:1334,
screenWidth:750,
avatarUrl:'',
test:'0',
isPath:false
};
},
onLoad(options){
const context = uni.createCanvasContext('firstCanvas');
context.drawImage(imgPath,0,0,750,1334);
},
}
page{
background-color: #F1F1F1;
}
.page-foot {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 30;
background-color: #282828;
}
.tips {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
background: #ffffff;
font-size: 16px;
font-weight: 500;
color: #dd5544;
}
.posterImg {
position: fixed;
left: 10;
top: 10;
width: 90%;
height: 85%;
/* vertical-align: middle; */
}
.poster-canvas {
position: fixed;
right: 100vw;
bottom: 100vh;
}
.canvas{
padding: 20px;
display: flex;
justify-content: center;
}
.bottom{
padding: 20upx 0;
width: 100%;
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
background-color:#ffffff;
}
.bottom view:first-child{
padding: 20upx 60upx;
background:#FF8A00;
border-radius:44upx;
font-size:30upx;
color:#FFFFFF;
}
.bottom view:last-child{
padding: 20upx 60upx;
background:#FF5256;
border-radius:44upx;
font-size:30upx;
color:#FFFFFF;
}
.imglist{
width:100%;
padding: 20upx 0upx;
overflow:auto;
position: absolute;
bottom: 0px;
background-color: #ffffff;
}
.imglist view{
display:flex;
justify-content:space-around;
}
.imglist image{
width:200upx;
height:200upx;
border-radius: 10upx;
}
操作步骤：
const context = uni.createCanvasContext('firstCanvas');
context.drawImage(imgPath,0,0,750,1334);
预期结果：
我希望图片可以在画布中按我指定的大小布局
实际结果：
实际只有我设想宽度的 2/1 高度只有 3/1的样子