关于canvas合成分享图

 1 // 获取下载链接
 2             getDownloadLink() {
 3                 this.$axios
 4                     .get('/app/address')
 5                     .then(res => {
 6                         console.log(res)
 7                         this.downloadLink = res.data.data
 8                         // 转二维码
 9                         this.makeCode()
10                     })
11                     .catch(err => {
12                         console.log(err);
13                     });
14             },
15             // 链接转二维码
16             makeCode(){
17                 let img = QR.createQrCodeImg(this.downloadLink,{'size':300});
18                 this.downloadImg = img
19                 console.log(img)
20                 console.log(this.detailsData.banners[0])
21                 
22             },
23             // 商品分享图片合成
24             starDraw() {
25                 let _that = this
26                 let base64Img1 = 'data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0])
27                 console.log(base64Img1)
28                 // console.log('data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0]))
29                 // return
30                 var data = [base64Img1, this.downloadImg]
31                 var base64 = []
32                 var bigName = 'F.N次方'
33                 var starName = this.detailsData.name
34                 if(this.detailsData.lowestPrice === this.highestPrice){
35                     var price = '￥' + this.detailsData.lowestPrice 
36                 }else{
37                     var price = '￥' + this.detailsData.lowestPrice + '~' + this.detailsData.highestPrice
38                 
39                 }
40                 console.log(this.detailsData.banners[0])
41                 console.log(price)
42                 var c = document.createElement('canvas'),
43                 // var c = this.$refs.canvas
44                 ctx = c.getContext('2d'),
45                 len = data.length
46                 c.width = 300
47                 c.height = 450
48                 ctx.rect(0, 0, 300, 300)
49                 ctx.fillStyle = '#fff'
50                 ctx.fill()
51                 function drawing(n) {
52                     if (n < len) {
53                         var img = new Image
54                         // img.setAttribute("crossOrigin",'Anonymous')
55                         // img.crossOrigin = 'Anonymous'; //解决跨域
56                         img.crossOrigin = 'Anonymous'
57                         img.src = data[n] 
58                         img.onload = function () {
59                             if (n == 1) {
60                                 ctx.fillRect(0, 300, 300, c.height-300)
61                                 ctx.fillStyle = '#fff'
62                                 ctx.drawImage(img, c.width-110, 330, 100, 100);
63                                 console.log(1)
64                                 ctx.font = '14px sans-serif'
65                                 ctx.textBaseline = 'top'
66                                 ctx.textAlign = 'start'
67                                 ctx.fillStyle = '#000'
68                                 ctx.fillText(bigName,10,320)
69                                 ctx.fillText(starName, 10, 340)
70                                 ctx.font = '14px sans-serif'
71                                 ctx.fillStyle = 'red'
72                                 ctx.fillText(price, 10, 380)
73                                 console.log(2)
74                             } else {
75                                 ctx.drawImage(img, 0, 0, c.width, c.height)
76                             }
77                             drawing(n + 1);
78                         }
79                     } else {
80                         //保存生成作品图片
81                         base64.push(c.toDataURL());
82                         _that.base64Data = base64[0]
83                         console.log(_that.base64Data)
84                         // fn();
85                     }
86                 }
87                 drawing(0);
88             }

 1 copyFn() {
 2                 let that = this
 3                 var goodsName = this.detailsData.name
 4                 var text = 'F.N'
 5                 if(this.detailsData.lowestPrice === this.highestPrice){
 6                     var price = '￥' + this.detailsData.lowestPrice 
 7                 }else{
 8                     var price = '￥' + this.detailsData.lowestPrice + '~' + this.detailsData.highestPrice
 9                 
10                 }
11                 let ww, hh;
12                 let base64Img1 = 'data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0])
13                 const query = uni.createSelectorQuery().in(this);
14                 query.select('#sss').boundingClientRect(data => {  //获取canvas-dom
15                     ww = data.width; //准确的宽高
16                     hh = 450
17                     var ctx = uni.createCanvasContext('myCanvas') //绑定画布
18                     ctx.drawImage(base64Img1, 0, 0, ww, 300); //填充进图片
19                     // this.downloadImg
20                     ctx.setFillStyle('#000')  //设置内容1的文字样式
21                     ctx.setFontSize(20);
22                     ctx.rect(0, 300, ww, 300)
23                     ctx.setFillStyle('#fff')
24                     ctx.fill()
25                     ctx.drawImage(that.downloadImg, 240, 360, 100, 100)
26                     // ctx.setTextAlign('center')  
27                     ctx.setFillStyle('#000')
28                     ctx.fillText(text,50,hh/2+120) 
29                     // ctx.setTextAlign('center')  
30                     ctx.fillText(goodsName,50,hh/2+150)
31                     ctx.setFillStyle('red')  
32                     ctx.setFontSize(16);
33                     ctx.fillText(price,50,hh/2+180)
34                     ctx.draw();  //输出到画布中
35                     uni.showLoading({ //增加loading等待效果
36                         mask:true
37                     })
38                     setTimeout(()=>{  //不加延迟的话，有时候会赋予undefined
39                         uni.canvasToTempFilePath({
40                             canvasId:'myCanvas',
41                             success: (res) => {
42                                 console.log(res.tempFilePath)
43                                 this.shareImage=res.tempFilePath
44                             }
45                         })
46                         uni.hideLoading();
47                     },3000)
48                 }).exec();
49              
50             }