最终生成的样式
注释已经打好，详情看代码
<template>
<view class="canvas-box">
<!-- 导航栏 -->
<view class="nav-box">
<view class="title-top" :style="'padding-top:' + statusBarHeight + 'rpx'">
<u-icon class="title-icon" name="arrow-left" color="#ffffff" size="36" @click="getBack"></u-icon>
<text>海报分享</text>
</view>
</view>
<!-- 开发完成之前，取消 fixed;opacity: 0;-->
<canvas style=" 346px;height: 500px;position: fixed;opacity: 0;" class="canvas" canvas-id="canvasID"></canvas>
<!-- 完成海报制作后，需要把canvas移到看不见的地方，或者隐藏，把image显示出来 -->
<image :src="imgUrl" mode=""></image>
<view class="footer">
<view class="download" @click="saveImage">
<!-- 小于符号图标 -->
<u-icon name="download" color="#ffffff" size="34"></u-icon>
<text>保存到相册</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
statusBarHeight: 0,
avatar: '../../../../static/images/default-chat-avatar.png', //头像地址
hello: '../../../../static/images/share/weixin-hi.png', // hello图标
mony: '../../../../static/images/share/mony.png' //圆的钱图标
}
},
created() {
this.$tool.getSystemInfo().then(res => {
this.statusBarHeight = res
})
},
mounted() {
let ctx = uni.createCanvasContext('canvasID', this);
// ctx.setFillStyle("transparent"); //设置canvas背景颜色
// ctx.fillRect(0, 0, 346, 500) //设置canvas画布大小
this.fillRoundRect(ctx, 0, 0, 346, 500, 15); //绘制一个圆角矩形
this.fillRoundRect(ctx, 0, 0, 346, 182, 15, '#333231'); //绘制一个圆角矩形
this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像
ctx.setFontSize(18)
ctx.setFillStyle("#ffffff")
ctx.fillText('明天依然是晴天', 98, 65)
ctx.drawImage(this.hello, 240, 10, 86, 86) //二维码
ctx.font = '20px normal'
ctx.setFillStyle("#09CFB1")
ctx.fillText('我为“贤马”带盐', 30, 122)
ctx.font = '16px normal'
ctx.setFillStyle("#ffffff")
ctx.fillText('“闲么？上贤马做兼职”', 20, 152)
// 绘制职位标题，多余文字自动换行
ctx.setFontSize(28)
ctx.setFillStyle("#333333")
let str = '店铺实习生ZAra重庆龙湖时代'
// 字符串总长度
let _strLength = str.length
// 总结截取次数
let _strNum = Math.ceil(_strLength / 9)
// 每次开始截取字符串的索引
let _strHeight = 0
// 绘制的字体 x,y的初始位置
let _strX = 27,
_strY = 223
let strIndex = 223
// 开始截取
for (let i = 0; i < _strNum; i++) {
strIndex = _strY + i * 40
ctx.fillText(str.substr(_strHeight + i * 9, 9), _strX, _strY + i * 40)
}
strIndex += 30
ctx.setFontSize(14)
ctx.setFillStyle("#1BB99A")
let strtitle = '环境好/结算快/时间短'
ctx.fillText(strtitle, _strX, strIndex)
ctx.setFontSize(20)
ctx.setFillStyle("#333231")
ctx.fillText('16元/小时', _strX, 418)
this.drawCircular(ctx, this.mony, _strX, 429, 14, 14) //绘制圆形头像
ctx.setFontSize(12)
ctx.setFillStyle("#F7BA65")
ctx.fillText('已预付', _strX + 20, 440)
// 绘制微信二维码
ctx.drawImage(this.hello, 208, 370, 120, 120) //二维码
ctx.draw(false, () => {
// 返回canvas图片信息
uni.canvasToTempFilePath({
canvasId: 'canvasID',
success: (res) => {
this.imgUrl = res.tempFilePath
// console.log(res.tempFilePath)
},
fail: function(err) {
console.log(err)
}
})
})
},
methods: {
getBack() {
uni.navigateBack({
delta: 1
});
},
saveImage() { //点击保存
var _this = this;
uni.saveImageToPhotosAlbum({
filePath: _this.imgUrl,
success() {
uni.showModal({
title: "保存成功",
content: "图片已成功保存到相册，快去分享到您的圈子吧",
showCancel: false
})
}
})
},
// 将网络图片转为临时图片地址
async getImageInfo({imgSrc}) {
return new Promise((resolve, errs) => {
uni.downloadFile({
src: imgSrc,
success: function(image) {
resolve(image);
},
fail(err) {
errs(err);
}
});
});
},
// 绘制圆形头像
drawCircular(ctx, url, x, y, width, height) {
//画圆形头像
var avatarurl_width = width;
var avatarurl_heigth = height;
var avatarurl_x = x;
var avatarurl_y = y;
ctx.save(); //先保存状态，已便于画完园再用
ctx.beginPath(); //开始绘制
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
.PI * 2, false);
ctx.setFillStyle("#FFFFFF")
ctx.fill() //保证图片无bug填充
ctx.clip(); //剪切
ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
ctx.restore();
},
// 绘制带圆角的矩形方法
fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
//圆的直径必然要小于矩形的宽高
if (2 * radius > width || 2 * radius > height) {
return false;
}
cxt.save();
cxt.translate(x, y);
//绘制圆角矩形的各个边
this.drawRoundRectPath(cxt, width, height, radius);
cxt.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
cxt.fill();
cxt.restore();
},
drawRoundRectPath(cxt, width, height, radius) {
cxt.beginPath(0);
//从右下角顺时针绘制，弧度从0到1/2PI
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
//矩形下边线
cxt.lineTo(radius, height);
//左下角圆弧，弧度从1/2PI到PI
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
//矩形左边线
cxt.lineTo(0, radius);
//左上角圆弧，弧度从PI到3/2PI
cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
//上边线
cxt.lineTo(width - radius, 0);
//右上角圆弧
cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
//右边线
cxt.lineTo(width, height - radius);
cxt.closePath();
}
}
}
</script>
<style lang="scss" scoped>
.canvas-box {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #1ABC9C;
/deep/.nav-box {
100%;
padding: 0 20rpx;
position: absolute;
z-index: 9999;
top: 0;
left: 0;
.title-top {
font-size: 36rpx;
font-weight: 550;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 30rpx;
.title-icon {
position: absolute;
left: 0;
}
}
}
image {
335px;
height: 500px;
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
justify-content: center;
padding: 0 40rpx;
100%;
left: 0;
bottom: 10%;
.download {
border: 1rpx solid #ffffff;
color: #ffffff;
display: flex;
align-items: center;
}
view {
padding: 0 20rpx;
height: 78rpx;
text-align: center;
line-height: 78rpx;
font-size: 30rpx;
border-radius: 36rpx;
}
}
}
</style>