目前，腾讯还没有这个接口，曲线救国的方式就是先把内容画到canvas内，然后在把canvas转化成图片，保存到手机相册。
为了便于在多个地方使用这个功能，需要将其做成组件component。然后哪里需要就搬到哪里。但是这样操作，就会遇到几个躲不过的巨坑。
巨坑一：
始终无法将内容（图片或者文字）绘制到画布上，始终显示空白。
错误用法:
let ctx = wx.createCanvasContext('myCanvas');正确用法比错误用法多了一个this
let ctx = wx.createCanvasContext('myCanvas', this);巨坑二：
画布上绘制完毕。，无法导出图片。
正确用法:依然需要传一个this进去
wx.canvasToTempFilePath({},this)巨坑三：
保存图片是异步的，建议加适当的延时
wxml
<canvas style="width: {{windowWidth}}px; height: {{windowHeight}}px;" canvas-id="myCanvas"></canvas>index.js
// components/shareImg/index.jsconst app = getApp();Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { windowWidth: 750, windowHeight: 1334, pixelRatio: 1, drawInfo: { type: Object, value: { x: 0, y: 0, w: 750, h: 1334, color: '#f00', fontSize: '34', bg:{ src: '/static/settings/imgBg.png', x: 0, y: 0, w: 750, h: 1334, }, logo: { x: 0, y: 660, w: 320, h: 68 }, title: { y: 1016, }, wxCode: { x: 180, y: 1150, w: 160, h: 160 }, } }, shareData: { type: Object, value: { title: '苏州速迈医疗设备有限公司', hallNo: 'E01-04', logo: '/static/pro/logo.png', wxCode: '/static/pro/wxCode.png' }, }, }, ready: function(e) { this.init(); // this.drawImg(); this.drawCanvas(); }, /** * 组件的方法列表 */ methods: { // 获取常用的属性 init: function() { let that = this; wx.getSystemInfo({ success: function(res) { that.setData({ windowWidth: res.windowWidth, windowHeight: res.windowHeight, pixelRatio: res.pixelRatio, }); } }); // console.log("that.data.windowHeight", that.data.windowHeight); // console.log("that.data.windowWidth", that.data.windowWidth); that.data.drawInfo.value.w = that.data.windowWidth; that.data.drawInfo.value.h = that.data.windowHeight; }, drawCanvas: function() { var that = this; let ctx = wx.createCanvasContext('myCanvas', this); // 屏幕系数比，以设计稿375*667（iphone7）为例 let pixelRatio = this.data.pixelRatio; console.log("pixelRatio:",pixelRatio); // 文字基础设置 var color = that.data.drawInfo.value.color , fz = that.data.drawInfo.value.fontSize / pixelRatio , centerX = that.data.drawInfo.value.w / pixelRatio ,leftX = this.leftX() ; // 背景图绘制 var bg={ src: that.data.drawInfo.value.bg.src, x: that.data.drawInfo.value.x, y: that.data.drawInfo.value.y, w: that.data.drawInfo.value.w, h:that.data.drawInfo.value.h } ctx.drawImage(bg.src, bg.x, bg.y, bg.w, bg.h); // logo绘制 var logo = { src: that.data.shareData.value.logo, y: that.data.drawInfo.value.logo.y / pixelRatio, w: that.data.drawInfo.value.logo.w / pixelRatio, h: that.data.drawInfo.value.logo.h / pixelRatio } ctx.drawImage(logo.src, this.leftX(logo.w,bg.w), logo.y, logo.w, logo.h); // 二维码绘制 var wxCode={ src: that.data.shareData.value.wxCode, x: that.data.drawInfo.value.wxCode.x / pixelRatio, y: that.data.drawInfo.value.wxCode.y / pixelRatio, w: that.data.drawInfo.value.wxCode.w / pixelRatio, h: that.data.drawInfo.value.wxCode.h / pixelRatio } ctx.drawImage(wxCode.src, wxCode.x, wxCode.y, wxCode.w, wxCode.h); //文字绘制 // 标题 var title={ y :that.data.drawInfo.value.title.y / pixelRatio, content : that.data.shareData.value.title }; // hallNo 展位号 var hallNo={ y : title.y+ 60 / pixelRatio, content : that.data.shareData.value.hallNo } ctx.setFontSize(fz); ctx.setFillStyle(color); ctx.setTextBaseline('middle'); ctx.setTextAlign('center') ctx.fillText(title.content, centerX, title.y); ctx.fillText(hallNo.content, centerX, hallNo.y); ctx.draw(false,function(){ setTimeout(function(){ that.canvasToImage(); },1000) }); }, // 居中绘制时的left值 leftX: function(wEl, wBg) { return (wBg - wEl) / 2; }, // 转canvas为图片 canvasToImage() { var that = this wx.canvasToTempFilePath({ // x: 0, // y: 0, // width: that.data.windowWidth, // height: that.data.windowWidth, // destWidth: that.data.windowWidth * that.data.pixelRatio, // destHeight: that.data.windowWidth * that.data.pixelRatio, canvasId: 'myCanvas', success: function(res) { console.log(res); console.log('朋友圈分享图生成成功:' + res.tempFilePath) wx.previewImage({ current: res.tempFilePath, // 当前显示图片的http链接 urls: [res.tempFilePath] // 需要预览的图片http链接列表 }) }, fail: function(err) { console.log('失败') console.log(err.errMsg) } }, that) }, }})
