uniapp将一个盒子以及内容生成海报的代码实例

下面是一个使用 `uni.canvasToTempFilePath` 生成海报的示例，包括一个盒子和内容：

<template>
  <view class="poster">
    <view class="box">
      <image src="/static/logo.png" class="logo"></image>
      <view class="text">
        <view class="title">{{title}}</view>
        <view class="subtitle">{{subtitle}}</view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
    <button @tap="savePoster">保存海报</button>
    <image :src="posterSrc" mode="widthFix"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '这里是标题',
      subtitle: '这里是副标题',
      desc: '这里是描述',
      posterSrc: ''
    }
  },
  methods: {
    savePoster() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: res => {
          this.posterSrc = res.tempFilePath
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    drawPoster() {
      const ctx = uni.createCanvasContext('myCanvas')
      ctx.setFillStyle('#fff')
      ctx.fillRect(0, 0, 750, 1334)
      ctx.setFillStyle('#000')
      ctx.setFontSize(40)
      ctx.fillText(this.title, 50, 150)
      ctx.setFontSize(30)
      ctx.fillText(this.subtitle, 50, 220)
      ctx.setFontSize(24)
      ctx.fillText(this.desc, 50, 300)
      ctx.drawImage('/static/logo.png', 500, 30, 200, 200)
      ctx.draw()
    }
  },
  mounted() {
    this.drawPoster()
  }
}
</script>

<style>
.poster {
  position: relative;
  width: 750rpx;
  height: 1334rpx;
  background-color: #fff;
}

.box {
  position: absolute;
  top: 200rpx;
  left: 50rpx;
  width: 650rpx;
  height: 600rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

.desc {
  font-size: 24rpx;
}
</style>

在这个示例中，我们创建了一个海报，包括一个盒子和内容。我们使用 `uni.canvasToTempFilePath` 将海报内容转换为临时文件路径，并将其显示在页面上。

需要注意的是，我们需要在 `mounted` 钩子函数中调用 `drawPoster` 方法来绘制海报内容，否则海报将是空白的。当用户点击保存海报按钮时，我们会调用 `savePoster` 方法来将海报内容转换为图片并显示在页面上。

你可以根据自己的需求，调整海报的内容和样式。