小程序目前只支持轉(zhuǎn)發(fā)，不支持分享朋友圈，為了能實現(xiàn)分享，很多線上小程序通過生成分享圖片，保存到相冊來給用戶增加分享的可能。

具體思路及簡要代碼如下：

一：canvas畫圖drawCanvas:function(){var that = this;var contentPic = '/images/pop_pic_default@2x.png'wx.downloadFile({ //當圖片為網(wǎng)絡圖片時，需要先下載到本地，再進行操作，url: contentPic, //否則canvas會加載不到圖片，本地的無需這步驟success: function (res) {contentPic = res.tempFilePath}})var ctx = wx.createCanvasContext('shareImg')ctx.fillStyle = '#fff' //這里兩句是為了解決canvas生成圖片時黑背景的問題ctx.fillRect(0, 0, 562, 788) //填充白色背景ctx.setFontSize(32)ctx.setFillStyle('#333') ctx.setTextAlign('left')ctx.setTextBaseline('middle')var str = '這是標題'this.changLine(true,str,ctx,40,60,36,482)var sourse = that.data.detail.sourcectx.setFontSize(28)ctx.fillText(sourse, 40, this.data.titleY)var date = that.data.detail.publishDatevar sourseX = ctx.measureText(sourse).width+56ctx.setFontSize(24)ctx.setFillStyle('#999')ctx.fillText(date, sourseX, this.data.titleY)var content = that.data.detail.summary.replace(/(^\s*)|(\s*$)/g, "")ctx.setFontSize(28)ctx.setFillStyle('#666')this.changLine(false,content, ctx, 40, this.data.titleY + 60, 36, 482)var picY = this.data.titleY + 168wx.getImageInfo({src: contentPic,success: function (res) {var widthScale = 482 / res.widthvar heightScale = 250 / res.heightvar sx=0,sy=0if (widthScale>heightScale){sy= (res.height-250/(482 / res.width))/2 }else{sx=(res.width-482/(250 / res.height))/2 }ctx.drawImage(contentPic, sx, sy, res.width - sx * 2, res.height - sy * 2, 40, picY, 482, 250 )ctx.moveTo(40, picY + 274)ctx.setStrokeStyle('#dedede')ctx.lineTo(522, picY + 274)ctx.stroke() ctx.setFontSize(28)ctx.setFillStyle('#666')ctx.fillText('長按掃碼閱讀', 40, picY + 334)ctx.setFontSize(24)// ctx.setFillStyle('#666')ctx.fillText('全文約' + that.data.detail.wordCount + '字，約' + that.data.detail.readingTime + '分鐘', 40, picY + 382)// var qrcode = '/images/pic_nanbaobao@2x.png'// ctx.drawImage(qrcode, 344, picY + 274, 178, 178)var logo = '/images/ic_xiaochnegxu@2x.png'ctx.drawImage(logo, 397, picY + 315, 72, 72)ctx.draw(false, function (e) {that.createPoster()})}})},//畫圖文字換行，內(nèi)容、畫布、初始x、初始y、行高、畫布寬changLine: function (isTitle,str, ctx, initX, initY, lineHeight, canvasWidth){// 字符分隔為數(shù)組var arrText = str.split('');var line = '';var lineCount=0;var isThreeLine=false;for (var n = 0; n < arrText.length; n++) {var testLine = line + arrText[n];var testWidth = ctx.measureText(testLine).width;if (testWidth > canvasWidth) {if (lineCount==2) {isThreeLine=truevar length = line.length-2;line = line.substring(0, length)+'...';ctx.fillText(line, initX, initY);return false;}lineCount++;ctx.fillText(line, initX, initY);line = arrText[n];initY += lineHeight;} else {line = testLine;}}if (!isThreeLine){ctx.fillText(line, initX, initY);}//記錄標題的高度if (isTitle){this.setData({titleY: initY + lineHeight + 8})}},

?

//生成海報createPoster:function(){var that = thiswx.canvasToTempFilePath({x: 0,y: 0,width: 562,height: 788,destWidth: 1124,destHeight: 1576,canvasId: 'shareImg',fileType: 'jpg',success: function (res) {that.setData({prurl: res.tempFilePath})wx.hideLoading()}})},

大概就這樣，若發(fā)現(xiàn)問題，請評論指正~

轉(zhuǎn)載于:https://www.cnblogs.com/lichunyan/p/8963584.html

總結(jié)

以上是生活随笔為你收集整理的小程序---canvas画图，生成分享图片，画图文字换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。