# tui-poster 生成分享海报会员组件

介绍

生成分享海报常用示例，js方法封装，组件请使用 tui-poster 绘制海报

注意

生成海报接口返回的图片，必须可以下载到本地，不要直接使用案例图片或其他任意第三方图片，小程序端图片对应的域名需要在小程序后台配置。
页面中需要加入 canvas 标签，且 id 设置成与方法中传入的一直，如下面示例id传入的为 posterId

# 引入

请自行将js文件复制进项目中，并确保路径正确

//根据实际路径引入

//uni-app
import poster from '@/components/common/tui-poster/tui-poster.js'

//微信小程序
const poster = require('../../../components/common/tui-poster/tui-poster.js');

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

<!--示例中使用到的组件请自行引入-->
<template>
 <view class="container">
 	<view class="tui-page__hd">
 		<view class="tui-page__title">poster</view>
 		<view class="tui-page__desc">生成分享海报</view>
 	</view>
 	<view class="tui-page__bd  tui-page__spacing">
 		<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" @click="createPoster">商品海报</tui-button>
 	</view>
 	<!--务必加入canvas-->
 	<canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId" class="tui-poster__canvas"></canvas>
 	<tui-modal custom :show="show" backgroundColor="transparent" padding="0" @cancel="hideModal">
 		<view class="tui-poster__box">
 			<image src="/static/images/layout/icon_popup_closed.png" class="tui-close__img" @tap.stop="hideModal"></image>
 			<image :src="posterImg" v-if="posterImg" class="tui-poster__img"></image>
 			<tui-button type="danger" width="460rpx" height="80rpx" shape="circle" @click="savePic">保存图片</tui-button>
 			<view class="tui-share__tips">保存图片到手机相册后，将图片分享到您的圈子</view>
 		</view>
 	</tui-modal>
 </view>
</template>

<script>
 import poster from '@/components/common/tui-poster/tui-poster.js'
 export default {
 	data() {
 		return {
 			posterImg: '',
 			winWidth: uni.upx2px(560 * 2),
 			winHeight: uni.upx2px(890 * 2),
 			show: false
 		};
 	},
 	methods: {
 		async createPoster() {
 			if (this.posterImg) {
 				this.show = true;
 				return;
 			}
 			uni.showLoading({
 				// #ifndef MP-ALIPAY
 				mask: true,
 				// #endif
 				title: '图片生成中...'
 			});
 			let mainPic = await poster.getImage('https://thorui.cn/extend/common/img_book.jpg');
 			let qrcode = await poster.getImage('https://thorui.cn/extend/share/applets.png');
 			// #ifdef MP-WEIXIN
 			await poster.removeSavedFile();
 			// #endif
 			if (mainPic && qrcode) {
 				const imgs = {
 					mainPic: mainPic,
 					qrcode: qrcode
 				};
 				let text = '一个人的修养，看失意时的善良 陶瓷兔子 北京联合出版有限公司';
 				//posterId 为canvas-id，与标签中设置一致
 				poster.drawGoodsPoster('posterId', this.winWidth, this.winHeight, imgs, text, '36.50', '99.80', 'ThorUI示例小程序',
 					res => {
 						uni.hideLoading();
 						if (res) {
 							this.posterImg = res;
 							setTimeout(() => {
 								this.show = true;
 							}, 60);
 						} else {
 							this.tui.toast('生成海报失败,请稍后再试');
 						}
 					});
 			} else {
 				uni.hideLoading();
 				this.tui.toast('生成海报图片下载失败,请稍后再试');
 			}
 		},
 		hideModal() {
 			this.show = false;
 		},
 		savePic() {
 			if (this.posterImg) {
 				// #ifdef H5
 				uni.previewImage({
 					urls: [this.posterImg]
 				});
 				// #endif

 				// #ifndef H5
 				poster.saveImage(this.posterImg);
 				// #endif

 				this.hideModal();
 			}
 		}
 	}
 };
</script>

<style>
 .tui-poster__canvas {
 	background-color: #fff;
 	position: absolute;
 	left: -9999px;
 }

 .tui-poster__box {
 	width: 100%;
 	position: relative;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 }

 .tui-close__img {
 	width: 48rpx;
 	height: 48rpx;
 	position: absolute;
 	right: 0;
 	top: -60rpx;
 }

 .tui-poster__img {
 	width: 560rpx;
 	height: 890rpx;
 	border-radius: 20rpx;
 	margin-bottom: 40rpx;
 }

 .tui-share__tips {
 	font-size: 24rpx;
 	transform: scale(0.8);
 	transform-origin: center center;
 	color: #ffffff;
 	padding-top: 12rpx;
 }
</style>

<!--微信小程序-->
<view class="container">
 <view class="tui-page__hd">
 	<view class="tui-page__title">poster</view>
 	<view class="tui-page__desc">生成分享海报</view>
 </view>
 <view class="tui-page__bd  tui-page__spacing">
 	<tui-button type="gray-primary" size="{{34}}" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" bindclick="createPoster">商品海报</tui-button>
 </view>
 <canvas style="width: {{winWidth + 'px'}}; height: {{winHeight + 'px'}}" canvas-id="posterId" id="posterId" class="tui-poster__canvas"></canvas>
 <tui-modal custom show="{{show}}" backgroundColor="transparent" padding="0" bindcancel="hideModal">
 	<view class="tui-poster__box">
 		<image src="/static/images/layout/icon_popup_closed.png" class="tui-close__img" catchtap="hideModal"></image>
 		<image src="{{posterImg}}" wx:if="{{posterImg}}" class="tui-poster__img"></image>
 		<tui-button type="danger" width="460rpx" height="80rpx" shape="circle" bindclick="savePic">保存图片</tui-button>
 		<view class="tui-share__tips">保存图片到手机相册后，将图片分享到您的圈子</view>
 	</view>
 </tui-modal>
</view>

// data 数据 及 方法
const poster = require('../../../components/common/tui-poster/tui-poster.js');
import tui from '../../../common/httpRequest'
Page({
 data: {
   posterImg: '',
   winWidth: 0,
   winHeight: 0,
   show: false
 },
 onLoad(){
    this.setData({
     winWidth: tui.rpx2px(560 * 2),
     winHeight:tui.rpx2px(890 * 2)
    })
 },
 async createPoster() {
   if (this.data.posterImg) {
     this.setData({
       show:true
     })
     return;
   }
   wx.showLoading({
     mask: true,
     title: '图片生成中...'
   });
   let mainPic = await poster.getImage('https://thorui.cn/extend/common/img_book.jpg');
   let qrcode = await poster.getImage('https://thorui.cn/extend/share/applets.png');
   await poster.removeSavedFile();
   if (mainPic && qrcode) {
     const imgs = {
       mainPic: mainPic,
       qrcode: qrcode
     };
     let text = '一个人的修养，看失意时的善良 陶瓷兔子 北京联合出版有限公司';
     poster.drawGoodsPoster('posterId', this.data.winWidth, this.data.winHeight, imgs, text, '36.50', '99.80', 'ThorUI示例小程序',
       res => {
         wx.hideLoading();
         if (res) {
           this.setData({
             posterImg:res
           })
           setTimeout(() => {
             this.setData({
               show:true
             })
           }, 60);
         } else {
           tui.toast('生成海报失败,请稍后再试');
         }
       });
   } else {
     wx.hideLoading();
     tui.toast('生成海报图片下载失败,请稍后再试');
   }
 },
 hideModal() {
   this.setData({
     show:false
   })
 },
 savePic() {
   if (this.data.posterImg) {
     poster.saveImage(this.data.posterImg);
     this.hideModal();
   }
 }
})

.tui-poster__canvas {
  background-color: #fff;
  position: absolute;
  left: -9999px;
}

.tui-poster__box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tui-close__img {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  right: 0;
  top: -60rpx;
}

.tui-poster__img {
  width: 560rpx;
  height: 890rpx;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
}

.tui-share__tips {
  font-size: 24rpx;
  transform: scale(0.8);
  transform-origin: center center;
  color: #ffffff;
  padding-top: 12rpx;
}

// Make sure to add code blocks to your code group

# 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 程序名称
**/