微信小程序生成海报保存到手机功能实现

本文所用api 在2.9.0基础库后已被废弃，有了更接近原生的使用体验的api

微信小程序2.9.0基础库canvas2D新API，生成海报保存到手机功能实现，包括文字换行，圆形图片，图片高度自适应等功能封装

利用canvas微信小程序原生实现生成海报到本地

展示给用户看到的是html元素，保存的时候才绘制canvas生成图片保存，海报根据图片定，定宽，高度自适应

先准备一张画布

cvHeight cvWidth 动态给

<canvas class='canvas' style='height:{{cvHeight}}px;width:{{cvWidth}}px;' canvas-id="myCanvas" />

绘制过程

1. 获取海报内容或者下载图片，图片信息–微信的api

wx.getImageInfo({
  src: ‘图片路径’,
  success(res) {
    that.setData({
      //此处res得到图片信息，包括宽高
    })
    //确保图片等内容信息都拿到后可以开始绘制了
  }

2. 此处有个适配UI稿问题还有个文字的换行为题，以下

//系统信息
const {
  windowWidth
} = wx.getSystemInfoSync()
const createRpx2px = (rpx) => {
  return windowWidth / 375 * rpx
}
//换行的文字数组
const getBreak = (str,num=1) => {
  let arr = [];
  let item = '';
  let len = Math.ceil(getByteLen(str)/num);
  for(let i = 0;i<len;i++){
    item = str.substring(i*num,(i+1)*num);
    arr.push(item)
  }
  return arr;
}
//获取字符串长度（汉字算两个字符，字母数字算一个）
const getByteLen = (val)=>{
  var len = 0;
  for (var i = 0; i < val.length; i++) {
      var a = val.charAt(i);
      if (a.match(/[^\x00-\xff]/ig) != null) {//\x00-\xff→GBK双字节编码范围
          len += 2;
      }
      else {
          len += 1;
      }
  }
  return len;
}

3. 开始画布初始化了()里数值看自己设计稿,某些重复类似内容去掉了，可以根据自己想法封装好想用即用。

//计算一些宽高啥的
let cvWidth = createRpx2px(750); //画布的宽  数值设计稿来的
let multiple = createRpx2px(that.data.bgImgW) / cvWidth; //图片和设计稿宽度的倍数
let w = cvWidth; //图片宽度
let h = createRpx2px(that.data.bgImgH) / multiple; //图片高度
let fingerprint = getBreak(that.data.certificateInfo.fingerprint, 36); //需换行文字
let userH = createRpx2px(60 + 40 + 6 + 45 + 40 + 40 + 8 + 45 + 40 + 40 + 8 + fingerprint.length * 45 + 100 + 120); //整个高度  --- 看设计高来，先把高度计算好
let cvHeight = h + userH; //画布的高

// 动态设置画布大小
that.setData({
  cvWidth,
  cvHeight
})

//获取画布上下文
const ctx = wx.createCanvasContext('myCanvas');
// 设置背景
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, cvWidth, cvHeight);
// 绘制图片
ctx.drawImage(that.data.bgImgPath, 0, 0, w, h);


//写入一段文字 一行
ctx.setFontSize(createRpx2px(26))
ctx.setFillStyle('#6F6F7A')
ctx.setTextAlign('left')
ctx.fillText('哈哈哈', createRpx2px(40), h + createRpx2px(80))
ctx.stroke()

// 作品指纹  换行  fingerprint在前面已经拿了
for (let i = 0; i < fingerprint.length; i++) {
  ctx.setFontSize(createRpx2px(32))
  ctx.setFillStyle('#232225')
  ctx.setTextAlign('left')
  ctx.fillText(fingerprint[i], createRpx2px(40), h + createRpx2px(384 + i * 45))
  ctx.stroke()
}

//一个框，如果你的海报有底部框的话
ctx.setFillStyle('#F5F5F5')
ctx.fillRect(0, cvHeight - createRpx2px(120), cvWidth, createRpx2px(120))

//绘制小程序码圆形白底
ctx.setFillStyle('#FFFFFF')
ctx.beginPath();
ctx.arc(cvWidth - createRpx2px(130), cvHeight - createRpx2px(120), createRpx2px(90),0,2*Math.PI);
ctx.fill();

// 绘制小程序码/绘制logo等等
ctx.drawImage(that.data.wxCode, cvWidth - createRpx2px(210), cvHeight - createRpx2px(200), createRpx2px(160), createRpx2px(160))

// 渲染
ctx.draw(false, function () {
  wx.hideLoading();//绘制要时间，加个loading啥的
  that.saveImg();//可以去保存图片了
})

保存图片

let that = this
let cvWidth = that.data.cvWidth;//画布宽高
let cvHeight = that.data.cvHeight;
//把canvas转成图片，进行保存
wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  width: cvWidth,
  height: cvHeight,
  destWidth: cvWidth * 2, //2倍关系
  destHeight: cvHeight * 2, //2倍关系
  canvasId: 'myCanvas',
  success: function (res) {
    wx.saveImageToPhotosAlbum({
      //shareImgSrc为canvas赋值的图片路径
      filePath: res.tempFilePath,
      success(res) {
        wx.showToast({
          title: '保存成功',
          icon: 'success'
        })
      }
    })
  },
  fail: function (res) {
    wx.showToast({
      title: '保存失败',
      icon: 'none'
    })
  }
})

结束

具体实现还是要根据自己需求，和设计稿来，不过一般的海报，单行，多行文字，海报图片，logo，二维码，上述基本满足的。也可以封装好给个数值直接搞掂。