【微信小程序】小程序使用canvas画布生成分享朋友圈的海报

思路：

 

利用小程序组件canvas放置一个画布，然后再利用布局吧canvas画布隐藏，让其绘制成的图片显示在我们的前端页面上面就可以了，最后在利用API将图片保存到我们手机上面就完成了。

上代码！

wxml:

<!-- 画布大小按需定制 这里我按照背景图的尺寸定的  -->
<canvas canvas-id="shareImg" style="width:540px;height:771px"></canvas>
  
<!-- 预览区域  -->
<view hidden='{
  {hidden}}' class='preview'>
  <view class='sherimg_boxs'>
    <image src='{
  {prurl}}' mode='widthFix'></image>
    <button type='primary' size='mini' bindtap='save'>保存图片</button>
  </view>
</view>

wxss:

canvas{
  position: fixed;
  top: 0;
  left: 4000px;
}
.share{
  position: absolute;
  bottom: 100rpx;
  width: 70%;
  left: 15%;
  height: 100rpx;
  line-heig