微信小程序生成海报并保存到本地（附带二维码生成）

小程序端刚刚拿到了一个新的需求说要生成一张海报用户保存图片到本地分享，话不多说直接上代码

/ pages/haibao/haibao.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    evalatImage:'',
    bgBanner:'',
    imagePath:"",
    maskHidden:false,
    qrcode_image:''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var  that = this;
    wx.getImageInfo({
      src: "https://m.xinjuenet.com/images/banner/b-xldh.jpg",
      success(res) {
        console.log("banner临时路径:" + res.path);
        that.setData({
          evalatImage: res.path
        })
      }
    })
    wx.getImageInfo({
      src: "https://m.xinjuenet.com/images/banner/b-xldh.jpg",
      success(res) {
        console.log("海报底部背景:" + res.path);
        that.setData({
          bgBanner: res.path
        })
      }
    })
    that.qrcode_image();
    wx.getImageInfo({
      src: that.data.qrcode_image,
      success(res) {
        console.log("二维码:" + res.path);
        that.setData({
          qrcode_image: res.path
        })
      }
    })
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
  //点击生成海报
  formSubmit: function (e) {
    var that = this;
    wx.showToast({
      title: '海报生成中...',
      icon: 'loading',
      duration: 1000
    });
    that.createNewImg();
    setTimeout(function () {
      wx.hideToast()
      that.setData({
        maskHidden: true
      });
    }, 1000);
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.clearRect(0, 0, 375, 660);
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 375, 660)
    context.save();
 
    var path = that.data.evalatImage;
    context.drawImage(path, 0, 0, 375, 183);
 
 
    var path1 = that.data.bgBanner;
    console.log("海报底部背景图" + path1);
    var path2 = that.data.qrcode_image;
    console.log("海报底部二维码" + path2);
    context.setFontSize(16);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("测试结果", 60, 230);
    context.stroke();
    context.save();
 
    var titl = "分享标题";
    context.setFontSize(18);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.font = 'normal bold 18px sans-serif';
    context.fillText(titl, 60, 270);
    context.stroke();
    context.save();
 
 
 
    context.setFontSize(16);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("测试说明", 60, 320);
    context.stroke();
    context.save();
    context.drawImage(path1, 0, 550, 375, 130);
 
    var results = "分享的文本信息，布上下文 canvasID";
 
    // 测试结果说明
    that.dealWords({
      ctx: context,                     //画布上下文 canvasID
      fontSize: 16,                //字体大小
      word: results,                  //需要处理的文字
      maxWidth: 270,             //一行文字最大宽度
      x: 60,                    //文字在x轴要显示的位置
      y: 340,                      //文字在y轴要显示的位置
      maxLine: 6              //文字最多显示的行数
    });
    context.stroke();
    context.save(); //保存之前的画布设置
 
    //绘制头像
    context.beginPath();
    context.arc(50, 225, 5, 0, 2 * Math.PI);
    context.setStrokeStyle("#c7eddd");
    context.setFillStyle("#44bf8c");
    context.clip(); //裁剪上面的圆形
    context.fill();//填充
    context.restore();//因为clip是剪切了画布  则后面所有的操作都会限制在被裁减的区域内可见  用restore可以恢复之前的设置
    context.closePath();
 
    context.save(); //保存之前的画布设置
    context.beginPath();
    context.arc(50, 315, 5, 0, 2 * Math.PI);
    context.setStrokeStyle("#c7eddd");
    context.setFillStyle("#44bf8c");
    context.clip(); //裁剪上面的圆形
    context.fill();//填充
    context.restore();
    context.closePath();
 
    context.save(); //保存之前的画布设置
    context.beginPath();
    context.arc(55, 610, 50, 0, 2 * Math.PI);
    context.setStrokeStyle("#ffe200");
    context.clip(); //裁剪上面的圆形
    context.drawImage(path2, 5, 560, 100, 100);
    context.restore();
    context.closePath();
 
    context.save(); //保存之前的画布设置
    context.beginPath();
    // context.setFontSize(16);
    context.setFillStyle('#fff');
    context.setTextBaseline("top");
    context.setTextAlign('left');
    // context.font = 'normal 18px arial';
    // context.fillText("预防疫情四大宅家心理健康测评", 115, 565);
    // context.fillText("预防疫情四大宅家心理健康测评", 115, 589);
    that.dealWords({
      ctx: context,                     //画布上下文 canvasID
      fontSize: 16,                //字体大小
      word: titl,                 //需要处理的文字
      maxWidth: 240,             //一行文字最大宽度
      x: 115,                   //文字在x轴要显示的位置
      y: 540,                      //文字在y轴要显示的位置
      maxLine: 2              //文字最多显示的行数
    });
    context.stroke();
    context.closePath();
    context.save(); //保存之前的画布设置
    context.draw(true);//true表示保留之前绘制内容
 
 
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 1000);
  },
  //文本换行
  dealWords(options) {
    options.ctx.setFontSize(options.fontSize);//设置字体大小
    var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
    var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
 
    var endPos = 0;//当前字符串的截断点
    for (var j = 0; j < count; j++) {
      var nowStr = options.word.slice(endPos);//当前剩余的字符串
      var rowWid = 0;//每一行当前宽度    
      if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
        for (var m = 0; m < nowStr.length; m++) {
          rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
          if (rowWid > options.maxWidth) {
            if (j === options.maxLine - 1) { //如果是最后一行
              options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 25);    //(j+1)*20这是每一行的高度        
            } else {
              options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 25);
            }
            endPos += m;//下次截断点
            break;
          }
        }
      } else {//如果当前的字符串宽度小于最大宽度就直接输出
        options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 25);
      }
    }
  },
  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  },
  qrcode_image: function () {
    let that = this;
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token',
      data: {
        grant_type: 'client_credential',
        appid: '你的APPID', //不能缺少
        secret: '你的APPID秘钥' //不能缺少
      },
      success: function (res) {
        wx.request({
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,
          data: {
            "path": "pages/index/index", //默认跳转到主页:pages/index/index，可指定
            "width": 200,
            "scene": "type=0&evaId=" + that.data.id,
          },
          responseType: 'arraybuffer', // 这行很重要,转为二进制数组
          header: {
            'content-type': 'application/json;charset=utf-8'
          },
          method: 'POST',
          success(res) {
            //转为base64
            let bin64 = wx.arrayBufferToBase64(res.data);
 
            that.setData({
              //base 64设置到页面上
              qrcode_image: "data:image/png;base64," + bin64
            });
          }
        })
      }
    })
  }
})

下面是页面代码

<!--pages/haibao/haibao.wxml-->
 
<button bindtap="formSubmit">点击生成海报</button>
 
<view class='imagePathBox' hidden="{{maskHidden == false}}">
    <image src="{{imagePath}}" class='shengcheng' ></image>
    <button class='baocun' bindtap='baocun'>点击保存至相册,分享到朋友圈</button>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view> 
<view class="canvas-box">
    <canvas  style="width:375px;height:670px;position:fixed;top:9999px" canvas-id="mycanvas"/>
</view>

下面也发一下样式文件

/* pages/mentality/result/result.wxss */
page{ background:#fff;}
 
 
.imagePathBox{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.mask{
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,0.7); */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
}
.shengcheng{
  width: 80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}
.baocun{
  display: block;
  width: 80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #45be8d;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
}
 
.shareFriends{
  display: block;
  width: 80%;
  height: 104rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #45be8d;
  color: rgb(211, 208, 208);
  font-size: 32rpx;
  border-radius: 44rpx;
}
 
 
button[class="baocun"]::after{
  border: 0;
}
 
/* canvas绘图 */
/* .canvas-box{
  width:0rpx;
  height:0rpx;
  overflow: hidden;
  position: fixed;
  left:0rpx;
  bottom:30rpx;
  z-index: 9999;
} */

效果图来一张

image.png

微信小程序生成海报并保存到本地（附带二维码生成）

小程序端刚刚拿到了一个新的需求说要生成一张海报 用户保存图片到本地分享，话不多说直接上代码

下面是页面代码

下面也发一下样式文件

效果图来一张

小程序端刚刚拿到了一个新的需求说要生成一张海报用户保存图片到本地分享，话不多说直接上代码