306611439
306611439
  • 发布:2020-06-11 22:53
  • 更新:2020-06-11 22:53
  • 阅读:666

【报Bug】安卓真机在微信公众号中使用drawImage 图片没有按指定大小执行

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.5

浏览器平台: 微信内置浏览器

浏览器版本: 微信公众号

项目创建方式: HBuilderX

示例代码:

<template>
<view class="text-center padding">
<text class="text-bold text-xl">长按分享给您的好友</text>
<view class="canvas">

        <canvas class="poster-canvas" :style="[{ width:screenWidth+'px',height:screenHeight+'px'}]" canvas-id="firstCanvas">  

        </canvas>  

    </view>  

</view>  

</template>

<script>
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);          
    },  

}  

</script>

<style>
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;  
}  

</style>

操作步骤:

const context = uni.createCanvasContext('firstCanvas');
context.drawImage(imgPath,0,0,750,1334);

预期结果:

我希望图片可以在画布中按我指定的大小布局

实际结果:

实际只有我设想宽度的 2/1 高度只有 3/1的样子

bug描述:

通过微信浏览器执行以下代码时,图片没有绘制我给的大小,严重缩小了,通过安卓自带的浏览器没有此问题,换过很多手机了只要是安卓手机 都有这个问题。始终无法解决

2020-06-11 22:53 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复