小程序画布画海报保存成图片可以保存实现完整代码

朴灿烈づ我的快乐病毒、 2022-10-19 04:27 204阅读 0赞

老规矩先来个效果图：

因为是截图所以会有些模糊，在真机上会比较清晰

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

下面针对效果图来看看里面都画了什么元素，代码在文章的最后，大家想直接拷代码可以略过这，这里是方便大家理解代码。

首先，咱们的海报有几个组成部分，这里海报图片不包括右上角的X和透明黑色背景，还有底部的保存海报，单拎出来用户要保存的图片，也就是画布保存导出的图片，

这个海报由以下几部分组成：

1 封面（就是这个美女的照片），

2 提示符  \# 号

3 文章标题

4 文章内容

5 虚线

6 海报的描述

7 二维码图片

这7个部分都是通过JS画布描绘出来的，然后保存为图片，保存到用户手机的一个临时路径，最后用户点击海报可以直接保存图片到手机。

下面来看看完整的代码吧：

WXML

CSS

.answer_true_bg {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top:0;
      left: 0;
      bottom: 0;
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.8);
    }
    canvas{
      background: #fff;
      position: absolute;
      left:100vw;
    }
    .posterImg{
      width: 240px; height:440px;
      background: #fff;
      position: fixed;
      top: 220rpx;
      left: 50%;
      transform: translate(-50%);
    
    }
    .closePoster{
      position: fixed;
      width: 70rpx;
      height: 70rpx;
      top: 190rpx;
      right: 100rpx;
      z-index: 1001;
    }
    .saveBlock{
    
      position: fixed;
      height: 160rpx;
      width: 160rpx;
      top: 1160rpx;
      text-align: center;
      left: 50%;
      transform: translate(-50%);
      z-index: 1001;
      color: #fff;
      font-size: 30rpx;
    }
    .save-poster{
      width: 60rpx;
      height: 60rpx;
    
    }
    .answer_true {
      position: fixed;
      width: 80vw;
      height: 100vh;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      align-items: center;
      display: -webkit-flex;
      text-align: center;
      z-index: 1000;
    }

onReady(){
        var context = wx.createCanvasContext('myCanvas');
        that.getCtx(context);
      },
      getCtx(context) {
        context.fillStyle="#FFFFFF";
        // 背景底图
        context.drawImage('/images/test.png', 0, 0, 240, 200, 240, 200)
        var left_margin = 12;
        // 用户昵称
        context.setFillStyle('#7C40EC');
        context.setFontSize(19)
        context.fillText('#', left_margin, 230);
        context.setFillStyle('#000');
        context.setFontSize(14)
    
        //  获取文本在画布中行数
        var fcRowNum = function (txt, num) {
          var value = txt.length / num
          return Math.ceil(value)
        }
        var title = '你心目中前期宣传爆炸，后期拉垮的游戏有哪些？';
        var titleRowNum = fcRowNum(title, 15)
        var titleLength = title.length;
        var topMargin = 252;
        var titleCarvas = function (title, titleRowNum, s = 0, d = 15) {
          if (titleRowNum >= 1) {
            console.log(titleRowNum, s, d)
            context.fillText(title.substr(s, 15), left_margin, topMargin);
            topMargin = topMargin + 20;
            --titleRowNum;
            s = d;
            d = d + 15 <= titleLength ? d + 15 : titleLength
            titleCarvas(title, titleRowNum, s, d)
          }
        }
        titleCarvas(title, titleRowNum);
        topMargin += 2;
        context.setFillStyle('#A3A3A3');
        context.setFontSize(10)
        var detail = '你心目中前期宣传爆炸，后期拉垮的游戏有哪些？你心目中前期宣传爆炸，后期拉垮的游戏有哪些？你心目中前期宣传爆炸，后期拉垮的游戏有哪些呢？';
        var detailRowNum = fcRowNum(detail, 20)
        var detailLength = detail.length;
        context.setFontSize(11)
        var detailCarvas = function (detail, detailRowNum, s = 0, d = 20) {
          if (detailRowNum >= 1) {
            let txt = detail.substr(s, 20);
            console.log('txt', txt, txt.length)
            context.fillText(txt, left_margin, topMargin);
            topMargin = topMargin + 16;
            --detailRowNum;
            s = d;
            d = d + 20 <= detailLength ? d + 20 : detailLength
            console.log('sss', s, 'ddd', d)
            detailCarvas(detail, detailRowNum, s, d)
          }
        }
        detailCarvas(detail, detailRowNum);
    
        context.setLineDash([2, 2], 2);
        context.beginPath();
        context.strokeStyle = '#A3A3A3'
        context.moveTo(0, topMargin);
        context.lineTo(topMargin, topMargin);
        context.stroke();
    
        context.setFontSize(21)
        context.setFillStyle('#A3A3A3');
        topMargin += 42;
        context.fillText('游享Plus', left_margin, topMargin);
    
        context.setFontSize(11)
        context.setFillStyle('#999');
        topMargin += 22;
        context.fillText('长按识别小程序码 参与互动', left_margin, topMargin);
    
        context.drawImage('/images/erCode.png', 180, topMargin - 46, 48, 48, 48, 48)
        context.draw(true, () => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 240,
            height: 440,
            destWidth: 240*2,
            destHeight: 440*2,
            canvasId: 'myCanvas',
            fileType: "png",
            quality: 1,
            success(res) {
              console.log('绘制成功-------', res)
              that.setData({
                posterImg: res.tempFilePath
              })
            },
            fail(err) {
              console.log('绘制失败', err)
            }
          });
        });
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221005/7fbe4346ee9b4a6ea34f3dfce00ba5f0.png