uni.createCanvasContext 在微信小程序中二维码画不出来

分类：uni-app

uniapp


    async creatCanvas() {  
                let that = this  

                //创建canvas对象  
                this.canvas = uni.createCanvasContext('myCanvas', this)  
                //canvas中的插入的图片不能是网络地址只能是下载到本地的  
                let url = this.bannerList[0]  
                let imgUrl = await this.urlTofile(url) // 产品图  
                this.canvas.fillStyle = '#ffffff' // 设置橙色背景  
                this.canvas.fillRect(0, 0, 440, 1132)  
                //插入背景图 第2 3 4 5参数单位是px的所以我们要做适配 rpx转换为px 可以自定义方法 也可以使用uniapp中的方法  

                this.canvas.drawImage(imgUrl, 2, 2, 440, 350)  

                // uni.getImageInfo({  
                //  src: '../../static/share.jpg',  
                //  success(image) {  
                //  this.canvas.drawImage(image, 230,  
                //          360,  
                //          90,  
                //          90);  
                //  }  
                // });  

                // 假设你已有一个 image 对象，并且已经加载了二维码图片  
                // var image = new Image();  
                // image.src = '../../static/share.jpg';  
                // image.onload = function() {  
                //  // 等待图片加载完成后再绘制  
                //  this.canvas.drawImage(image, 230,  
                //      360,  
                //      90,  
                //      90);  
                // };  
                // let imgUrl1 = await this.urlTofile('@/static/share.png') // 产品图  
                // debugger  
                let image1 = that.urImage  
                this.canvas.drawImage(  
                    imgUrl,  
                    230,  
                    360,  
                    90,  
                    90  
                )  
                //将二维码插入到canvas中  
                this.canvas.font = '12px Arial'  
                this.canvas.fillStyle = 'black'  
                this.canvas.fillText(this.goods.name, 10, 380)  
                this.canvas.fillStyle = 'red'  
                this.canvas.fillText(this.goods.price + '元', 15, 410)  
                //成功之后  
                this.canvas.draw(  
                    true,  
                    setTimeout(() => {  
                        const that = this // 在setTimeout外面保存this引用  
                        uni.canvasToTempFilePath({  
                                x: 0,  
                                y: 0,  
                                fileType: 'png',  
                                quality: 1,  
                                canvasId: 'myCanvas',  
                                success: function(res) {  
                                    // 使用保存的that引用来访问组件实例  
                                    that.imgUrl = res.tempFilePath  
                                },  
                                fail: function(err) {  
                                    console.error(err)  
                                },  
                            },  
                            this  
                        ) // 将this作为第二个参数传递给uni.canvasToTempFilePath  
                    }, 1000)  
                )  
            },

2024-03-18 17:16 负责人:无分享

2 个回复

JXWang

有报错吗，可否上传一下完整的代码

喜欢技术的前端 - QQ---445849201

使用uni.downloadFile 下载到本地

async downloadImg() {  
                var context = uni.createCanvasContext('myCanvas')  
                let imgUrl = "https://mp-f9597e21-87ed-4c8b-bfa5-db436f8c5cad.cdn.bspapp.com/qr.png"  
                let res = await uni.downloadFile({  
                    url: imgUrl  
                });  
                console.log(res)  
                if(res.statusCode&&res.tempFilePath){  
                    context.fillStyle = '#999999' // 设置橙色背景  
                    context.fillRect(0, 0, 200, 200)  
                    context.drawImage(res.tempFilePath, 2, 2, 196, 196)  
                    context.draw()  
                }  
                uni.showLoading({  
                    title: '正在下载...',  
                });  
                console.log(ctxW, ctxH)  
                uni.canvasToTempFilePath({  
                    canvasId: 'myCanvas',  
                    x: 0,  
                    y: 0,  
                    width: ctxW,  
                    height: ctxH,  
                    destWidth: ctxW,  
                    destHeight: ctxH,  
                    quality: 1.0,  
                    success: function(res) {  
                        console.log('canvasToTempFilePath_success');  
                        uni.saveImageToPhotosAlbum({  
                            filePath: res.tempFilePath,  
                            success: function(saveRes) {  
                                uni.showToast({  
                                    title: '保存成功',  
                                });  
                            },  
                            fail: function(saveErr) {  
                                if (saveErr.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||  
                                    saveErr.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||  
                                    saveErr.errMsg ===  
                                    'saveImageToPhotosAlbum:fail authorize no response'  
                                ) {  
                                    uni.showModal({  
                                        title: '需要您授权保存相册',  
                                        modalType: false,  
                                        success: modalRes => {  
                                            uni.openSetting({  
                                                success(settingRes) {  
                                                    console.log('settingRes',  
                                                        JSON.stringify(  
                                                            settingRes));  
                                                    if (settingRes.authSetting[  
                                                            'scope.writePhotosAlbum'  
                                                        ]) {  
                                                        uni.showModal({  
                                                            title: '温馨提醒',  
                                                            content: '获取权限成功，再次点击保存即可~',  
                                                            modalType: false,  
                                                        })  
                                                    } else {  
                                                        uni.showModal({  
                                                            title: '温馨提醒',  
                                                            content: '获取权限失败，将无法保存到相册哦~',  
                                                            modalType: false,  
                                                        })  
                                                    }  
                                                },  
                                                fail(settingError) {  
                                                    console.log('settingError',  
                                                        JSON.stringify(  
                                                            settingError));  
                                                },  
                                            });  
                                        },  
                                    });  
                                }  
                            },  
                        });  
                    },  
                    fail: function(err) {  
                        console.log(JSON.stringify(err));  
                        uni.showToast({  
                            title: '生成图片失败',  
                        });  
                    },  
                }, this);  
            }

要回复问题请先登录或注册

uni.createCanvasContext 在微信小程序中二维码画不出来

2 个回复

公告

相关问题

uni.createCanvasContext 在微信小程序中 二维码画不出来

与内容相关的链接

2 个回复

公告

相关问题

uni.createCanvasContext 在微信小程序中二维码画不出来