一：canvas画图drawCanvas:function(){var that = this;var contentPic = '/images/pop_pic_default@2x.png'wx.downloadFile({     //当图片为网络图片时，需要先下载到本地，再进行操作，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()})}})},//画图文字换行，内容、画布、初始x、初始y、行高、画布宽changLine: function (isTitle,str, ctx, initX, initY, lineHeight, canvasWidth){// 字符分隔为数组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()}})},