小程序 生成分享图 记录

最近接手开发了一个小程序项目,里面有一个分享封面图功能,做的过程中遇到了一些问题,特此记录

因为目前在小程序中是没有截屏功能的,如果我们需要生成一张完整的封面图做分享,前端最方便的方案大概就是使用canvas了,利用canvas的图片导出功能,可以很方便的生成一张完整的图出来,下面就记录一下过程中遇到的问题

主界面

生成的图

rpx转px

因为canvas中是没有rpx这个单位的,所以当我们在绘制的过程中,先要把rpx转为px

rpxToPx(rpx) {
    let px = Math.ceil(rpx / 750 * windowWidth) // windowWidth可以在全局变量中先存储
    return px
  }

绘制单行文字

这里一共用到了小程序里面的两个api,和一个属性

ctx.setFillStyle: 设置字体颜色 ctx.setFillStyle(color)
ctx.font: 设置字体属性 normal weight 16px sans-serif
ctx.fillText 绘制字体 这个api需要注意的是,x和y的坐标是定在文字的左下角的,我们一般画图的x和y都是左上角。当我们画文字时,y的坐标就需要加上文字的行高 ctx.fillText(text, x, y + text.lineHeight)

绘制多行文字

当我们如果需要绘制的文字过长,但是canvas里面又没有自动换行的功能,这时就需要我们手动计算每行文字的显示长度,然后进行截取,这里用到了一个api
measureText: 它可以测量文本尺寸信息,返回当前文字的宽度

width = ctx.measureText(str).width

然后我们进行累加,当中宽度超出最大宽度的时候,就进行截取,然后重新计算宽度,示例代码

  let lastSubStrIndex = 0
  let lineHeight = item.lineHeight
  let initHeight = item.y
for(let i = 0; i < str.length; i++){
      lineWidth += ctx.measureText(str[i]).width
      if(lineWidth > maxWidth){
        ctx.fillText(str.substring(lastSubStrIndex, i), item.x, initHeight)
        initHeight += lineHeight
        lastSubStrIndex = i
        lineWidth = 0

      }
      if (i == str.length - 1) {//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), item.x, initHeight)
      }
    }

圆角矩形

drawRect(ctx,obj){
    let x = obj.x // x坐标
    let y = obj.y // y坐标
    let w = obj.w // 宽度
    let h = obj.h // 高度
    let r = obj.r // 半径
    ctx.beginPath();
    ctx.setFillStyle('#fff');
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.lineTo(x + w, y + r);
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + w, y + h - r);
    ctx.lineTo(x + w - r, y + h);
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + h);
    ctx.lineTo(x, y + h - r);
   

绘图

在小程序中,我们如果想把网络图片绘制到canvas中,事先需要先把图片缓存下来,可以使用getImageInfo先把图片缓存下来

wx.getImageInfo({
      src: imgUrl,
      success: (res) => {
        imgUrl = res.path
       
      }
    })

保存图片

function savePicToAlbum(tempFilePath,callback) {
  let that = this;
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success(res) {
                wx.showToast({
                  title: '保存成功'
                });
                callback && callback()
              }
            })
          },
          fail() {
            // 用户拒绝授权,打开设置页面
            wx.openSetting({
              success: function (data) {
                console.log("openSetting: success");
              },
              fail: function (data) {
                console.log("openSetting: fail");
              }
            });
          }

        })
      } else {
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
            });
          },
          fail(res) {
            console.log(res);
          }
        })
      }
    },
    fail(res) {
      console.log(res);
    }
  })
}

最后推荐一个小程序里面的图片裁剪组件we-cropper

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 3,972评论 2 29
  • 1 Canvas接口元素定义 1.1 getContext()方法 为了在canvas上绘制,你必须先得到一个画布...
    Kevin_Junbaozi阅读 938评论 1 2
  • 小程序海报组件 https://github.com/jasondu/wx... 需求 小程序分享到朋友圈只能使用...
    极乐叔阅读 8,232评论 1 6
  • 神奇且强大的canvas 一.Canvas的基本介绍 1.什么是Canvas 定义:是HTML5提供的一种新标签,...
    Ainy尘世繁花终凋落阅读 6,848评论 0 17
  • 吸引定律是勤奋人的进阶石,懒人的借口。我从小就养成了懒惰、拖延的习惯(其实快乐和不快乐都是一种习惯,快乐的人习惯快...
    GK黎强阅读 51评论 0 0
  • 广西南宁的夜景-民歌湖 南宁民歌湖酒吧街坐落于金浦路中段的民歌广场中央,当你走近最先入眼的是颇具现代风格的...
    黑蛋王阅读 602评论 0 1
  • 今天跟爷爷小吵了一架。 我家在东北乡村,算是个小镇子,这边有坐席的这个习俗,哪都有吧!我稍微有些社交恐惧症,不爱去...
    H建宇阅读 437评论 0 0
  • 刚过去的一年,每天过的都大不相同,其实让我难以忘怀的年份有很多,但2015对于现在的我而言,无疑是个让我行走在崩溃...
    佐末格阅读 94评论 0 3
  • 公司:扬州市方圆建筑工程有限公司 姓名:张建 组别:第363期(哈尔滨)反省一组 【精进打卡第0053天】 ...
    青山依旧_08f1阅读 211评论 0 0