Popular blog tags

过canvas绘制成图片,这样用户保存这个图片到相册,就可以分享到朋友圈了。但是要绘制的图片上面不仅有文字还有数字、图片、二维码等且都是活的,这个要怎么动态生成呢。认真想了下,需要一点一点的将文字和数字,背景图绘制到画布上去,这样通过api最终合成一个图片导出到手机相册中。

 

step 1:首先创建canvas画布。

我把画布定位设成负的,是为了不让它显示在页面上,是因为我尝试把canvas通过判断条件动态的显示和隐藏,在绘制的时候会出现问题,所以采用了这种方法,这里还有一定要设置画布的大小。

miniprogram/pages/my/UserPosterQrCodeService/index.wxml

<!--画布:生成海报-->
<view class="canvas-box">
  <canvas style="width: 600px;height: 970px;" canvas-id="mycanvas" />
</view>

step 2:绘制背景图。

首先创建canvas的绘图上下文CanvasContext对象,

其次通过CanvasContext中的属性进行绘制,

最后通过draw()将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

 

创建好画布之后,先绘制背景图,因为背景图我是放在本地,所以获取 <canvas> 组件 canvas-id 属性,通过 createCanvasContext 创建canvas的绘图上下文 CanvasContext 对象。使用 drawImage 绘制图像到画布,第一个参数是图片的本地地址,后面两个参数是图像相对画布左上角位置的x轴和y轴,最后两个参数是设置图像的宽高。

JS:(将 JS 放在 onLoad 中)

onLoad: function (options) {
    const ctx = wx.createCanvasContext("mycanvas");
    ctx.setFillStyle("red");
    ctx.fillRect(10, 10, 150, 75);
    ctx.draw();
  },

 

微信公众号如何生成海报

Github: wuxianghou/postmaker