uniapp微信小程序生成分享海报(模板自取)_uniapp生成图片分享

uniapp微信小程序生成分享海报模板

1、模板自取

2、可自行按需求更改调整

3、效果图如下： 生成前  -----> 生成后的图

需知：博主的实现效果是先把需要生成的图片排版成静态页面，再点击生成海报----->通过canvas生成海报！！！

           不需要这样效果话可以省略第一步，直接一进页面调用方法生成canvas海报！！！( 示例大部分代码可省略 )

4、全部代码如下所示：

html：

<template>
    <view class="container">
       <view class="bigTitle">分享签到</view>
       <view class="bigTitleTwo">坚持打卡学习，和我一起吧！</view>
        
      <view class="shareBox">
        <view class="topTime">
            <view class="topItem">{ {todayTime}}</view>
            <view class="topItem">{ {today}}</view>
        </view>
        <!-- <u--image mode="widthFix" :showLoading="true" :src="mainPic" width="400rpx" height="400rpx"></u--image> -->
        <image :src="mainPic" mode="widthFix" class='bgImg'></image>
        <view class="shareText">
         <view class='text'>
             <rich-text :nodes="todaySaying || '-'"></rich-text>
         </view>
          <!-- <text class='text text2'> ———— 周杰伦《晴天》</text> -->
        </view>
     
        <view class='imgBox'>
          <button open-type="share" class='zfbtn'>
            <image src="http://www.meitang.cn/static/img/images/share_weixin.png" class='img'></image>
             <text class='btntxt'>分享朋友</text>
          </button>
          <button class='zfbtn m_l' @click="formSubmit">
            <image src="http://www.meitang.cn/static/img/images/share_fuzhi.png" class='img'></image>
            <text class='btntxt'>生成海报</text>
          </button>
        </view>
      
        <!--生成海报后的图  -->
          <view class='imagePathBox' :hidden="maskHidden == false">
            <image :src="imagePath" class='shengcheng' show-menu-by-longpress="true"></image>
            <button class='baocun' @click="baocun">保存相册，分享到朋友圈</button>
          </view>
         <view :hidden="maskHidden == false" class="mask"></view> 
        <view class="canvas-box">
            <!-- style="width: 500rpx;height: 840rpx;position:fixed;" -->
            <canvas canvas-id="mycanvas" style="width: 750rpx;height: 1334rpx;position:fixed;" />
        </view>  
      </view>
    </view>
   
</template>

    data数据：

    data() {
            return {
               formatDate,
               imgView:this.$api.viewFile,
               canvasW:375,     // 设备宽