微信小程序canvas生成分享海报

因为微信的限制，小程序无法分享到朋友圈，所有大多数小程序都是采取生成分享海报保存到相册，然后由用户分享到朋友圈，小程序生成海报需要用到canvas组件。这里已mars小程序的分享海报为例子，阐述一下实现过程。

生成的mars分享界面

步骤1：添加canvas画布

一般来说会有两个画布，一个画布用于页面中间显示，另外还有一个两倍的画布，在界面之外。保存图片的时候，保存第二个画布里面的内容。这里暂时只写一个画布。

wxml:
<canvas canvas-id='myCanvas' class='canvas-content' style='height:{{totalHeight * canvasScale}}px;width:{{375*canvasScale}}px'>
  <cover-view class='save-button' bindtap='saveImage'>
    <cover-image src="../../img/icon_download_image.png" class="share-image"></cover-image>
  </cover-view>
</canvas>



wxss:
.canvas-content{
  display: flex;
  top: 0;
  left: 0;
  /* left: 500%;  分享图不显示在页面上面，就将画布设置在页面之外*/
}

.save-button {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  bottom: 40rpx;
  right: 40rpx;
  border-radius: 50rpx;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
}

.save-button .share-image {
  position: absolute;
  top: 22rpx;
  left: 22rpx;
  width: 36rpx;
  height: 36rpx;
}

步骤2：绘制前准备

  /**
   * 页面的初始数据
   */
  data: {
    model: {
      topImageUrl: 'http://imgmars.yohobuy.com/mars/2018/05/26/d939c526b9d84e0a16544de381af7d09.jpg',
      mallUrl: 'http://www.yohomars.com/admin/images/logo/C.jpg?imageView/1/w/100/h/100',
      name: '春丽咖啡公司春丽咖啡公司',
      city: '北京',
      content: '“春丽咖啡公司”是京城人气很高的“春丽吃饭公司”开的新店，延续了餐厅不走寻常路的装修风格，开在南三里屯路上一个非常本土化的小超市底下，白瓷砖，小木窗，其貌不扬的店面装潢反而让它在洋气的三里屯显得更加与众不同。虽然主打“随性”的风格，但春丽咖啡公司对于咖啡的制作却相当讲究，店里的咖啡豆也是由北京少有的获得 SC 卫生许可证的烘焙师来供应的，包括危地马拉、埃塞俄比亚等等的精品级别的豆子，不论是机器、豆子和牛奶都很有品质，且一天卖完 102 杯就不卖了。但因为店面不大，这里的咖啡只能外带或者坐在门口即饮，想象自己拿着酷似二锅头的瓶子喝着草莓拿铁，非常酷了！',
      address: '北京市 朝阳区南三里屯路',
      contentImages: [{
          image: 'http://imgmars.yohobuy.com/mars/2018/4/26/9ba2ac0468fc769b0d6097e800a133f5.jpg'
        },
        {
          image: 'http://imgmars.yohobuy.com/mars/2018/4/26/ab18f7d32fb94f7d9a275c76439a1982.jpg'
        }
      ],
    },
    windowWidth: 0,
    windowHeight: 0,
    totalHeight: 0,
    canvasScale: 1.0,// 画布放大的倍数,因为如果保存的是一倍的分享图片的话，分享图会有点虚。所以保存的时候，canvasScale设置为2.0，wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let that = this
   // 获取到屏幕的宽高等信息
    wx: wx.getSystemInfo({
      success: function(res) {
        that.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        })
      }
    })
  },

步骤3 绘制分享海报

  /**
   * 绘制分享海报
   */
  begainDrawShareImage() {
    var that = this
    // 适配屏幕
    let scale = this.data.windowWidth / 375.0
 
    this.setData({ totalHeight: 667* scale})
    // 获取Canvas
    let ctx = wx.createCanvasContext('myCanvas')

    // 放大 因为不放大的话，生成的分享图会模糊。暂时先注释
    ctx.scale(this.data.canvasScale, this.data.canvasScale)

    // 绘制主背景白色
    ctx.setFillStyle('#ffffff')
    ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
    ctx.draw()

    // 首先要绘制顶部的背景图片，因为它在最底层，然后才能绘制其他内容
    let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片，所以转成int
    let topImageHeight = parseInt(250 * scale)
    let src1 = this.data.model.topImageUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
    wx.getImageInfo({
      src: src1,
      success: function(res) {
        ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
        // 覆盖黑色蒙层
        ctx.setFillStyle('rgba(0,0,0,0.3)')
        ctx.fillRect(0, 0, topImageWidth, topImageHeight)

        ctx.draw(true)

        that.drawOtherContent(ctx, scale)
        that.drawOtherImage(ctx,scale)
      }
    })
  },

  // 绘制除了图片之外的剩余内容
  drawOtherContent(ctx, scale) {

    // 绘制中间的灰色背景
    ctx.setFillStyle('rgba(246,246,246,1)')
    ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 158 * scale)

    //name
    ctx.setFillStyle('white');
    ctx.setFontSize(30 * scale);
    this.canvasTextAutoLine(this.data.model.name, ctx, 80 * scale, 220 * scale, 35 * scale, 258 * scale, 1)

    // cotent
    ctx.setFillStyle('#3c3c3c');
    ctx.setFontSize(15 * scale);
    this.canvasTextAutoLine(this.data.model.content, ctx, 30 * scale, 270 * scale, 22 * scale, 305 * scale, 4)

    // address
    ctx.setFillStyle('#dadada');
    ctx.setFontSize(15 * scale);
    this.canvasTextAutoLine(this.data.model.address, ctx, 30 * scale, 370 * scale, 22 * scale, 305 * scale, 1)

    this.drawNormalText(ctx, '探索新鲜好去处', 82 * scale, 596 * scale, 14 * scale, '#3C3C3C', 'left', 'middle', scale);
    this.drawNormalText(ctx, '长按右侧小程序码', 82 * scale, 620 * scale, 12 * scale, '#9A9CAC', 'left', 'middle', scale);
    this.drawNormalText(ctx, '查看更多店铺信息和热评', 82 *scale,635*scale, 12*scale, '#9A9CAC', 'left', 'middle', scale);

    ctx.draw(true)

  },

  // 绘制剩余图片
  drawOtherImage(ctx, scale) {

    let that = this

    let mallImageWidth = parseInt(57 * scale)
    let mallImageHeight = parseInt(57 * scale)
    let src1 = this.data.model.mallUrl + `?imageView/2/w/${mallImageWidth}/h/${mallImageHeight}`
    wx.getImageInfo({
      src: src1,
      success: function (res) {
        ctx.drawImage(res.path, 20 * scale, 184*scale, mallImageWidth, mallImageHeight)
        ctx.draw(true)
      }
    })

    let cotentImageWidth = parseInt(166 * scale)
    let cotentImageHeight = parseInt(166 * scale)
    for (let i = 0; i < this.data.model.contentImages.length; i++){
      let imageItem = this.data.model.contentImages[i]
      let src1 = imageItem.image + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
      wx.getImageInfo({
        src: src1,
        success: function (res) {
          ctx.drawImage(res.path, 15 * scale + i*180*scale, 400 * scale, cotentImageWidth, cotentImageHeight)
          ctx.draw(true)
        }
      })
    }

    // icon 
    // ctx.setShadow(0, 8 * scale, 20, 'rgba(0,0,0,0.1)')  
    ctx.drawImage('../../img/mars.png', 13 * scale, 590 * scale, 54*scale, 54*scale)
    // ctx.setShadow(0, 0, 0, 'white')
    ctx.draw(true)
  },

  // 绘制只有一行的文字
  drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
    ctx.setFontSize(font);
    ctx.setFillStyle(style);
    ctx.setTextAlign(align);
    ctx.setTextBaseline(baseLine);
    ctx.fillText(str, x, y);
  },


  /*
  *  绘制多行文本，自动换行，超出添加...
  *
  str:要绘制的字符串
  canvas:canvas对象
  initX:绘制字符串起始x坐标
  initY:绘制字符串起始y坐标
  lineHeight:字行高，自己定义个值即可
  maxWidth: 文本最大宽度
  row: 最大行数
  */
  canvasTextAutoLine: function(str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
    var lineWidth = 0;
    var lastSubStrIndex = 0;
    var currentRow = 1;
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width;
      if (lineWidth > maxWidth) {
        currentRow++;
        let newStr = str.substring(lastSubStrIndex, i)
        if (currentRow > row && str.length > i) {
          newStr = str.substring(lastSubStrIndex, i - 2) + '...'
        }
        ctx.fillText(newStr, initX, initY);
        initY += lineHeight;
        lineWidth = 0;
        lastSubStrIndex = i;

        if (currentRow > row) {
          break;
        }
      }
      if (i == str.length - 1) {
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
      }
    }
  },

步骤4 保存图片

  // 保存图片
  saveImage(){
    let that = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.windowWidth * this.data.canvasScale,
      height: this.data.totalHeight * this.data.canvasScale,
      canvasId: 'myCanvas',
      success: function (res) {
        that.saveImageToPhotos(res.tempFilePath);
      },
      fail: function (res) {
        wx.showToast({
          title: '图片生成失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },
  saveImageToPhotos: function (tempFilePath) {
    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success(result) {
        wx.showToast({
          title: '保存成功，从相册中分享到朋友圈吧',
          icon: 'none',
          duration: 4000
        })
      },
      fail: function (res) {
          wx.showToast({
            title: '图片保存失败',
            icon: 'none',
            duration: 2000
          })
      }
    })
  },

步骤5 获取小程序码

小程序码如果直接由前端请求微信获取的话，返回的是base64的data数据 ，而且在小程序发布之前，传入path参数的话还会报错。所以最好又后台获取小程序码（参数可控），并且返回给前端一个图片URL，然后就绘制其他图片一样绘制小程序码即可。

最后

生成分享海报遇到最大的一个麻烦是多行文本的绘制，后来用measureText测长度，然后截断字符串解决的。文中已经封装成了一个方法，直接调用即可。当然这些也可以将生成分享海报的代码写在一个组件当中，写在组件中需要注意两个地方wx.createCanvasContext(canvasId, this) 和 wx.canvasToTempFilePath(OBJECT, this)后面都需要加上this。

最后附上demo 地址
)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,734评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,931评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,133评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,532评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,585评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,462评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,262评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,153评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,587评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,635评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,237评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2赞 354

推荐阅读更多精彩内容