更新记录

V3.0（2025-03-12） 下载此版本

2025.3

平台兼容性

uni-app

其他



<template>
  <view>
    <!-- 操作按钮 -->
    <view class="actions">
      <view @click="createPoster()">
        生成海报
      </view>
    </view>
    <zl-canvas-poster
      ref="posterEle"
      @successPoster="successPoster"
    ></zl-canvas-poster>
    <view class="preview-poster" v-if="showPoster">
      <image :src="posterUrl" class="posterImg" mode="widthFix"></image>
      <view class="download-btn" @click="$refs.posterEle.savePoster()">
        保存海报
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        showPoster: false,
        posterUrl: '',
      }
    },
    methods: {
      createPoster() {
        console.log(2434)
        this.$refs.posterEle.drawPoster()
      },
      successPoster(url) {
        console.log(url, 'url')
        this.posterUrl = url
        this.showPoster = true
      },
    },
  }
</script>
<style lang="scss" scoped>
  .actions {
    position: absolute;
    top: 0;
    left: 0;
    color: #000;
    display: flex;
    align-items: center;

    > view {
      margin: 10px;
      width: 120px;
      height: 38px;
      background-color: orange;
      color: #fff;
      border-radius: 60rpx;
      line-height: 38px;
      text-align: center;
    }
  }

  .preview-poster {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);

    .posterImg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 16rpx;
      width: 280px;
    }

    .download-btn {
      color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 260px);
    }
  }
</style>

对应图片示例，直接复制粘贴即可