评论

生成分享海报(canvas2d)

不使用组件,canvas2d,生成海报图片。

  • 目的:

不使用组件,生成海报图片。

  • 效果:


  • 代码如下:

wxml:

<view style="width:100%;height:{{canvasHeight}}px;">
    <canvas wx:if="{{!showImg}}" type="2d" id="myCanvas" style="width:100%;height:100%;"></canvas>
    <image wx:else src="{{imgSrc}}" style="width: 100%;height: 100%;" show-menu-by-longpress="true"></image>
</view>


js:

data: {
    name"Sun",
    sign"靡不有初,鲜克有终。",
    posterUrl""// 海报地址
    photoUrl""// 头像地址
    qrcodeUrl""// 二维码
    photoDiam50// 头像直径
    qrcodeDiam80// 小程序码直径
    infoSpace13// 底部信息的间距
    bottomInfoHeight100// 底部信息区高度
    tips"长按或扫码了解更多"// 提示语
    canvasWidth0// 画布宽
    canvasHeight0// 画布高
    canvasDom: null, // 画布dom对象
    canvas: null, // 画布的节点
    ctx: null, // 画布的上下文
    dpr1// 设备的像素比
    posterHeight0// 海报高
    imgSrc:'',
    showImg: false,
},


其实也就是看文档,踩了一些坑,也看了社区的一些问答,但总的来说官方文档可以满足使用。

主要使用方法如下

ctx.drawImage(pic, 00, res.width, res.height) // 绘制大图,头像和二维码 到 canvas

ctx.fillText(this.data.name, 00)  // 绘制文字

ctx.fillRect(0this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight) // 底部白色背景

// 把canvas 绘制成 图片
wx.canvasToTempFilePath({
  canvas: that.data.canvas,
  fileType: 'jpg',
  success: function (res) {
  console.log(res.tempFilePath)
  that.setData({
   imgSrc:res.tempFilePath,
   showImg:true,
    })
  }
})


  • 拓展阅读:

painter组件生成海报

完。


最后一次编辑于  2021-12-03  
点赞 0
收藏
评论

3 个评论

  • a'ゞ玉米粒 🌽
    a'ゞ玉米粒 🌽
    2022-06-22

    大佬可否看下完整代码呢

    2022-06-22
    赞同
    回复
  • DX
    DX
    2022-03-22

    能不能完整点

    2022-03-22
    赞同
    回复
  • 我
    2022-03-01

    没学过前端的我啥都看不懂文档 大佬能加我如何使用uchars画报表吗

    2022-03-01
    赞同
    回复
登录 后发表内容