# tui-poster 生成分享海报
介绍
生成分享海报常用示例
注意
生成海报接口返回的图片,必须可以下载到本地,不要直接使用案例图片或其他任意第三方图片,小程序端图片对应的域名需要在小程序后台配置。
# 引入
//根据实际路径引入
//uni-app
import poster from '@/components/common/tui-poster/tui-poster.js'
//微信小程序
const poster = require('../../../components/common/tui-poster/tui-poster.js');
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
//生成商品海报,以下示例仅为展示,不可直接使用,具体使用请查看示例项目
async createPoster() {
let mainPic = await poster.getImage('https://thorui.com/common/img_book.jpg');
let qrcode = await poster.getImage('https://thorui.com/share/applets.png');
if (mainPic && qrcode) {
const imgs = {
mainPic: mainPic,
qrcode: qrcode
};
let text = '一个人的修养,看失意时的善良 陶瓷兔子 北京联合出版有限公司';
poster.drawGoodsPoster('posterId', winWidth, winHeight, imgs, text, '36.50', '99.80', 'ThorUI示例小程序',
res => {
if (res) {
//生成成功
console.log(res)
} else {
//生成海报失败,请稍后再试
}
});
} else {
//生成海报图片下载失败,请稍后再试
}
}
# Methods
注意有些方法支持的平台,可参考uni-app或小程序官方的文档
方法名 | 说明 | 传入参数 |
---|---|---|
drawPoster | 绘制分享海报 | 见详细介绍 |
drawGoodsPoster | 绘制商品海报 | 见详细介绍 |
getImage | 网络图片转成本地文件 | url(网络图片地址) |
removeSavedFile | 删除已缓存文件,防止超出存储空间大小限制(微信小程序) | - |
getImagebyBase64 | 当服务器端返回图片base64时,转成本地文件 (微信小程序) | base64 |
saveImage | 将海报图片保存到本地(APP和微信小程序) | file(海报图片路径) |
方法 drawPoster 参数详细说明
/**
* 绘制分享海报
* @param canvasId
* @param winWidth 宽度
* @param winHeight 高度
* @param imgs 主图以及二维码图
* 格式 {mainPic: mainPic,qrcode: qrcode}
* @param text 描述文字
* @param name 程序名称
**/
方法 drawGoodsPoster 参数详细说明
/**
*绘制商品海报
* @param canvasId
* @param winWidth 宽度
* @param winHeight 高度
* @param imgs 主图以及二维码图
* 格式 {mainPic: mainPic,qrcode: qrcode}
* @param text 商品名称
* @param price 价格 格式 12.00,10.50
* @param originalPrice 原价 格式 12.00,10.50
* @param name 程序名称
**/
👇
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |