最近在uni-app項目中遇到一個合成分享圖的需求，其實最開始是用原生寫法來做的，後臺發現在PC端測試是可以的，但在APP模擬器中會出現問題，可能是因爲兩者的js環境不同吧，uni-app官網也說了這兩者不能等同
先來看看最開始寫的原生方法
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 }
這種事原生寫法，在瀏覽器中測試能通過，但APP中會出錯
下面來看看使用uni-app的方法來解決的
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 }
這樣就能解決APP中報錯的問題，然後再通過調用uni-app分享接口將合成圖分享出去