三分钟让你上手小程序canvas合成海报

我就是我 2022-10-01 11:44 164阅读 0赞

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

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

## 二，了解微信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生成小程序

转载于:https://juejin.im/post/5cecf7e8f265da1bb2771050