三分钟让你上手小程序canvas合成海报-CSDN博客

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

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

二，了解微信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获取绘图上下文context
var 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生成小程序