<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>
分享海报的操作
最新推荐文章于 2024-09-02 17:34:07 发布