9***@qq.com
9***@qq.com
  • 发布:2020-12-22 17:47
  • 更新:2020-12-24 13:42
  • 阅读:853

【报Bug】个别手机canvas 生成图片失败

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: meta30

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:
let _this = this;  

                uni.showLoading({  
                    title: '海报图生成中……',  
                    mask: true  
                })  

                let {  
                    posterCanvasId,  
                    qrcodeSize,  
                    posterHeight,  
                    posterBgUrl,  
                    info  
                } = _this  
                let {  
                    newNickName,  
                    aid  
                } = info  

                newNickName = newNickName.trim()  
                if (newNickName.length > 9) {  
                    newNickName = newNickName.substring(0, 9) + '…'  
                }  

                let poster_width = uni.upx2px(1500)  
                let poster_height = uni.upx2px(2668)  
                let head_x = uni.upx2px(240)  
                let head_y = uni.upx2px(2450)  
                let head_r = uni.upx2px(130)  
                let qrcode_x = uni.upx2px(1050)  
                let qrcode_y = uni.upx2px(2290)  
                let qrcode_size = uni.upx2px(qrcodeSize)  
                let text_x = uni.upx2px(250 + 150)  
                let text_y = uni.upx2px(2440)  
                let text_size = uni.upx2px(65)  
                let line_x = uni.upx2px(440)  
                let line_y = uni.upx2px(2460)  
                let line_w = uni.upx2px(300)  
                let line_h = uni.upx2px(80)  

                let tips_x = uni.upx2px(350)  
                let tips_y = uni.upx2px(2560)  
                let tips_w = uni.upx2px(600)  
                let tips_h = uni.upx2px(120)  

                let nameSize = uni.upx2px(60)  
                let idSize = uni.upx2px(55)  
                let tipsSize = uni.upx2px(58)  
                const poster = uni.createCanvasContext(posterCanvasId)  

                poster.drawImage(posterBgUrl, 0, 0, poster_width, poster_height)  
                poster.drawImage(qrcode, qrcode_x, qrcode_y)  
                poster.setStrokeStyle('#FFCC00')  
                poster.setFillStyle('#000')  
                poster.setFontSize(nameSize)  
                poster.setTextAlign('left')  
                poster.fillText(newNickName, text_x, text_y - text_size)  

                poster.setStrokeStyle('#000')  
                poster.beginPath()  
                poster.setLineCap('round')  
                poster.setLineWidth(line_h)  
                poster.moveTo(line_x, line_y)  
                poster.lineTo(line_x + line_w, line_y)  
                poster.stroke()  
                poster.setFillStyle('#fff')  
                poster.setFontSize(idSize)  
                poster.fillText(aid, line_x + uni.upx2px(15), line_y + idSize / 2.4)  

                poster.setFontSize(tipsSize)  
                poster.setFillStyle('#333')  
                poster.fillText('长按识别二维码', text_x, tips_y + tipsSize / 2.4)  

                poster.arc(head_x, head_y, head_r, 0, 2 * Math.PI)  
                poster.clip()  
                poster.drawImage(headFile, head_x - head_r, head_y - head_r, head_r * 2, head_r * 2);  

                poster.draw(false, () => {  
                    uni.canvasToTempFilePath({  
                        x: 0,  
                        y: 0,  
                        width: poster_width,  
                        height: poster_height,  
                        destWidth: poster_width,  
                        destHeight: poster_height,  
                        canvasId: posterCanvasId,  
                        fileType:'jpg',  
                        success: function(res) {  
                            uni.hideLoading()  
                            _this.$emit('posterStr', {  
                                image: res.tempFilePath,  
                                title: posterCanvasId  
                            })  
                        },  
                        fail: function(err) {  
                            uni.hideLoading()  
                            _this.$msg(`生成失败,失败原因:${err.errMsg}`)  
                            console.log(err);  
                        }  
                    })  
                })

预期结果:
poster.draw(false, () => {  
                    uni.canvasToTempFilePath({  
                        x: 0,  
                        y: 0,  
                        width: poster_width,  
                        height: poster_height,  
                        destWidth: poster_width,  
                        destHeight: poster_height,  
                        canvasId: posterCanvasId,  
                        fileType:'jpg',  
                        success: function(res) {  
                            uni.hideLoading()  
                            _this.$emit('posterStr', {  
                                image: res.tempFilePath,  
                                title: posterCanvasId  
                            })  
                        },  
                        fail: function(err) {  
                            uni.hideLoading()  
                            _this.$msg(`生成失败,失败原因:${err.errMsg}`)  
                            console.log(err);  
                        }  
                    })  

实际结果:
poster.draw(false, () => {  
                    uni.canvasToTempFilePath({  
                        x: 0,  
                        y: 0,  
                        width: poster_width,  
                        height: poster_height,  
                        destWidth: poster_width,  
                        destHeight: poster_height,  
                        canvasId: posterCanvasId,  
                        fileType:'jpg',  
                        success: function(res) {  
                            uni.hideLoading()  
                            _this.$emit('posterStr', {  
                                image: res.tempFilePath,  
                                title: posterCanvasId  
                            })  
                        },  
                        fail: function(err) {  
                            uni.hideLoading()  
                            _this.$msg(`生成失败,失败原因:${err.errMsg}`)  
                            console.log(err);  
                        }  
                    })  

bug描述:

个别手机画布保存图片失败,错误:

canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

2020-12-22 17:47 负责人:无 分享
已邀请:
zhu_zhu

zhu_zhu

更新HBuildX到alpha版本试试,是开发工具的bug

  • zhu_zhu

    HBuilderX 2.9.8 遇到过同样的问题,正式版还没有新版本,换成alpha版本就没有这个问题了

    2020-12-24 13:45

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

    回复 zhu_zhu: 是的

    2021-01-06 11:03

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