Recently met in uni-app project needs a synthetic share figure, in fact, the beginning is to do with the original wording, the background found on the PC side test is possible, but the problem will appear in the APP simulator, probably because js two different environment now, uni-app's official website also said that the two can not be equated
Let's look at the primary method most began to write
1 // get the download link 2 getDownloadLink () { . 3 the this . $ Axios . 4 .get ( '/ App / address' ) . 5 .then (RES => { . 6 the console.log (RES) . 7 the this .downloadLink = res.data .data . 8 // turn two-dimensional code . 9 the this .makeCode () 10 }) . 11 . the catch (ERR => { 12 is the console.log (ERR); 13 is }); 14 }, 15 // link transfected dimensional code 16 makeCode () { . 17 the let IMG = QR.createQrCodeImg ( the this .downloadLink, { 'size': 300 }); 18 is the this .downloadImg = IMG . 19 the console.log (IMG) 20 is the console.log ( the this .detailsData.banners [0 ]) 21 is 22 is }, 23 is // product synthesized image sharing 24 StarDraw () { 25 the let = _that the this 26 is 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 } The else { 75 ctx.drawImage (IMG, 0, 0 , c.width, c.height) 76 } 77 Drawing (n-+. 1 ); 78 } 79 } the else { 80 // save the resulting image ad 81 base64.push ( c.toDataURL ()); 82 _that.base64Data = Base64 [0 ] 83 the console.log (_that.base64Data) 84 // Fn (); 85 } 86 } 87 drawing(0); 88 }
Native such a thing written, tested through the browser, but it will be wrong APP
Let's look at the method of using a uni-app to solve
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 the let WW, HH; 12 is the let base64Img1 = 'Data: Image / GIF; Base64,' the concat (. The this .detailsData.bannersBase64 [0 ]) 13 is const = uni.createSelectorQuery Query (). In ( the this ); 14 Query. SELECT ( '# sss') boundingClientRect (Data => {. // Get-DOM Canvas 15 WW = data.width; // exact width and height of 16 HH = 450 . 17 var CTX = uni.createCanvasContext ( 'myCanvas') / / binding canvas 18 ctx.drawImage (base64Img1, 0, 0, WW, 300); // filled into images . 19 // this.downloadImg 20 is ctx.setFillStyle ( '# 000') // set the content of a text style 21 is ctx.setFontSize (20 is ); 22 is ctx.rect (0, 300, WW, 300 ) 23 is ctx.setFillStyle ( '# FFF' ) 24 ctx.fill () 25 ctx.drawImage (that.downloadImg, 240, 360, 100, 100 ) 26 is / / 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 is ctx.setFillStyle ( 'Red' ) 32 ctx.setFontSize (16 ); 33 is ctx.fillText (. price, 50, HH / 180 [+ 2) 34 is ctx.draw (); // output to the canvas 35 uni.showLoading ({ // increase the effect of loading wait 36 mask: to true 37 [ }) 38 is the setTimeout (() => { // without delay, then, sometimes imparting undefined 39 uni.canvasToTempFilePath ({ 40 canvasId: 'myCanvas' , 41 is Success: (RES) => { 42 is the console.log (res.tempFilePath) 43 is the this .shareImage = res.tempFilePath 44 is } 45 }) 46 is uni.hideLoading (); 47 }, 3000 ) 48 .}) Exec (); 49 50 }
This would solve the problem of APP in error, and then by calling the uni-app sharing interface share out montage