3***@qq.com
3***@qq.com
  • 发布:2020-03-31 15:34
  • 更新:2020-06-16 14:55
  • 阅读:1348

【报Bug】h5页面,uni.canvasToTempFilePath 在ios端读取本地缓存之后,3个回调都不会触发

分类:uni-app

详细问题描述

在ios端 - 微信浏览器

如果读取本地缓存绘制出canvas再调用uni.canvasToTempFilePath,此方法不会触发,success,fail,complete三个回调都不会触发;
如果不读取本地缓存使用默认图片和文字,直接绘制canvas,该方法success,fail,complete三个回调都可以触发;

在Android端 - 微信浏览器

无问题

[内容]

测试版将支付0.01

重现步骤

1.首页获取微信授权,将头像 昵称 本地缓存

  1. 海报页面直接读取即可复现

[读取代码]

[App安装包或H5地址]

[可重现代码片段]

qrR(path) {  
                        this.src = path  
                        let that = this  
                        let system_info = uni.getSystemInfoSync();  
                        console.log(system_info)  
                        let ctx = uni.createCanvasContext('firstCanvas');  
                        uni.getImageInfo({  
                            src: that.cover,  
                            success(res) {  
                                console.log(res);  
                                // ctx.drawImage(res.path, 0, 0, 375, uni.upx2px(1334));  
                                ctx.drawImage(res.path, 0, 0, uni.upx2px(750), uni.upx2px(1334));  

                                /*二维码开始 - start*/  
                                ctx.fillStyle = '#FFFFFF';  
                                //刻画二维码背景 - 白色  
                                ctx.fillRect(uni.upx2px(42), uni.upx2px(1074), uni.upx2px(233), uni.upx2px(233));  
                                //刻画二维码图片   
                                ctx.drawImage(path, uni.upx2px(67), uni.upx2px(1094), uni.upx2px(183), uni.upx2px(183));  
                                //刻画二维码文字说明  
                                ctx.font = '13px Arial';  
                                ctx.fillStyle = '#000';  
                                ctx.fillText('长按保存海报', uni.upx2px(75), uni.upx2px(1300));  
                                /*二维码结束 -end*/  

                                /* 刻画人物头像 -start*/  
                                ctx.save()//裁切前 保存画布状态  
                                let tx_x = uni.upx2px(65) //头像x坐标  
                                let tx_y = uni.upx2px(179)//头像y坐标  
                                let cricle_r = uni.upx2px(54)//圆的半径  
                                let cricle_x = tx_x + cricle_r//圆中心点 X  
                                let cricle_y = tx_y + cricle_r//圆中心点 Y  
                                ctx.beginPath();//开始画圆  
                                ctx.arc(cricle_x,cricle_y,cricle_r,0,2*Math.PI);  
                                ctx.clip();//裁切  
                                // console.log(that.headimgurl)  
                                ctx.drawImage(that.headimgurl,tx_x, tx_y,cricle_r*2,cricle_r*2);//开始画头像  
                                ctx.restore() //恢复画布不被裁切  
                                ctx.save()//裁切前 保存画布状态  
                                let nickname_x =tx_x + cricle_r*2 +9  
                                let nickname_y =tx_y + cricle_r   
                                ctx.font = '18px Arial';//刻画nickname  
                                ctx.fillStyle = '#fff';  
                                ctx.fillText(that.nickname, nickname_x, nickname_y+9);  
                                ctx.restore() //恢复画布不被裁切  
                                /*刻画人物头像 -end */  

                                let scale = 2//为了增加图片清晰度,放大系数  
                                ctx.draw(false, () => {  
                                    // alert('draw')  
                                    uni.canvasToTempFilePath({  
                                        x: 0,  
                                        y: 0,  
                                        width:uni.upx2px(750),  
                                        height: uni.upx2px(1334),  
                                        destWidth: uni.upx2px(750)*scale,  
                                        destHeight: uni.upx2px(1334)*scale,  
                                        canvasId: 'firstCanvas',  
                                        quality:1,  
                                        success: function(res) {  
                                            console.log(res)  
                                            that.test_src = res.tempFilePath  
                                            // alert('that.test_src')  
                //                          uni.saveImageToPhotosAlbum({  

                //                              filePath: res.tempFilePath,  
                //                              success: function() {  
                //                                  console.log('save success');  
                //                              }  
                //                          });  
                                        },  
                                        fail(e) {  
                                            console.log(e);  
                                            // alert('a')  
                                            uni.showToast({  
                                                title: '生成海报失败',  
                                                icon: 'none'  
                                            });  
                                        },  
                                        complete(e){  
                                            // alert('测试ios是否调用方法')  
                                        }  
                                    });  
                                });  
                            },  
                            fail(error) {  
                                console.log(error);  
                            }  
                        });  
            },

联系方式

[QQ]
350839123

2020-03-31 15:34 负责人:无 分享
已邀请:
3***@qq.com

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

这个问题还是没有解决,今天再次做了一次 一样的出现

  • zzzzzzhen

    大哥请问解决了吗我也遇到了

    2020-07-09 15:16

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