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

50 阅读 0 评论 33 点赞

我是靠谱客的博主开朗小虾米，最近开发中收集的这篇文章主要介绍微信小程序生成海报保存到手机功能实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文所用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" />

绘制过程

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

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

此处有个适配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;
}

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

//计算一些宽高啥的
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'
    })
  }
})