s***@cciigroup.com
s***@cciigroup.com
  • 发布:2022-01-27 09:02
  • 更新:2022-01-27 15:53
  • 阅读:548

【报Bug】 ios canvas 生成海报 插入远程图片 的情况 必须生成两次 才能生成 上个云端版本无问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.3.10

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: 8

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://m.cciinet.com/pages/code/index?source=h5

示例代码:
uni.showToast({title: '图片生成中', icon: 'loading', });  
                getQrCode({  
                    "page": "pages/shop/detail",  
                    "scene": "stu=1&id=" + this.option.id  
                }).then(res => {  
                    if (res.code == 0) {  
                        let src = 'data:image/png;base64,' + res.data  
                        // 保存到本地  
                        console.log(src)  
                        let bitmap = new plus.nativeObj.Bitmap("test");  
                        bitmap.loadBase64Data(src, () => {  
                            console.log("加载Base64图片数据成功");  
                            bitmap.save("_doc/" + new Date().getTime() + ".png", {  
                                overwrite: true,  
                            }, (i) => {  
                                var win = 500 / 750  
                                var wh = 690 / 500  
                                var promise1 = this.handleGetImageInfo(this.pageStu == 2 ?  
                                    'https://oss-shop.cciinet.com/share/20201113105230.png' :  
                                    this  
                                    .detail.imgArr[0][0])  
                                var promise2 = this.handleGetImageInfo(  
                                    'https://oss-shop.cciinet.com/files/MiniProgram/share_border_yc.png'  
                                    )  
                                Promise.all([  
                                    promise1, promise2  
                                ]).then(res => {  
                                    console.log(res)  
                                    var ctx = uni.createCanvasContext('canvas')  
                                    ctx.setFillStyle('#fff')  
                                    ctx.fillRect(0, 0, this.cavW, this.cavH)  
                                    ctx.drawImage(res[0], 0, 0, this.cavW, this.cavW)  
                                    ctx.drawImage(res[1], 0, 0, this.cavW, this.cavW)  
                                    ctx.setFillStyle('#fff');  
                                    ctx.setFontSize(12)  
                                    ctx.fillText('¥', 24 / 500 * this.cavW, 415 / 500 *  
                                        this.cavW)  
                                    ctx.setFontSize(18)  
                                    ctx.fillText(this.detail.goodsPrice, 38 / 500 * this  
                                        .cavW, 415 / 500 * this.cavW);  
                                    var txtW = ctx.measureText(this.detail.goodsPrice)  
                                        .width  
                                    ctx.setFontSize(12)  
                                    ctx.fillText('起', 42 / 500 * this.cavW + txtW, 415 /  
                                        500 * this.cavW)  
                                    ctx.setFontSize(18)  
                                    ctx.fillText(this.detail.title, 24 / 500 * this.cavW,  
                                        480 / 500 * this.cavW)  
                                    ctx.setFontSize(14)  
                                    ctx.setFillStyle('#777777');  
                                    ctx.fillText('产地:' + this.detail.origin, 24 / 500 *  
                                        this.cavW, 540 / 500 * this.cavW)  
                                    ctx.fillText('仓库:' + (this.detail.provinceName == this  
                                            .detail.cityName ? this.detail  
                                            .provinceName : this.detail.provinceName +  
                                            this.detail.cityName), 24 / 500 * this  
                                        .cavW, 600 / 500 * this.cavW)  
                                    ctx.fillText('数量:' + this.detail.goodsAmount + this  
                                        .detail.unitName, 24 / 500 * this.cavW, 660 /  
                                        500 * this.cavW)  
                                    console.log(i.target)  
                                    ctx.drawImage(i.target, 338 / 500 * this.cavW, 520 /  
                                        500 * this.cavW, 110 / 500 * this.cavW, 110 /  
                                        500 * this.cavW)  
                                    ctx.fillText('长按查看详情', 310 / 500 * this.cavW, 520 /  
                                        500 * this.cavW + 140 / 500 * this.cavW)  
                                    ctx.save(); //保存  
                                    ctx.beginPath()  
                                    ctx.draw(true,()=>{  

                                        setTimeout(()=>{  
                                            wx.hideToast();  
                                            uni.canvasToTempFilePath({  
                                                height: this.cavH,  
                                                width: this.cavW,  
                                                fileType: 'jpg',  
                                                x: 0,  
                                                y: 0,  
                                                canvasId: 'canvas',  
                                                success: (response) => {  
                                                    uni.getImageInfo({  
                                                        src: response.tempFilePath,  
                                                        success: res1=> {  
                                                            this.showAppShare = false  
                                                            console.log(res1)  
                                                                uni.share({  
                                                                    provider: "weixin",  
                                                                    scene: "WXSenceTimeline",  
                                                                    type: 2,  
                                                                    imageUrl: res1.path,  
                                                                    success:res=> {  

                                                                        console.log("success:" + JSON.stringify(res));  
                                                                    },  
                                                                    fail:err=>  {  

                                                                        console.log("fail:" + JSON.stringify(err));  
                                                                    }  
                                                                });  

                                                        }  
                                                    });  
                                                },  
                                            })  
                                        },300)  
                                    }) //绘制  

                                })  
                                bitmap.clear();  
                            }, (e) => {  
                                onsole.log('保存图片失败:' + JSON.stringify(e));  
                                bitmap.clear();  
                            });  
                        }, () => {  
                            console.log('加载Base64图片数据失败:' + JSON.stringify(e));  
                            bitmap.clear();  
                        });  
                    }  
                })

操作步骤:

直接插入远程图片去生成

预期结果:

直接生成

实际结果:

ios 需要生成多次

bug描述:

ios canvas 生成海报 插入远程图片 的情况 必须生成两次 才能生成 每次第一次都生成失败 你们这个版本太他奶奶的失败了吧 如果不插入远程图可以正常生成 同样的 代码 安卓无问题 而且上个版本 ios 无问题

可以确定 上个版本的云端打包无问题

2022-01-27 09:02 负责人:天生DR 分享
已邀请:
不会飞的羊

不会飞的羊

geitImageInfo之前可以试试先downloadFile,怀疑你获取的图片地址并不是本地缓存的地址

  • s***@cciigroup.com (作者)

    是的 你说的 对。我刚试完。uni.getImageInfo 这个不好用了。 但是之前确实没有问题。包括安卓。

    2022-01-27 10:39

  • s***@cciigroup.com (作者)

    uni.getImageInfo 为什么这个突然不能用了呢 不报错 就是不向下执行。

    2022-01-27 10:49

天生DR

天生DR - 天生我材必有用

请提供一个 可以run起来的稳定复现你问题的demo

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