Canvas 制作海报

 

• HTML

<template>
	<view class="content">
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white border_radius_10px padding1vh">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button>
				</view>
			</view>
		</view>

		<button type="primary" @tap="shareFc()">生成海报</button>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

 

• JS

<script>
	import _app from '@/util/QS-SharePoster/app.js';
	import getSharePoster from '@/util/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId'
			}
		},
		methods: {

			async shareFc() {
				try {
					if (!this.poster.finalPath) {
						const d = await getSharePoster({
							type: 'testShareType',
							posterCanvasId: this.canvasId,
							qrCodeArray: ({bgObj, type, bgScale}) => {
								return [{
									text: 'xiazhenjie',
									size: bgObj.width*0.25,
									dx: bgObj.width*0.05,
									dy: bgObj.height - bgObj.width*0.25 - 50
								}]
							},
							imagesArray: ({bgObj, type, bgScale}) => { //接收的第一个参数为背景图片的信息, 第二个参数是自定义标识（感觉这里用不到）, 图片为示例图片
								const dx = bgObj.width*0.3;
								return [
									{
										url: '/static/good_image.jpg',
										dx:0,
										dy: 80,
										infoCallBack(imageInfo) {
											let scale = bgObj.width*0.2 / imageInfo.height;
											return {
												dWidth: bgObj.width,
												dHeight: bgObj.height*0.4,
											}
										}
									},
									{
										url: '/static/2.jpg',
										dx,
										dy: bgObj.height - bgObj.width*0.25 - 50,
										infoCallBack(imageInfo) {
											let scale = bgObj.width*0.2 / imageInfo.height;
											return {
												circleSet: {
													x: imageInfo.width * scale/2,
													y: bgObj.width*0.2/2,
													r: bgObj.width*0.2/2
												},	// 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width * scale,	// 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width*0.2,
												roundRectSet: {	// 圆角矩形
													r: imageInfo.width*0.1
												}
											}
										}
									},
								]
							},
							textArray: ({bgObj, type, bgScale}) => {
								const fontSize = bgObj.width*0.045;
								const lineHeight = bgObj.height*0.04;
								return [
									{
										// fontStyle: 'bold',
										text: '【新品】大牌来袭，香港直邮教育是护肤品2件套金和爽肤露',
										size: 15,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx: 2,
												dy: 10
											}
										}
									},
									{
										text: '200ml温和清洁乳200ml撒娇好多话莪个月 恶客额度金额的',
										size: 15,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: 2,
												dy: 32
											}
										}
									},
									{
										text: '话后过来的.',
										size: 15,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: 2,
												dy: 54
											}
										}
									},
									{
										text: '限时特卖 19日21:00开抢',
										size: 15,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: 120,
												dy: 345
											}
										}
									},
									{
										text: '美美的夏末的店铺',
										size: 15,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - 160,
												dy: bgObj.height - 130
											}
										}
									},
									{
										text: '美利',
										size: 12,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - 160,
												dy: bgObj.height - 110
											}
										}
									},
									{
										text: '¥219.00',
										size: 15,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - 260,
												dy: bgObj.height - 50
											}
										}
									},
									{
										text: '长按图片识别 二维码查看商品详情',
										size: 12,
										color: '#333333',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - 260,
												dy: bgObj.height - 30
											}
										}
									},
								]
							},
							setCanvasWH: ({bgObj, type, bgScale}) => { // 为动态设置画布宽高的方法，
								this.poster = bgObj;
								this.poster.height = 600;
							},
							setDraw: ({Context, bgObj, type, bgScale}) => {
								Context.setFillStyle('#F5F4F9');
								Context.setGlobalAlpha(0.6);
								Context.fillRect(0, bgObj.height - bgObj.height*0.2 - 40, bgObj.width, bgObj.height*0.2 + 30);
							}
						});
						console.log('海报生成成功， 临时路径: ' + d.poster.tempFilePath)
						this.poster.finalPath = d.poster.tempFilePath;
					}
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},

			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},

			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},

			hideQr() {
				this.qrShow = false;
			}

		}
	}
</script>

 

• CSS

.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(3);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		/* padding: 1vh; */
		padding-top: 20px;
	}
	.padding1vh2{
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.posterImage {
		width: 80vw;
		height: 40vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}

 

参考：https://ext.dcloud.net.cn/plugin?id=471

项目地址 ：https://dev.tencent.com/u/Coding-Neo/p/CanvasPoster/git