1231465sap
1231465sap
  • 发布:2020-05-23 09:58
  • 更新:2020-08-14 15:32
  • 阅读:1061

【报Bug】更新到HBuilderX 2.7.5后调用 uni.canvasToTempFilePath时,执行速度变得很慢

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.5

手机系统: 全部

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

华为荣耀Note10、IPHONE6S

示例代码:
    saveWatermarkImageToPhotosAlbum: function(tempFilePath) {  
                uni.getImageInfo({  
                    src: tempFilePath,  
                    success: function(image) {  

                        let canvasId = 'canvas';  
                        let canvas = uni.createCanvasContext(canvasId)  

                        _self.canvasW = image.width;  
                        _self.canvasH = image.height;  
                        let width = parseInt(image.width)  
                        let height = parseInt(image.height)  
                        uni.showLoading({  
                            title: "正在绘制图片",  
                            mask: true  
                        })  
                        canvas.drawImage(tempFilePath, 0, 0, width, height)  
                        uni.showLoading({  
                            title: "正在绘制水印",  
                            mask: true  
                        })  
                        //水印  
                        let wWidth = width * 0.2;  
                        let hHeight = height * 0.1;  

                        let girardLeft = width * 0.78;  
                        //款号   
                        canvas.setFillStyle("#FFFFFF")  
                        let fontSize = width / 1000 * 50;  
                        let font = "italic bolder " + fontSize.toString() + "px 宋体 sans-serif";  
                        canvas.font = font;  
                        //宽度不为一千时,款号不显示  
                        canvas.fillText("123AL", girardLeft, height - 30)  

                        console.log("draw");  
                        uni.showLoading({  
                            title: "正在绘制图片",  
                            mask: true  
                        })  
                        canvas.draw(false,  
                            function(eee) {  
                                uni.showLoading({  
                                    title: "正在导出图片",  
                                    mask: true  
                                })  
                                console.log("canvasToTempFilePath start");  
                                uni.canvasToTempFilePath({  
                                    x: 0,  
                                    y: 0,  
                                    width: width,  
                                    height: height,  
                                    destWidth: width,  
                                    destHeight: height,  
                                    canvasId: canvasId,  
                                    success: function(canvasRes) {  
                                        // 在H5平台下,tempFilePath 为 base64  
                                        console.log("canvasToTempFilePath success");  

                                        uni.saveImageToPhotosAlbum({  
                                            filePath: canvasRes.tempFilePath,  
                                            success: function() {  
                                                console.log("saveImageToPhotosAlbum success");  

                                            },  
                                            fail: function(e) {  
                                                console.log("saveImageToPhotosAlbum fail");  

                                            }  
                                        });  
                                    },  
                                    fail: function(canvasRes) {  
                                        console.log("canvasToTempFilePath fail: " + JSON.stringify(canvasRes));  

                                    }  
                                })  

                            }  

                        );  

                    }  
                })  
            }  

操作步骤:

调用函数

预期结果:

调用api花费的时间过长

实际结果:

以下为荣耀note10的部分运行日志,从日志打印canvasToTempFilePath start 到 canvasToTempFilePath success 的时间大概为12S

09:40:43.284 draw at pages/search_detail/search_detail.vue:487
09:40:43.824 canvasToTempFilePath start at pages/search_detail/search_detail.vue:498
09:40:55.044 canvasToTempFilePath success at pages/search_detail/search_detail.vue:509
09:40:55.364 saveImageToPhotosAlbum success at pages/search_detail/search_detail.vue:514

09:40:56.364 draw at pages/search_detail/search_detail.vue:487
09:40:56.844 canvasToTempFilePath start at pages/search_detail/search_detail.vue:498
09:41:08.604 canvasToTempFilePath success at pages/search_detail/search_detail.vue:509
09:41:08.924 saveImageToPhotosAlbum success at pages/search_detail/search_detail.vue:514

bug描述:

从开始调用api到执行success回调的速度相较之前的版本所花费的时间大幅度增加,HBuilderX2.6.16版的时候基本只要花费0.5~1秒钟左右。更新到2.7.5之后安卓花费的时间变成了10秒左右,ios花费的时间为2~3秒左右;

2020-05-23 09:58 负责人:DCloud_UNI_GSQ 分享
已邀请:
川歌

川歌

零时解决方案:在调用uni.canvasToTempFilePath的时候,设置destWidth、destHeight属性等于画布宽度、画布高度

水沟小鱼

水沟小鱼 - 90后

我的海报分享也是,导出图片半天

淘淘OA

淘淘OA - 90后挨踢民工

我也遇到了,和楼主情况一样,望解决!!

淘淘OA

淘淘OA - 90后挨踢民工

有人能解决吗?有偿也可以,急死人了!骁龙845需要3秒,骁龙6系列10几秒不等 ,最长的可以达到1分钟!这功能完全就很难受啊!!

DCloud_UNI_GSQ

DCloud_UNI_GSQ

下个alpha版本会有相关优化

  • 4***@qq.com

    我们也遇到这个问题了 ,下个版本是啥时候呢

    2020-08-12 21:19

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