关于canvas合成分享图

最近在uni-app项目中遇到一个合成分享图的需求，其实最开始是用原生写法来做的，后来发现在PC端测试是可以的，但在APP模拟器中会出现问题，可能是因为两者的js环境不同吧，uni-app官网也说了这两者不能等同

 先来看看最开始写的原生方法

// 获取下载链接
            getDownloadLink() {
                this.$axios
                    .get('/app/address')
                    .then(res => {
                        console.log(res)
                        this.downloadLink = res.data.data
                        // 转二维码
                        this.makeCode()
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            // 链接转二维码
            makeCode(){
                let img = QR.createQrCodeImg(this.downloadLink,{'size':300});
                this.downloadImg = img
                console.log(img)
                console.log(this.detailsData.banners[0])
                
            },
            // 商品分享图片合成
            starDraw() {
                let _that = this
                let base64Img1 = 'data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0])
                console.log(base64Img1)
                // console.log('data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0]))
                // return
                var data = [base64Img1, this.downloadImg]
                var base64 = []
                var bigName = 'F.N次方'
                var starName = this.detailsData.name
                if(this.detailsData.lowestPrice === this.highestPrice){
                    var price = '￥' + this.detailsData.lowestPrice 
                }else{
                    var price = '￥' + this.detailsData.lowestPrice + '~' + this.detailsData.highestPrice
                
                }
                console.log(this.detailsData.banners[0])
                console.log(price)
                var c = document.createElement('canvas'),
                // var c = this.$refs.canvas
                ctx = c.getContext('2d'),
                len = data.length
                c.width = 300
                c.height = 450
                ctx.rect(0, 0, 300, 300)
                ctx.fillStyle = '#fff'
                ctx.fill()
                function drawing(n) {
                    if (n < len) {
                        var img = new Image
                        // img.setAttribute("crossOrigin",'Anonymous')
                        // img.crossOrigin = 'Anonymous'; //解决跨域
                        img.crossOrigin = 'Anonymous'
                        img.src = data[n] 
                        img.onload = function () {
                            if (n == 1) {
                                ctx.fillRect(0, 300, 300, c.height-300)
                                ctx.fillStyle = '#fff'
                                ctx.drawImage(img, c.width-110, 330, 100, 100);
                                console.log(1)
                                ctx.font = '14px sans-serif'
                                ctx.textBaseline = 'top'
                                ctx.textAlign = 'start'
                                ctx.fillStyle = '#000'
                                ctx.fillText(bigName,10,320)
                                ctx.fillText(starName, 10, 340)
                                ctx.font = '14px sans-serif'
                                ctx.fillStyle = 'red'
                                ctx.fillText(price, 10, 380)
                                console.log(2)
                            } else {
                                ctx.drawImage(img, 0, 0, c.width, c.height)
                            }
                            drawing(n + 1);
                        }
                    } else {
                        //保存生成作品图片
                        base64.push(c.toDataURL());
                        _that.base64Data = base64[0]
                        console.log(_that.base64Data)
                        // fn();
                    }
                }
                drawing(0);
            }

这种事原生写法，在浏览器中测试能通过，但APP中会出错

下面来看看使用uni-app的方法来解决的

copyFn() {
                let that = this
                var goodsName = this.detailsData.name
                var text = 'F.N'
                if(this.detailsData.lowestPrice === this.highestPrice){
                    var price = '￥' + this.detailsData.lowestPrice 
                }else{
                    var price = '￥' + this.detailsData.lowestPrice + '~' + this.detailsData.highestPrice
                
                }
                let ww, hh;
                let base64Img1 = 'data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0])
                const query = uni.createSelectorQuery().in(this);
                query.select('#sss').boundingClientRect(data => {  //获取canvas-dom
                    ww = data.width; //准确的宽高
                    hh = 450
                    var ctx = uni.createCanvasContext('myCanvas') //绑定画布
                    ctx.drawImage(base64Img1, 0, 0, ww, 300); //填充进图片
                    // this.downloadImg
                    ctx.setFillStyle('#000')  //设置内容1的文字样式
                    ctx.setFontSize(20);
                    ctx.rect(0, 300, ww, 300)
                    ctx.setFillStyle('#fff')
                    ctx.fill()
                    ctx.drawImage(that.downloadImg, 240, 360, 100, 100)
                    // ctx.setTextAlign('center')  
                    ctx.setFillStyle('#000')
                    ctx.fillText(text,50,hh/2+120) 
                    // ctx.setTextAlign('center')  
                    ctx.fillText(goodsName,50,hh/2+150)
                    ctx.setFillStyle('red')  
                    ctx.setFontSize(16);
                    ctx.fillText(price,50,hh/2+180)
                    ctx.draw();  //输出到画布中
                    uni.showLoading({ //增加loading等待效果
                        mask:true
                    })
                    setTimeout(()=>{  //不加延迟的话，有时候会赋予undefined
                        uni.canvasToTempFilePath({
                            canvasId:'myCanvas',
                            success: (res) => {
                                console.log(res.tempFilePath)
                                this.shareImage=res.tempFilePath
                            }
                        })
                        uni.hideLoading();
                    },3000)
                }).exec();
             
            }

这样就能解决APP中报错的问题，然后再通过调用uni-app分享接口将合成图分享出去