一，先准备素材（图片与文字）

根据业务需求准备好素材与需要的文字内容

二，了解微信api

了解微信小程序配合canvas使用的一些api  例如（wx.createSelectorQuery(),wx.createContext(),wx.drawCanvas）等等...

三，实现思路

定义一个canvas容器，动态计算图片，文字大小，根据需求在画布上任意位置展示

四，图片合成

• 两种方案：响应式的海报 || 固定宽高海报
• 一，响应式的海报

通过wx.createSelectorQuery()节点查询，获取画布宽高通过计算比例动态宽高复制代码

• 二，固定宽高

顾名思义就是写死宽高  优势：简单， 缺点：不利于用户体验复制代码

废话不多说直接进去正题：

* 第一步：先查询节点（画布）大小（宽高）const query = wx.createSelectorQuery()    query.select('.myCanvas').boundingClientRect(function (rect) {       //rect.width画布宽度       //rect.height画布高度    }).exec()* 第二步：获取绘画上下文//使用wx.createContext获取绘图上下文contextvar context = wx.createContext()* 向画布上绘制图像。context.drawImage（img,sx,sy,swidth,sheight,x,y,width,height）sx,sy,swidth,sheight四个为可选参数sx开始剪切的 x 坐标位置。sy开始剪切的 y 坐标位置。swidth被剪切图像的宽度。sheight被剪切图像的高度。如果img为网络图片： wx.getImageInfo({     src: 网络地址,//服务器返回的图片地址     success: function (res) {       //res.path     } }) 调用微信api下载图片到本地，才能绘画到画布上  * 向画布上绘制文字context.fillText(text,x,y,maxWidth);text ：绘画文字x ：开始绘制文本的 x 坐标位置（相对于画布）。y ：开始绘制文本的 y 坐标位置（相对于画布）。maxWidth  可选，允许的最大文本宽度，以像素计。如果你还想给控制文字大小或者颜色：context.setFontSize(字号大小)//setFontSize绘画文本字体大小context.strokeStyle= "rgba(255,0,0,0.5)";//strokeStyle用于描边context.fillStyle= "rgba(255,0,0,0.5)";//fillStyle填充样式* 接下来画个圆，用来绘制用户头像context.beginPath() //开始创建一个路径context.arc(x,y,r,sAngle,eAngle,counterclockwise); //画一个圆形裁剪区域x圆的中心的 x 坐标。y圆的中心的 y 坐标。r圆的半径。sAngle起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。eAngle结束角，以弧度计。counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。context.clip() //裁剪context.drawImage（img,sx,sy,swidth,sheight,x,y,width,height） //绘制图片上去context.save();//保存当前绘制的状态context.restore() //恢复之前保存的绘图上下文//调用wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为 wx.drawCanvas({      canvasId: 'myCanvas',      actions: context.getActions() //获取绘图动作数组 });  **到此图片文字已经绘画成功**复制代码

五，裁剪画布制定区域生成图片

wx.canvasToTempFilePath({  x: 100,  y: 200,  width: 50,  height: 50,  destWidth: 100, //输出的图片的宽度(width*屏幕像素密度)  destHeight: 100, //输出的图片的高度(height*屏幕像素密度)  canvasId: 'myCanvas',  success(res) {    console.log(res.tempFilePath) //生成文件的临时路径  }})destWidth和destHeight值越小越好，不然图片会很大，很占内存，下载慢，影响用户体验不要以为到这一步就结束了，还有最后一步~！复制代码

六，图片下载

wx.saveImageToPhotosAlbum({    filePath: res.tempFilePath,    success(res) {     }})对临时生成的图片路径进行下载，保存到用户手机相册复制代码

生成二维码的就不讲了，一般由后端生成，也可以使用云开发自己调用api生成小程序