uni——画布、海报（留存笔记）

网址：https://ext.dcloud.net.cn/plugin?id=1287

代码：

<template>
	<view class="body">
		<canvas id="posters" class="canvas" type="2d" :style="{width:width+'px',height:height+'px'}"
			canvas-id="posters"></canvas>

		<image class="bg" :src="$common.image('/static/bgImg.png')" mode=""></image>
		<view class="content">
			<view class="topLogo">
				<image class="logoImage" :src="$common.image('/static/logo.png')" mode=""></image>
			</view>
			<view class="spreadBox">
				<image class="spreadCode" :src="$common.imageNet(mCodeImage)" mode=""></image>
			</view>
			<view class="button">
				<text class="button2" @click="download()">
					保存分享
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from '@/common/uqrcode.js'
	export default {
     
		data() {
     
			return {
     
				// 二维码图片
				mCodeImage: '',

				poster: '',
				width: 676,
				height: 1010,
				canvas: null,
				ctx: null,
				sys: null,
				bodyHeight: 0,
				qrocdeUrl: '',
				posterUrl: '',
			}
		},

		onReady() {
     
			// 准备完毕之后
			this.renderCanvas()
			// const query = wx.createSelectorQuery().in(this)
			// query.select('#foot').boundingClientRect(res => {
     
			// 	this.bodyHeight = this.sys.windowHeight - res.height
			// }).exec()
		},
		onLoad(options) {
     
			// 这一步是获取系统信息，当前这里使用的是自己封装好的方法uni.getSystemInfoSync();
			this.sys = this.$common.getSys()
			// 当前二维码是后端已经生成好的图片，mCodeImage后面会用到
			this.getCodes(