PosterRender 实现微信下步伐 分享商品天生海报

PosterRender 是什么

PosterRender 是一种专注于天生高质量海报图像的技能或工具，常用于天生静态图片，特殊是适合用于营销、宣传和展示的图形设计。它通常用于在服务端或客户端渲染复杂的图像，包罗文字、图形、图标、背景等，天生可供下载或直接使用的终极图片格式（如 PNG 或 JPEG）。
PosterRender 用来做什么

• 营销海报天生：
  用于快速天生电商平台的商品促销海报、活动宣传海报等。
  
• 用户内容分享：
  在社交媒体上分享的内容卡片、个人成绩海报（如活动记录、学习记录等）。
  
• 模版化设计：
  通过可设置的模板，快速天生批量的海报，适合规模化需求。
  
• 动态内容渲染：
  根据用户数据动态天生个性化的海报，如公众号文章分享页、个人二维码推广图等。
  

PosterRender 的长处

• 高效性：
  能快速天生高质量的图像，特殊适合批量任务。
  
• 灵活性：
  支持高度定制化设计，可以通过模板调解文字、颜色、结构等细节。
  
• 跨平台支持：
  可以在服务端或客户端完成渲染，适合多种技能栈（如 Node.js、Python、前端欣赏器）。
  
• 自动化：
  可结合动态数据天生个性化内容，减少人工设计本钱。
  
• 高质量输出：
  支持高清图片输出，满意打印与表现需求。
  

PosterRender 的缺点

• 复杂性：
  对于初学者来说，模板设置与设计可能存在一定学习本钱。
  
• 性能依靠：
  如果在服务端渲染，天生大量高分辨率图片可能斲丧较多的盘算资源；如果在客户端渲染，可能受限于设备性能。
  
• 开辟本钱：
  自定义模板和动态渲染的实现需要一定的开辟工作量。
  
• 及时性限定：
  对于需要及时天生大量图片的场景（如高并发访问），可能需要额外优化或使用缓存机制。
  

PosterRender实例

• 实例是结合taro+react 实现微信小步伐分享商品
  
• 通过样式增加遮照，设置z-index 浮在页面上
  
• PosterRender list举行x，y轴坐标结构
  

1.   // 父组件代码
2.   import type { QrcodeRenderRef } from '@/components/Qrcode/QrcodeRender';
3.   import QrcodeRender from '@/components/Qrcode/QrcodeRender';
5.   const ref = useRef<QrcodeRenderRef>(null);
6.   <QrcodeRender ref={ref} />
7. // 子组件代码
8. import type { ForwardRefRenderFunction } from 'react';
9. import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
10. import type { PosterRenderRef } from '@poster-render/taro-react';
11. import { PosterRender } from '@poster-render/taro-react';
12. import { View } from '@tarojs/components';
13. import Taro, { pxTransform } from '@tarojs/taro';
14. import classNames from 'classnames';
16. import { getRoutineCode } from '@/services/promotion';
18. import styles from './styles.modules.less';
19. //设置海报的宽度和高度
20. const SIZE = {
21.   width: 315,
22.   height: 365
23. };
25. export interface QrcodeRenderRef {
26.   // 子组件暴露给父组件的方法
27.   open: () => Promise<void>;
28. }
30. const QrcodeRender: ForwardRefRenderFunction<QrcodeRenderRef> = (_, ref) => {
31.   const posterRender = useRef<PosterRenderRef>(null);
32.   // const [qrcode, setQrcode] = useState('');
33.   const [rendered, setRendered] = useState(false);
34.   const [visible, setVisible] = useState(false);
35.   const [data, setData] = useState<Promotion.CodeInfo>();
37.   // 请求接口 获取要渲染的数据
38.   const handleShow = useCallback(async () => {
39.     Taro.showToast({
40.       title: '正在生成',
41.       icon: 'loading',
42.       mask: true
43.     });
44.     const res = await getRoutineCode();
45.     if (res?.status !== 200) {
46.       Taro.showToast({
47.         title: '生成失败，请重试',
48.         icon: 'none'
49.       });
50.       return;
51.     }
53.     setData(res?.data);
54.     setVisible(true);
55.   }, []);
57.   useImperativeHandle(
58.     ref,
59.     () => ({
60.       open: async () => {
61.         handleShow().then().catch();
62.       }
63.     }),
64.     [handleShow]
65.   );
67.   const onRender = useCallback(async () => {
68.     Taro.hideLoading();
69.     setRendered(true);
70.   }, []);
72.   const handleHide = useCallback(async () => {
73.     setVisible(false);
74.     setRendered(false);
75.   }, []);
77.   const handleSave = useCallback(() => {
78.     posterRender.current?.savePosterToPhoto();
79.   }, []);
81.   return (
82.     <>
83.       <View
84.         catchMove
85.         className={classNames({
86.           [styles.qrcodeWrap]: true,
87.           [styles.qrcodeWrapShow]: rendered
88.         })}
89.       >
90.         <View className={styles.masker} onClick={handleHide} />
91.         <View className={styles.container}>
92.           <View className={styles.containerBox}>
93.             {visible && (
94.               <PosterRender
95.                 disableRerender
96.                 ref={posterRender}
97.                 canvasId="taro-poster-render"
98.                 renderType="image"
99.                 canvasWidth={SIZE.width}
100.                 canvasHeight={SIZE.height}
101.                 debug={false}
102.                 style={{
103.                   width: pxTransform(SIZE.width),
104.                   height: pxTransform(SIZE.height)
105.                 }}
106.                 showMenuByLongpress
107.                 onRender={onRender}
108.                 onLongTap={handleSave}
109.                 onRenderFail={(err) => console.error('onRenderFail', err?.message)}
110.                 onSave={(url) => {
111.                   console.warn('onSave', url);
112.                   Taro.showToast({
113.                     title: '保存成功',
114.                     icon: 'none',
115.                     duration: 2000
116.                   });
117.                 }}
118.                 onSaveFail={(err) => console.error('onSaveFail', err?.message)}
119.                 list={[
120.                   {
121.                     type: 'rect',
122.                     x: 0,
123.                     y: 0,
124.                     width: SIZE.width,
125.                     height: SIZE.height,
126.                     backgroundColor: '#fff',
127.                     borderWidth: 7,
128.                     radius: 16,
129.                     borderColor: '#00C8C8'
130.                   },
131.                   {
132.                     type: 'image',
133.                     width: 240,
134.                     height: 240,
135.                     backgroundColor: '#333333',
136.                     src: `${data?.url}`,
137.                     x: 37,
138.                     y: 47,
139.                     radius: 120,
140.                     mode: 'cover'
141.                   },
142.                   {
143.                     type: 'text',
144.                     x: (tw) => (SIZE.width - tw) * 0.5,
145.                     y: 310,
146.                     text: '长按识别或扫描二维码识别',
147.                     fontSize: 14,
148.                     color: '#999999',
149.                     width: (tw) => tw,
150.                     height: 19,
151.                     lineHeight: 19
152.                   }
153.                 ]}
154.               />
155.             )}
156.             <View className={styles.desc}>扫描该二维码与您绑定推广关系</View>
157.             <View onClick={handleSave} className={styles.close}>
158.               保存图片
159.             </View>
160.           </View>
161.         </View>
162.       </View>
163.     </>
164.   );
165. };
167. export default forwardRef(QrcodeRender);
168. // styles.modules.css 代码
169. }
170. .qrcodeWrap {
171.   position: fixed;
172.   top: -100%;
173.   left: -200%;
174.   z-index: -1;
175.   align-items: center;
176.   justify-content: center;
177.   width: 100%;
178.   height: 100%;
179. }
181. .qrcodeWrapShow {
182.   top: 0;
183.   left: 0;
184.   z-index: 9999999999;
185. }
186. .masker {
187.   position: absolute;
188.   top: 0;
189.   left: 0;
190.   width: 100%;
191.   height: 100%;
192.   background-color: rgba(0, 0, 0, 0.6);
193. }
194. .container {
195.   width: 100vw;
196.   height: 100vh;
197. }
199. .containerBox {
200.   position: relative;
201.   top: 50%;
202.   width: 315px;
203.   //height: 503px;
204.   margin: 0 auto;
205.   transform: translateY(-50%);
206. }
208. .desc {
209.   margin-top: 35px;
210.   color: #fff;
211.   font-weight: 400;
212.   font-size: 14px;
213.   font-style: normal;
214.   line-height: normal;
215.   text-align: center;
216. }
218. .close {
219.   position: absolute;
220.   left: 50%;
221.   display: flex;
222.   align-items: center;
223.   justify-content: center;
224.   width: 249px;
225.   height: 40px;
226.   margin-top: 30px;
227.   color: #fff;
228.   font-weight: 500;
229.   font-size: 18px;
230.   background-color: @primary-color;
231.   border-radius: 249px * 0.5;
232.   transform: translateX(-50%);
233. }

复制代码

实例图片

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。