9***@qq.com
9***@qq.com
  • 发布:2022-02-11 10:41
  • 更新:2022-02-23 11:38
  • 阅读:1003

【报Bug】HBuilderX升级到3.3.11版本, ios系统,所有型号,canvas生成不了海报,升级之前是正常的

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Windows

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

HBuilderX版本号: 3.3.11

示例代码:
<template>  
    <view class="team_poster">  
        <view v-if="showLoading">  
            <loading></loading>  
        </view>  
        <view class="new_btn" @click="createPoster()">生成海报</view>  

        <view class="poster" @touchmove.stop.prevent="" v-if="isShowPoster">  
            <canvas canvas-id="imgCanvas" id="imgCanvas"></canvas>  

            <view class="img_box">  
                <image :src="imageUrl" class="img" :show-menu-by-longpress="true"></image>  
            </view>  
            <!-- #ifdef APP-PLUS -->  
            <view class="new_btn" @click="bankImg()">保存到相册</view>  
            <!-- #endif  -->  
            <!-- #ifndef APP-PLUS -->  
            <view class="tips">长按保存海报</view>  
            <!-- #endif  -->  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                preUrl: this.$picUrl,  
                showLoading: false,  
                imgSrcArr : [],  
                localImageArray : [],  
                count : 0,  
                imageUrl: '',  
                isShowPoster: false,  
                invitedData:{}  
            }  
        },  
        methods: {  
            // 保存图片  
            bankImg() {  
                //只在app端  
                // #ifdef APP-PLUS  
                if (this.imageUrl) {  
                    uni.saveImageToPhotosAlbum({  
                        filePath: this.imageUrl, //传入临时地址  
                        success: ()=> {  
                            uni.showToast({  
                                title: '保存成功',  
                                duration: 2000  
                            });  
                        },  
                        fail: ()=> {  
                            uni.showToast({  
                                title: '保存失败',  
                                icon: 'error',  
                                duration: 2000  
                            });  
                        }  
                    })  
                } else {  
                    uni.showToast({  
                        title: '请刷新重试',  
                        duration: 2000,  
                        icon: 'none'  
                    });  
                }  
                // #endif  
            },  
            // 生成海报  
            async createPoster(){  
                this.showLoading = true;  
                try{  
                    if(true){  
                        this.isShowPoster = true;  
                        this.imgSrcArr = [  
                                                       'https://stage-dachun-pic.xadazhihui.cn/image/dc_5099031000176 - .jpg',  
                                                       'https://stage-dachun-pic.xadazhihui.cn/wx_invitation/team_poster_5终身会员_220211160317'  
                        ]  
                        this.imgSrcArr.forEach((img) => {  
                            let that = this;  
                            uni.getImageInfo({  
                                src: img,  
                             success: async function(image) {  
                                    if(img === that.imgSrcArr[0]) {  
                                        that.$set(that.localImageArray,0,image.path)  
                                    }else if(img === that.imgSrcArr[1]){  
                                        that.$set(that.localImageArray,1,image.path)  
                                    }  
                                    that.count++;  
                                    if (that.count == 2) {  
                                         await that.createReport();  
                                    }  
                                }  
                            });  
                        })  
                    }  
                }catch(e){  
                    console.log(e);  
                    this.isShowPoster = false;  
                    this.showLoading = false;  
                }  
            },  
            createReport(){  
                let canvasObj = {};  
                var that = this;  
                this.$nextTick(() => {  
                    const query = uni.createSelectorQuery().in(this);  
                    query.select('#imgCanvas').boundingClientRect(data => {  
                            canvasObj = {  
                                width: data.width,  
                                height: data.height  
                            };  
                            const ctx = uni.createCanvasContext('imgCanvas', this);  
                            ctx.rect(0, 0, canvasObj.width, canvasObj.height)  
                            ctx.setFillStyle('#FFFFFF')  
                            ctx.fillRect()  
                            ctx.draw()  
                            this.ctx = ctx  
                            let createImg = new Promise((resolve, reject) => {  
                                ctx.drawImage(that.localImageArray[0], 0, 0, canvasObj.width, canvasObj.height);  
                                resolve();  
                            });  
                            let createQrCode = new Promise((resolve, reject) => {  
                                ctx.drawImage(that.localImageArray[1],uni.upx2px(506), uni.upx2px(788), uni.upx2px(112), uni.upx2px(112));  
                                resolve();  
                            })  
                            Promise.all([createImg,createQrCode]).then(() => {  
                                ctx.setTextAlign('left')  
                                ctx.font = 'normal bold 14px Arial,sans-serif '  
                                ctx.setFontSize(uni.upx2px(32))  
                                ctx.setFillStyle('#333333')  
                                let recommend;  
                                if(this.invitedData.recommend.length > 13){  
                                    recommend = this.invitedData.recommend.substr(0, 13) + '...'  
                                }else{  
                                    recommend = this.invitedData.recommend  
                                }  
                                ctx.fillText(`${recommend}`,uni.upx2px(36), uni.upx2px(846))  
                                ctx.draw(false, setTimeout(() => {  
                                    uni.canvasToTempFilePath({  
                                        canvasId: 'imgCanvas',  
                                        success: (res) => {  
                                            this.imageUrl = res.tempFilePath;  
                                            this.showLoading = false  
                                        },  
                                        fail(e) {  
                                            console.log(e);  
                                            uni.showToast({  
                                                title: '生成海报失败,请刷新重试',  
                                                icon: 'none'  
                                            });  

                                        }  
                                    }, that);  
                                }, 300));  
                            });  
                        })  
                        .exec();  
                })  
            }  
        }  
    }  
</script>  

<style scoped lang="scss">  
    .team_poster{  
        width: 100%;  
        height: 100vh;  
        background-color: #FFFFFF;  
        padding: 80rpx 32rpx 0;  
        box-sizing: border-box;  
    }  
    .poster{  
        width: 100vw;  
        height: 100vh;  
        position: fixed;  
        top: 0;  
        left: 0;  
        z-index: 10;  
        background-color: #F9F9F9;  
    }  
    /deep/#imgCanvas,  
    /deep/uni-canvas,  
    /deep/ canvas {  
        position: absolute;  
        top: -2000rpx;   
        width: 654rpx;  
        height: 920rpx;  
        text-align: center;  
        z-index: 2;  
        background: #fff;  
        // transform: translateX(-50%);  
        // opacity: 0;  
    }  
    .img_box {  
        position: fixed;  
        /* #ifdef APP-PLUS */   
        // top: 100rpx;  
        /* #endif */  
        /* #ifndef APP-PLUS */  
        // top: 120rpx;  
        /* #endif */   
        top: 50%;  
        left: 50%;  
        margin: auto;  
        transform: translate(-50%,-60%);  
        width: 654rpx;  
        height: 920rpx;  
        z-index: 15;  
        border-radius: 8px;  

        .img {  
            width: 100%;  
            height: 100%;  
            border-radius: 8px;  
            vertical-align: middle;  
        }  
    }  
    .new_btn{  
        width: calc(100vw - 64rpx);  
        height: 88rpx;  
        background-color: #109DC9;  
        border-radius: 8rpx;  
        text-align: center;  
        line-height: 88rpx;  
        font-size: 34rpx;  
        font-weight: bold;  
        color: #FFFFFF;  
        position: fixed;  
        bottom: 80rpx;  
        left: 32rpx;  
        z-index: 20;  
        margin-bottom: calc(constant(safe-area-inset-bottom));  
        margin-bottom: calc(env(safe-area-inset-bottom));  
    }  
    .tips {  
        position: fixed;  
        // top: 992rpx;  
        bottom: 80rpx;  
        font-size: 32rpx;  
        line-height: 44rpx;  
        color: #999999;  
        width: 100%;  
        text-align: center;  
        z-index: 20;  
    }  
</style>

操作步骤:

升级编辑器版本后,线上正常的海报在ios都生成不了

预期结果:

生成正常

实际结果:

生成不了,没有报错信息,回退编辑器版本后运行到手机正常了,但是放到云端打包还是生成不了

bug描述:

2022-02-11 10:41 负责人:天生DR 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX alpha 3.3.12+ 已修复

9***@qq.com

9***@qq.com (作者)

ios的app端生成不了,ios微信公众号和小程序是正常的

BoredApe

BoredApe - 有问题就会有答案。

请上传一个能完整重现问题的测试工程

  • 不会飞的羊

    应该是getImageInfo 问题,ios中网络图片无反应,回调无反应,只能先download,我看这个bug前几年出现过,我在hbuilder 3.3.10上出现的

    2022-02-11 16:26

  • 9***@qq.com (作者)

    回复 不会飞的羊: 经排查,就是getImageInfo 的问题,改为download暂时解决了

    2022-02-11 17:13

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