# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码