https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/wxss.html
比较卡顿的手机会偶现导出的图片字体未渲染，输出发现字体样式在图片导出后才渲染成功
<template>
<view class="fixBox">
<snapshot id="target" mode="view" class="snapshotBox">
<view
:class="['contentWrap', wxCode && wxCode != '' ? 'hasCode' : 'noCode']"
>
<image :src="userImg" class="userImg" />
<view class="textBox">
<view v-if="loadFamily2" class="name">{{ name }}</view>
<view v-if="loadFamily2" class="time">{{ time }} 获得</view>
</view>
<image
id="centerImg"
:src="image"
class="pic"
:style="{ height: imgHeight + 'px' }"
/>
<image :src="cardImg" class="cardImg" />
<image v-if="wxCode && wxCode != ''" :src="wxCode" class="wxCode" />
</view>
</snapshot>
</view>
</template>
<script>
export default {
name: "card-skyline",
props: {
name: {
type: String,
default: "",
},
time: {
type: String,
default: "",
},
cardImg: {
type: String,
default: "",
},
userImg: {
type: String,
default: "",
},
image: {
type: String,
default: "",
},
wxCode: {
type: String,
default: "",
},
},
data() {
return {
canvasWidth: 0, // 默认canvas宽高
canvasHeight: 0,
widget: null,
showPoster: false,
imgHeight: 0,
loadFamily2: false,
};
},
mounted() {},
methods: {
renderToCanvas() {
// console.log(111);
uni.loadFontFace({
family: "qiantubifengshouxieti",
source: "https://cdn.studytour.info/font/千图笔锋手写体.woff",
success: () => {
console.log("千图笔锋手写体 success");
},
fail: (error) => {
console.warn("千图笔锋手写体 fail", error.errMsg);
},
complete: () => {
console.log("千图笔锋手写体 complete");
let _this = this;
_this.loadFamily2 = true;
uni.getImageInfo({
src: _this.image,
success: (image1) => {
console.log("开始生成1");
let width100 = _this.rpxToPx(640);
let widthImg = _this.rpxToPx(580);
_this.imgHeight = (image1.height / image1.width) * widthImg;
_this.canvasWidth = width100;
let minHeight;
if (_this.wxCode && _this.wxCode != "") {
minHeight = _this.rpxToPx(430);
} else {
minHeight = _this.rpxToPx(230);
}
_this.canvasHeight = _this.imgHeight + minHeight;
setTimeout(() => {
_this.convertToCanvas();
}, 1000);
},
});
},
});
},
rpxToPx(rpx) {
// 获取设备的宽度
const deviceWidth = uni.getSystemInfoSync().windowWidth;
// 设计稿宽度，通常是750rpx
const designWidth = 750;
// 将rpx转换为px
return (rpx / designWidth) * deviceWidth;
},
convertToCanvas() {
// console.log(222);
let _this = this;
_this
.createSelectorQuery()
.select("#target")
.node()
.exec((res) => {
console.log(res);
const node = res[0].node;
let time = new Date().getTime();
node.takeSnapshot({
type: "arraybuffer",
format: "png",
success: (res) => {
// console.log(444);
console.log(res, "resres");
const f = `${wx.env.USER_DATA_PATH}/${time}.png`; //照着写
const fs = uni.getFileSystemManager();
fs.writeFileSync(f, res.data, "binary");
console.log(f, "路径");
_this.$emit("update:parentData", f); // 触发自定义事件，并传递新值
},
fail(err) {
// console.log(err);
_this.$parent.goBack();
uni.showToast({
title: "图片转换失败",
icon: "none",
duration: 2000,
});
},
});
});
},
},
};
</script>
<style>
page {
font-family: qiantubifengshouxieti;
}
.fixBox {
position: fixed;
top: -300vh;
left: -300vw;
background: #fff;
}
.snapshotBox {
background: #fff;
}
.contentWrap {
width: 640rpx;
background: #fff;
position: relative;
vertical-align: top;
}
.hasCode {
padding: 40rpx 0 16rpx;
}
.noCode {
padding: 40rpx 0 30rpx;
}
.contentWrap .userImg {
width: 120rpx;
height: 120rpx;
margin-bottom: 40rpx;
margin-left: 30rpx;
border-radius: 50%;
/* margin-top: 40rpx; */
}
.contentWrap .textBox {
position: absolute;
left: 180rpx;
width: 460rpx;
height: 120rpx;
top: 52rpx;
}
.contentWrap .textBox .name {
font-family: qiantubifengshouxieti;
font-size: 38rpx;
line-height: 54rpx;
color: #333333;
}
.contentWrap .textBox .time {
font-family: qiantubifengshouxieti;
font-size: 28rpx;
line-height: 40rpx;
color: #999;
margin-top: 6rpx;
}
.contentWrap .pic {
width: 580rpx;
margin: 0 30rpx;
border-radius: 28rpx;
}
.contentWrap .wxCode {
/* position: absolute;
left: 244rpx;
bottom: 16rpx; */
width: 152rpx;
height: 152rpx;
margin: 22rpx 244rpx 0;
}
.contentWrap .cardImg {
position: absolute;
width: 180rpx;
height: 180rpx;
right: 20rpx;
top: 70rpx;
}
</style>
