微信小程序 - 使用canvas绘制海报实现分享功能

喜欢ヅ旅行 2021-08-28 16:28 774阅读 0赞

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：

#### 效果图： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

#### 实现过程 ####

首先，在wxml文件中写入 `canvas` 标签，并设置 `canvas-id`，**注意，`canvas-id` 必须要设置**，不然我们无法创建 canvas 的绘图上下文 CanvasContext 对象，也无法在上面绘制我们需要的东西。

其次，在js文件中开始绘制我们需要的海报图片，在绘制之前我们要先创建 canvas 的绘图上下文 CanvasContext 对象，我这里是直接在页面加载进来的时候就绘制我需要的海报，所以我在 `onLoad` 中创建 `CanvasContext` 对象。

const ctx = wx.createCanvasContext('mycanvas')

创建完 canvas 的绘图上下文 CanvasContext 对象之后，我们就开始绘图：

let _this = this;
        const ctx = wx.createCanvasContext('mycanvas')
        ctx.drawImage(_this.data.url, 0, 0, 400, 700);
        let text = "床前明月光，疑是地上霜。举头望明月，低头思故乡。"
        ctx.fillStyle = "#fff"
        ctx.setFontSize(20)
        ctx.fillText('静夜思', 160, 200)
        ctx.setFontSize(14)
        ctx.fillText('李白', 175, 225)
        ctx.setFontSize(18)
        this.textPrewrap(ctx, text, 90, 260, 32, 200, 4)
        ctx.draw();

大家应该看到了我上面的代码设置了很多个 `setFontSize` 文字大小，那你们有没有发现我对应下面都有加入我需要的文字，这里我来解释一下：

ctx.setFontSize(20)
       ctx.fillText('静夜思', 160, 200)

上面的字体大小对应它下面这一行的文字的大小，如果大家也像我有这么多行，那就可以这么实现了。  
  还有上面的 `textPrewrap` 方法，它的作用是让文本自动换行，下面放一下它的代码：

/**
       * 设置文本换行
       * @param {*} ctx 画布的上下文环境
       * @param {*} content 需要绘制的文本内容
       * @param {*} drawX 绘制文本的x坐标
       * @param {*} drawY 绘制文本的y坐标
       * @param {*} lineHeight 文本之间的行高
       * @param {*} lineMaxWidth 每行文本的最大宽度
       * @param {*} lineNum 最多绘制的行数
       */
      const textPrewrap = (ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) => {
        var drawTxt = ''; // 当前绘制的内容
        var drawLine = 1; // 第几行开始绘制
        var drawIndex = 0; // 当前绘制内容的索引
    
        // 判断内容是否可以一行绘制完毕
        if (ctx.measureText(content).width <= lineMaxWidth) {
          ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
        } else {
          for (var i = 0; i < content.length; i++) {
            drawTxt += content[i];
            if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
              if (drawLine >= lineNum) {
                ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                break;
              } else {
                ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                drawIndex = i + 1;
                drawLine += 1;
                drawY += lineHeight;
                drawTxt = '';
              }
            } else {
              // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
              if (i === content.length - 1) {
                ctx.fillText(content.substring(drawIndex), drawX, drawY);
              }
            }
          }
        }
      }

这样我们的海报就绘制完了，当你用手机查看你的海报的时候，你会发现海报的层级非常高，这里我是不建议大家直接就显示canvas在页面上的，比较建议大家现将海报变成图片，然后我们直接显示这张图片，而将 canvas 定位到很远的地方，使我们无法看到它。  
  如何将海报变成我们需要的图片呢？当然是使用官方提供的API `wx.canvasToTempFilePath()`了，不过在使用它的时候我们需要加个定时器，因为绘制海报需要一点时间。

wx.showToast({
          title: '图片生成中...',
          icon: "none",
          duration: 1000
        })
        setTimeout(() => {
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success(res) {
              console.log('res-->', res);
              _this.setData({
                url: res.tempFilePath,
                hidden: true
              })
            },
            fail(err) {
              console.log('err-->', err);
    
            },
            complete(res) {
              wx.hideToast()
            }
          })
        }, 500);

这样子我们就可以得到我们的海报图片啦，然后我们只需要在wxml中加个图片标签让它显示就好了。  
  接下来讲一下怎样将图片保存到系统相册中，保存进去了我们就可以去分享了。这里使用了 `wx.saveImageToPhotosAlbum()` API来实现，很简单的一个API。

wx.saveImageToPhotosAlbum({
          filePath: this.data.url,
          success(res) {
            wx.showToast({
              title: '图片保存成功，去分享吧',
              icon: "none"
            })
          },
          fail(err) {
            wx.showToast({
              title: '图片保存失败啦！',
              icon: "none"
            })
          }
        })

这样子我们就实现了我们的海报绘制和分享功能了。下面上一下全部的代码：  
**1、wxml**

<canvas canvas-id="mycanvas" class="canvas"></canvas>
    
    <view class="canvas" wx:if="{
       {hidden}}" bindlongtap="longTap">
    	<image src="{
       {url}}"></image>
    </view>
    
    <view class="dialog" wx:if="{
       {isShow}}">
    	<text class="top">是否保存图片分享</text>
    	<view class="bottom">
    		<text class="yes" bindtap="yes">是</text>
    		<text bindtap="no">否</text>
    	</view>
    </view>

**2、wxss**

/* pages/poster1/poster1.wxss */
    canvas {
      position: fixed;
      top: 0;
      left: -9999px;
    }
    
    .canvas {
      width: 800rpx;
      height: 1340rpx;
      /* background-color: beige; */
    }
    
    image {
      width: 800rpx;
      height: 1340rpx;
      display: block;
    }
    
    .dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -200rpx;
      margin-left: -200rpx;
      width: 400rpx;
      height: 200rpx;
      background-color: #fff;
      border-radius: 20rpx;
      text-align: center;
      font-size: 32rpx;
      color: #333;
      overflow: hidden;
    }
    
    text {
      box-sizing: border-box;
      height: 100rpx;
      line-height: 100rpx;
      display: block;
    }
    
    .top {
      border-bottom: 1rpx solid #eee;
    }
    
    .bottom {
      display: flex;
      justify-content: space-around;
    }
    
    .bottom text {
      width: 50%;
    }
    
    .yes {
      border-right: 1rpx solid #eee;
    }

**3、js**

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        url: '../../images/poster1.jpg',
        hidden: false,
        isShow: false
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        let _this = this;
        const ctx = wx.createCanvasContext('mycanvas')
        ctx.drawImage(_this.data.url, 0, 0, 400, 700);
        let text = "床前明月光，疑是地上霜。举头望明月，低头思故乡。"
        ctx.fillStyle = "#fff"
        ctx.setFontSize(20)
        ctx.fillText('静夜思', 160, 200)
        ctx.setFontSize(14)
        ctx.fillText('李白', 175, 225)
        ctx.setFontSize(18)
        this.textPrewrap(ctx, text, 90, 260, 32, 200, 4)
        ctx.draw();
    
        wx.showToast({
          title: '图片生成中...',
          icon: "none",
          duration: 1000
        })
        setTimeout(() => {
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success(res) {
              console.log('res-->', res);
              _this.setData({
                url: res.tempFilePath,
                hidden: true
              })
            },
            fail(err) {
              console.log('err-->', err);
    
            },
            complete(res) {
              wx.hideToast()
            }
          })
        }, 500);
    
    
      },
    
      // 长按显示弹框
      longTap() {
        this.setData({
          isShow: true
        })
      },
    
      yes() {
        wx.saveImageToPhotosAlbum({
          filePath: this.data.url,
          success(res) {
            wx.showToast({
              title: '图片保存成功，去分享吧',
              icon: "none"
            })
          },
          fail(err) {
            wx.showToast({
              title: '图片保存失败啦！',
              icon: "none"
            })
          }
        })
        this.setData({
          isShow: false
        })
      },
      no() {
        this.setData({
          isShow: false
        })
      },
      /**
       * 设置文本换行
       * @param {*} ctx 画布的上下文环境
       * @param {*} content 需要绘制的文本内容
       * @param {*} drawX 绘制文本的x坐标
       * @param {*} drawY 绘制文本的y坐标
       * @param {*} lineHeight 文本之间的行高
       * @param {*} lineMaxWidth 每行文本的最大宽度
       * @param {*} lineNum 最多绘制的行数
       */
      const textPrewrap = (ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) => {
        var drawTxt = ''; // 当前绘制的内容
        var drawLine = 1; // 第几行开始绘制
        var drawIndex = 0; // 当前绘制内容的索引
    
        // 判断内容是否可以一行绘制完毕
        if (ctx.measureText(content).width <= lineMaxWidth) {
          ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
        } else {
          for (var i = 0; i < content.length; i++) {
            drawTxt += content[i];
            if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
              if (drawLine >= lineNum) {
                ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                break;
              } else {
                ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                drawIndex = i + 1;
                drawLine += 1;
                drawY += lineHeight;
                drawTxt = '';
              }
            } else {
              // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
              if (i === content.length - 1) {
                ctx.fillText(content.substring(drawIndex), drawX, drawY);
              }
            }
          }
        }
      }
      })

######   最后给大家分享一下我的github地址，上面也有海报绘制分享这个模块，大家可以直接在上面查看效果图 ######

**github地址：https://github.com/sunshime/weChatSkill**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210813/300dc2d895674837ba1d6ca6b101256e.png