uni-app canvas生成海报

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app canvas生成海报

在插件市场有一个朋友圈海报生成，效果类似，但是需求能用本地图片，可以小程序APP通用，标题的换行不要用measureText查找宽度后换行，因为在小程序的真机端这个会影响生成速度(影响较大)，急用欢迎联系

Harmonyos Next教程
1 回复

在uni-app中使用canvas生成海报是一个常见的需求，通常涉及到绘制图片、文字、图形等元素。以下是一个基本的代码示例，展示了如何使用uni-app的canvas组件生成一个简单的海报。

首先，在你的页面模板中，添加一个canvas组件：

<template>
  <view>
    <canvas canvas-id="posterCanvas" style="width: 375px; height: 667px;"></canvas>
    <button @click="generatePoster">生成海报</button>
    <image v-if="posterDataUrl" :src="posterDataUrl" style="width: 375px; height: 667px;"></image>
  </view>
</template>

然后，在页面的script部分，编写生成海报的逻辑：

<script>
export default {
  data() {
    return {
      posterDataUrl: ''
    };
  },
  methods: {
    generatePoster() {
      const ctx = uni.createCanvasContext('posterCanvas');
      
      // 绘制背景
      ctx.setFillStyle('#FFFFFF');
      ctx.fillRect(0, 0, 375, 667);
      
      // 绘制图片（假设你有一张图片路径）
      const imagePath = '/static/images/background.png'; // 替换为你的图片路径
      ctx.drawImage(imagePath, 0, 0, 375, 667);
      
      // 绘制文字
      ctx.setFontSize(24);
      ctx.setFillStyle('#000000');
      ctx.fillText('欢迎来到我的海报', 50, 300);
      
      // 绘制矩形框（可选）
      ctx.setStrokeStyle('#FF0000');
      ctx.setLineWidth(5);
      ctx.strokeRect(50, 400, 275, 100);
      
      // 绘制更多元素...
      
      // 绘制完成后，将canvas内容转换为图片数据URL
      ctx.draw(false, () => {
        uni.canvasToTempFilePath({
          canvasId: 'posterCanvas',
          success: (res) => {
            this.posterDataUrl = res.tempFilePath;
          },
          fail: (err) => {
            console.error('生成海报失败', err);
          }
        });
      });
    }
  }
};
</script>

在这个示例中，我们创建了一个canvas上下文，然后绘制了背景、图片、文字和矩形框。最后，使用canvasToTempFilePath方法将canvas内容转换为图片数据URL，并将其绑定到页面上显示的image组件的src属性。

请注意，实际应用中你可能需要处理更多的细节，比如图片的异步加载、文字的换行处理、更复杂的布局等。此外，为了确保在不同屏幕尺寸上都能正确显示，你可能还需要根据屏幕尺寸动态调整canvas的大小和绘制内容的坐标。

回到顶部