分享海报的操作

最新推荐文章于 2024-05-02 18:12:22 发布

quanmeiren

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量115

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/quanmeiren/article/details/133815165

版权

<template>
	<Layout :activeIndex="3">

		<!-- 准备一个画布 -->
		<canvas canvas-id="poster" id="poster"></canvas>
		<button @click="draw">绘制</button>

		<!-- <uqrcode v-show="false" ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>
  <image style="width: 360px; height: 438px;" :src="cimgurl" show-menu-by-longpress></image> -->
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				bg_url: 'https://cdn.img.up678.com/u/11225972/2020/07/08/1594200688478467431.png',
				cimgurl: ''

			}
		},
		methods: {
			async draw() {
				// 得到画笔
				const ctx = uni.createCanvasContext('poster', this)

				// 绘制背景图片（把网络图片下载下来）
				const bgImg = await this.downloadImg(this.bg_url)
				ctx.drawImage(bgImg, 0, 0, 360, 438)

				ctx.save()

				// 画头像
				// 1. 获取头像
				const {
					headImg,
					nickName
				} = await this.getUserInfo()
				console.log(headImg, nickName)
				ctx.beginPath();
				ctx.arc(50, 50, 20, 0, 2 * Math.PI);
				ctx.clip();
				ctx.drawImage(headImg, 30, 30, 40, 40);


				// 绘制昵称
				ctx.restore()

				ctx.setFillStyle('red')
				ctx.setFontSize(18)
				ctx.setShadow(0, 5, 2, '#ff6900')

				ctx.fillText(nickName, 100, 100)

				ctx.save()
				ctx.draw()

				// 绘制二维码
				// 1. 生成二维码
				// 2. 将二维码保存到本地（本地存储的地址）
				// 3. 将二维码绘制到画布上
				//   const { tempFilePath } = await this.getQrcodeTemFilePath()

				//   ctx.drawImage(tempFilePath, 150, 150, 100, 100)


				//   ctx.draw()

				//   setTimeout(() => {
				//    uni.canvasToTempFilePath({
				//     canvasId: 'poster',
				//     success: res => {
				//      console.log(res)
				//      this.cimgurl = res.tempFilePath
				//     }
				//    })
				//   }, 50)

			},

			// getQrcodeTemFilePath() {
			//  return new Promise((resolve, reject) => {
			//   this.$refs.uqrcode.toTempFilePath({
			//     success: res => {
			//       resolve(res)
			//     }
			//   });
			//  })
			// },

			async getUserInfo() {
				const info = await uni.getUserProfile({
					desc: 'xxx'
				})
				// 下载头像得到本地地址
				const headImg = await this.downloadImg(info.userInfo.avatarUrl)
				return {
					headImg,
					nickName: info.userInfo.nickName
				}
			},

			async downloadImg(url) {
				const {
					tempFilePath
				} = await uni.downloadFile({
					url
				})
				// console.log(res)
				return tempFilePath
			}
		}
	}
</script>

<style>
	#poster {
		box-sizing: border-box;
		width: 360px;
		height: 438px;
		border: 1px solid red;
	}
</style>