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示例小程序码