UviewUltra 4.0

Appearance

Poster 海报生成 4.4.0 ​

该组件用于生成海报图片，支持自定义背景、文本、图片、二维码等元素。（部分兼容l-painter组件）。

平台差异说明 ​

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|√|√|√|

基础用法 ​

通过配置 json 属性来定义海报内容和样式。

vue
<template>
  <view class="u-page">
    <view class="u-page__item">
      <up-button type="primary" shape="circle" @click="generatePoster">生成海报</up-button>
      
      <!-- 海报预览区域 -->
      <view class="poster-preview" v-if="posterImageUrl">
        <image :src="posterImageUrl" class="poster-image" mode="widthFix"></image>
      </view>

      <!-- 海报组件 -->
      <up-poster 
        ref="poster" 
        :json="posterConfig"
      ></up-poster>
    </view>
  </view>
</template>
js
<script setup>
import { ref } from 'vue';

const poster = ref(null);
const posterImageUrl = ref('');

const posterConfig = ref({
  css: {
    width: '750rpx',
    height: '1000rpx',
    background: '#fff'
  },
  views: [
    {
      type: 'text',
      text: '夏日清凉特惠',
      css: {
        position: 'absolute',
        color: '#fff',
        left: '50rpx',
        top: '100rpx',
        fontSize: '40rpx',
        fontWeight: 'bold'
      }
    },
    {
      type: 'image',
      src: 'https://example.com/product.png',
      css: {
        position: 'absolute',
        left: '150rpx',
        top: '250rpx',
        width: '450rpx',
        height: '450rpx'
      }
    },
    {
      type: 'text',
      text: '立即抢购',
      css: {
        position: 'absolute',
        color: '#ff6600',
        left: '300rpx',
        top: '750rpx',
        fontSize: '36rpx',
        fontWeight: 'bold'
      }
    }
  ]
});

const generatePoster = async () => {
  try {
    uni.showLoading({ title: '海报生成中...' });
    const result = await poster.value.exportImage();
    posterImageUrl.value = result.path;
    uni.hideLoading();
    uni.showToast({ title: '海报生成成功', icon: 'success' });
  } catch (error) {
    uni.hideLoading();
    uni.showToast({ title: '海报生成失败', icon: 'none' });
  }
};
</script>

自定义背景图海报 ​

通过设置 background 为图片链接，可以创建自定义背景图的海报。

vue
<template>
  <view class="u-page">
    <view class="u-page__item">
      <up-button type="primary" shape="circle" @click="generatePoster">生成海报</up-button>
      
      <!-- 海报预览区域 -->
      <view class="poster-preview" v-if="posterImageUrl">
        <image :src="posterImageUrl" class="poster-image" mode="widthFix"></image>
      </view>

      <!-- 海报组件 -->
      <up-poster 
        ref="poster" 
        :json="posterConfig"
      ></up-poster>
    </view>
  </view>
</template>
js
<script setup>
import { ref } from 'vue';

const poster = ref(null);
const posterImageUrl = ref('');

const posterConfig = ref({
  css: {
    width: '750rpx',
    height: '1000rpx',
    background: 'https://example.com/background.jpg'
  },
  views: [
    {
      type: 'text',
      text: '夏日清凉特惠',
      css: {
        position: 'absolute',
        color: '#fff',
        left: '50rpx',
        top: '100rpx',
        fontSize: '40rpx',
        fontWeight: 'bold'
      }
    },
    {
      type: 'image',
      src: 'https://example.com/product.png',
      css: {
        position: 'absolute',
        left: '150rpx',
        top: '250rpx',
        width: '450rpx',
        height: '450rpx'
      }
    },
    {
      type: 'text',
      text: '立即抢购',
      css: {
        position: 'absolute',
        color: '#ff6600',
        left: '300rpx',
        top: '750rpx',
        fontSize: '36rpx',
        fontWeight: 'bold'
      }
    }
  ]
});

const generatePoster = async () => {
  try {
    uni.showLoading({ title: '海报生成中...' });
    const result = await poster.value.exportImage();
    posterImageUrl.value = result.path;
    uni.hideLoading();
    uni.showToast({ title: '海报生成成功', icon: 'success' });
  } catch (error) {
    uni.hideLoading();
    uni.showToast({ title: '海报生成失败', icon: 'none' });
  }
};
</script>

渐变背景海报 ​

支持线性渐变和径向渐变背景。

vue
<template>
  <view class="u-page">
    <view class="u-page__item">
      <up-button type="primary" shape="circle" @click="generatePoster">生成海报</up-button>
      
      <!-- 海报预览区域 -->
      <view class="poster-preview" v-if="posterImageUrl">
        <image :src="posterImageUrl" class="poster-image" mode="widthFix"></image>
      </view>

      <!-- 海报组件 -->
      <up-poster 
        ref="poster" 
        :json="posterConfig"
      ></up-poster>
    </view>
  </view>
</template>
js
<script setup>
import { ref } from 'vue';

const poster = ref(null);
const posterImageUrl = ref('');

const posterConfig = ref({
  css: {
    width: '750rpx',
    height: '1000rpx',
    background: 'linear-gradient(45deg, #ff9a9e, #fecfef)'
  },
  views: [
    {
      type: 'view',
      css: {
        position: 'absolute',
        left: '60rpx',
        top: '150rpx',
        width: '630rpx',
        height: '700rpx',
        background: 'rgba(255, 255, 255, 0.9)',
        radius: '20rpx'
      }
    },
    {
      type: 'text',
      text: '限时优惠',
      css: {
        position: 'absolute',
        color: '#ff4d4f',
        left: '250rpx',
        top: '200rpx',
        fontSize: '48rpx',
        fontWeight: 'bold'
      }
    },
    {
      type: 'text',
      text: '全场商品5折起',
      css: {
        position: 'absolute',
        color: '#666',
        left: '200rpx',
        top: '300rpx',
        fontSize: '36rpx'
      }
    }
  ]
});

const generatePoster = async () => {
  try {
    uni.showLoading({ title: '海报生成中...' });
    const result = await poster.value.exportImage();
    posterImageUrl.value = result.path;
    uni.hideLoading();
    uni.showToast({ title: '海报生成成功', icon: 'success' });
  } catch (error) {
    uni.hideLoading();
    uni.showToast({ title: '海报生成失败', icon: 'none' });
  }
};
</script>

API ​

Props ​

参数名说明类型默认值可选值
json海报配置JSON数据Object--

json 配置项 ​

参数名说明类型默认值
css海报容器样式Object-
views海报元素列表Array-

json.css 容器样式 ​

参数名说明类型默认值
width海报宽度String750rpx
height海报高度String1114rpx
background背景颜色或图片链接String-

json.views 元素配置 ​

参数名说明类型默认值
type元素类型String-
text文本内容(仅text类型)String-
src图片地址(仅image/qrcode类型)String-
css元素样式Object-

views元素类型 ​

类型说明
text文本元素
image图片元素
qrcode二维码元素
view矩形容器元素

css 样式属性 ​

参数名说明类型默认值
position定位方式Stringabsolute
left距离左边距离String0rpx
top距离顶部距离String0rpx
width元素宽度String-
height元素高度String-
color文字颜色(仅text类型)String#000
fontSize文字大小(仅text类型)String-
fontWeight文字粗细(仅text类型)Stringnormal
lineHeight行高(仅text类型)String-
lineClamp最大行数(仅text类型)Number-
background背景颜色(仅view类型)String-
radius圆角大小String-
shadow阴影效果String-

Event ​

事件名说明回调参数
export海报导出完成时触发result

Methods ​

方法名说明参数返回值
exportImage导出海报图片-Promise