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);  
                        }  
                    })  
                }) 
                                        
                                    
                                    - 发布:2020-12-22 17:47
- 更新:2020-12-24 13:42
- 阅读:986
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 2.9.8
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: meta30
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
                                    
                                         
                                
                                                                                                预期结果:
                                    
                                    
                                        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);  
                        }  
                    })  
                                     
                                
                                                            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.
 
             
             
             
			 
                                                                     
            
zhu_zhu
HBuilderX 2.9.8 遇到过同样的问题,正式版还没有新版本,换成alpha版本就没有这个问题了
2020-12-24 13:45
9***@qq.com (作者)
回复 zhu_zhu: 是的
2021-01-06 11:03