uniapp海报生成

悠悠 2022-09-09 01:57 248阅读 0赞

<template>
    	<view class="content">
    		<canvas canvas-id="canID" id="canID"></canvas>
    	</view>
    </template>
    
    <script>
    	import {  posterCanvas } from '@/utils/yd-cenvas'
    	export default { 
    		name:"poster",
    		props:{ 
    			active:{ 
    				type:Object,
    				default:{ 
    					activeImg:"https://img1.baidu.com/it/u=3087781904,2825075289&fm=26&fmt=auto&gp=0.jpg"
    				}
    			}
    		},
    		data() { 
    			return { 
    				arr: [
    					{ 
    						type: 2,
    						imgCtx: [
    							// { 
    							// 	src: 'https://img2.baidu.com/it/u=3731647135,2048570786&fm=26&fmt=auto&gp=0.jpg',
    							// 	x: 30,
    							// 	y: 30,
    							// 	w: 80,
    							// 	h: 80,
    							// 	isArc: true
    							// },
    							{ 
    								src: this.active.activeImg,
    								x: 5,
    								y: 70,
    								w: 310,
    								h: 310,
    								isArc: false
    							}
    						]
    					},
    				 
    					{ 
    						type: 2,
    						imgCtx: [
    							{ 
    								src: 'https://img2.baidu.com/it/u=3048694672,3208316717&fm=26&fmt=auto&gp=0.jpg',
    								x: 20,
    								y: 400,
    								w: 50,
    								h: 50
    							}
    						]
    					},
    					{ 
    						type: 1,
    						textCtx: [
    							{ 
    								color: '#333',
    								fontSize: 16,
    								textAlign: 'left',
    								text: '微信用户',
    								x: 80,
    								y: 415
    							},
    							{ 
    								color: '#333',
    								fontSize: 14,
    								textAlign: 'left',
    								text: '订台：13076545346',
    								x: 80,
    								y: 445
    							}
    						]
    					},
    					{ 
    						type: 2,
    						imgCtx: [
    							{ 
    								src: 'https://img1.baidu.com/it/u=3971381075,863986575&fm=26&fmt=auto&gp=0.jpg',
    								x: 240,
    								y: 400,
    								w: 50,
    								h: 50
    							}
    						]
    					},
    				]
    			}
    		},
    		created() { 
    			posterCanvas({ 
    			    canvasId: 'canID', 
    			    arr: this.arr,
    			    bgColor: '#f5f5f5',
    			    cw: 370,
    			    ch: 600
    			}).then(res => { 
    			    console.log(res)
    			});
    		}
    	}
    </script>
    <style lang="scss" scoped>
    	#canID { 
    		width: 750upx;
    		height: 1200upx;
    	}
    </style>

获取js

[下载地址https://download.csdn.net/download/weixin\_45932157/21698760][https_download.csdn.net_download_weixin_45932157_21698760]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_7_color_FFFFFF_t_70_g_se_x_16]

[https_download.csdn.net_download_weixin_45932157_21698760]: https://download.csdn.net/download/weixin_45932157/21698760
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8e874c9d8ac447be8f0bdc6af57a208f.png