首選說一下需求，做一個小程序分享，但是封面圖要自定義，除了要有對應商品還有有背景圖，商品名。類似這種
實現邏輯，把商品圖和背景圖，再加上價格和商品名用canvas 渲染出來
這是弄好之后的效果圖，里面的背景色和商品圖還有商品名稱，價格這些可以自定義
具體實現步驟
1，寫一個 canvas標簽，寫好對應的canvas-id="myCanvas" ,設置寬高
2，這個主要是有圖片文字組成，圖片渲染到canvas的話我們需要先轉成bese64,完成之后在工具上就可以到了，但是這個時候真機是看不到的，需要我們把base64數據通過wx.getFileSystemManager方法寫入一下，這樣真機就可以訪問了
3，寫好之后我們就可以寫入文字調整對應的位置就可以了
?好了下面開始吧，本來想直接沾全部代碼的，后面想想還是一步一步來，只要一步一步調試好，基本不會出問題了，好了，下面開始
1，我們要想做這么圖的話，因為是動態的，所以這里的圖片我們要用canvas畫出來
定義一個canvas標簽
<canvas canvas-id="myCanvas" style="width: 508.47rpx; height: 406.78rpx;position: fixed;left: -800px;"></canvas>注意這里fixed;left: -800px; 在調試階段可以去掉要不然看不到效果圖了?
2，定義好標簽后我們就需要給他畫出來，首先我們畫canvas的話需要用本地圖，或者用base64
因為我們商品圖都是動態的所以這里只能用base64，我們需要在畫圖之前先把我們需要渲染的圖片改成base64數據
urlTobase64(url) {console.log('ruw', url)wx.request({url: url,responseType: 'arraybuffer', //最關鍵的參數，設置返回的數據格式為arraybuffersuccess: res => {//把arraybuffer轉成base64let base64 = wx.arrayBufferToBase64(res.data);//不加上這串字符，在頁面無法顯示的哦base64 = 'data:image/jpeg;base64,' + base64// this.lineBg = base64this.writecommodityImg(base64)//打印出base64字符串，可復制到網頁校驗一下是否是你選擇的原圖片呢// console.log('base64=>', this.lineBg)console.log('kais')const ctx = uni.createCanvasContext('myCanvas', this); // 獲取 Canvas 上下文// 繪制背景圖像let bg ="data:image/png;base64,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"this.writebgImg(bg)ctx.drawImage(this.canvasImg.bgimgPath, 0, 0, 264, 215);// 繪制商品圖ctx.drawImage(this.canvasImg.commodityimgPath, 20, 22, 90, 100); // 商品圖// 添加商品名稱ctx.setFontSize(18);ctx.setFillStyle('#000000');// this.productDetail.proName// ctx： 畫布的上下文環境// content： 需要繪制的文本內容// drawX： 繪制文本的x坐標// drawY： 繪制文本的y坐標// lineHeight：文本之間的行高// lineMaxWidth：每行文本的最大寬度// lineNum：最多繪制的行數// */this.textPrewrap(ctx, this.productDetailbox.proName, 115, 40, 25, 115, 2)// this.textPrewrap(ctx, '測試風收到回復肯德基福克斯等哈開發手打開發機三打哈登記說法凱撒代發', 115, 40, 25, 115, 2) // ctx.fillText('測試風收到回復肯德基福克斯等哈開發手打開發機三打哈登記說法凱撒代發', 200,50, 140);// 添加商品價格// ctx.setFontSize(22);ctx.setFillStyle('#FF0000');// this.productDetail.pricectx.font = 'normal bold 26px Arial,sans-serif 'ctx.fillText('￥' + this.productDetail.price, 115, 120, 200, 70);// 繪制完成并導出圖片ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: 'myCanvas',success: (res) => {console.log(res.tempFilePath); // res.tempFilePath 就是生成的圖片路徑this.tempFilePath=res.tempFilePath// this.uploadbgImg(res.tempFilePath)// 這里可以將 res.tempFilePath 返回給調用方或者保存到本地},fail: (res) => {console.error(res);}}, this);});}})},這里的urlTobase64(url) url是你的遠程圖片路徑，通過arrayBufferToBase64他會返回你一個base64數據
//把arraybuffer轉成base64
let base64 = wx.arrayBufferToBase64(res.data);轉入成功后我們在把圖片渲染到?canvas之前需要把base64寫入一下
跟這個一樣，你只需要換一下里面的base64數據就行，需要注意的是一個他好像不能循環利用，一個圖片你要單獨寫一個方法進入寫入
?寫入方法：
writebgImg(data){const base64 = data; //base64格式圖片const time = new Date().getTime();//USER_DATA_PATH：文件系統中的用戶目錄路徑 (本地路徑)const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";const imageData = base64.replace(/^data:image\/\w+;base64,/, "");const file = wx.getFileSystemManager();file.writeFileSync(imgPath, imageData, "base64");this.canvasImg.bgimgPath=imgPathconsole.log('imgPath',this.canvasImg.bgimgPath);//imgPath就是圖片在本地的地址//如需保存至本地// wx.saveImageToPhotosAlbum({// filePath: imgPath,// success: (res) => {// wx.showModal({// title: '照片已保存至相冊',// content: '快去分享給小伙伴吧',// confirmText: '我知道了',// showCancel: false,// })// }// })},方法里面什么都不用改，他會正常給你返回一個真機可讀取的路徑
// 商品圖writecommodityImg(data){const base64 = data; //base64格式圖片const time = new Date().getTime();//USER_DATA_PATH：文件系統中的用戶目錄路徑 (本地路徑)const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";const imageData = base64.replace(/^data:image\/\w+;base64,/, "");const file = wx.getFileSystemManager();file.writeFileSync(imgPath, imageData, "base64");this.canvasImg.commodityimgPath=imgPathconsole.log('imgPath',this.canvasImg.commodityimgPath);},寫入完之后你就可以渲染對應的圖片數據了，根據你對應的位置和大小進行修改就可以了
// 繪制商品圖ctx.drawImage（圖片渲染路徑，x軸位置，y軸位置，寬，高）ctx.drawImage(this.canvasImg.commodityimgPath, 20, 22, 90, 100); // 商品圖文字也一樣
ctx.fillText('￥' + this.productDetail.price, 115, 120, 200, 70);但是如果文字是商品名稱你又想設置換行可以根據我下面這個方法來
this.textPrewrap(ctx, this.productDetailbox.proName, 115, 40, 25, 115, 2)?我這個方法是在urlTobase64里渲染的時候用到的，就是你在渲染文字的地址換成這個方法就行
??? ?// this.productDetail.proName
?? ??? ??? ??? ??? ??? ?// ctx： 畫布的上下文環境
?? ??? ??? ??? ??? ??? ?// content： 需要繪制的文本內容
?? ??? ??? ??? ??? ??? ?// drawX： 繪制文本的x坐標
?? ??? ??? ??? ??? ??? ?// drawY： 繪制文本的y坐標
?? ??? ??? ??? ??? ??? ?// lineHeight：文本之間的行高
?? ??? ??? ??? ??? ??? ?// lineMaxWidth：每行文本的最大寬度
?? ??? ??? ??? ??? ??? ?// lineNum：最多繪制的行數
下面是對應方法
textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {var drawTxt = ''; // 當前繪制的內容var drawLine = 1; // 第幾行開始繪制var drawIndex = 0; // 當前繪制內容的索引// 判斷內容是否可以一行繪制完畢if (ctx.measureText(content).width <= lineMaxWidth) {ctx.fillText(content.substring(drawIndex, i), drawX, drawY);} else {for (var i = 0; i < content.length; i++) {drawTxt += content[i];if (ctx.measureText(drawTxt).width >= lineMaxWidth) {if (drawLine >= lineNum) {ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);break;} else {ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);drawIndex = i + 1;drawLine += 1;drawY += lineHeight;drawTxt = '';}} else {// 內容繪制完畢，但是剩下的內容寬度不到lineMaxWidthif (i === content.length - 1) {ctx.fillText(content.substring(drawIndex), drawX, drawY);}}}}},?最后繪制并導出就好了
// 繪制完成并導出圖片ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: 'myCanvas',success: (res) => {console.log(res.tempFilePath); // res.tempFilePath 就是生成的圖片路徑this.tempFilePath=res.tempFilePath// this.uploadbgImg(res.tempFilePath)// 這里可以將 res.tempFilePath 返回給調用方或者保存到本地},fail: (res) => {console.error(res);}}, this);});在對應分享頁面設置圖片就OK了?
onShareAppMessage() {// console.log(this.tempFilePath)return {title:'Hi，這個商品不錯，分享給你',path: '/pages/index/index',imageUrl: this.tempFilePath, //背景圖success: function() {uni.showToast({title: '分享成功',icon: 'success'});},fail: function() {uni.showToast({title: '分享失敗',icon: 'none'});}}},?有問題隨時滴滴。。。
