用的插件 这是地址https://ext.dcloud.net.cn/plugin?id=3276
用的插件 结果自己还踩了一堆坑 哎
首先引用组件的时候要让组件显示出来 不能隐藏可以选择定位然后放置到底层,当然要记得给上面的层级加个背景颜色,免得插件显示出来了
这是插件的调用和
canvasImage是要渲染的数据
// 海报生成成功 getImg(e)
// 生成失败 fail(err)
<view class="poster-box">
<lyz-canvas isRenderImage :board="canvasImage" @success="getImg" @fail="fail">
</lyz-canvas>
</view>
<script>
import lyzCanvas from "@/components/lyz-canvas/lyz-canvas.vue"//这是插件
import {LastMayday} from "@/pages_Inside/index/components/json/palette.js"//这是要渲染的数据
export default {
components: {lyzCanvas},
data() {
return {
dataObject:{
image:"", //大图
userImg:"", //头像
title: "", //标题
name: "", //昵称
time: "", //时间
prices: "", //价格
address: "", // 地址
remark:"", //详情
codeimage:"",//小程序码
},//海报参数
posterUrl:"",//海报路径
posterType:0,//海报生成情况 1,成功 2,失败
}
}
}
</script>
<style lang="scss" scoped>
//海报 定位+放置底层
.poster-box{
position: absolute;
top: -999px;
z-index: -1;
}
</style>
这是要渲染的数据
export const LastMayday = (data) => {
return ({
width: "680rpx",海报的宽度
height: "900rpx",//高度
background: "#FFFFFF",//背景颜色
views: [
{
type: "view",//元素类别
css: {
width: "680rpx",
height: "900rpx",
top: "0rpx",//左上角定位top值
left: "0rpx",//左上角定位top值
rotate: "0",//边框弧度 圆的话用50%
background: "#FFF",//当前元素的背景色
},
},
{//大图
type: "image",//图片
url: data.image,//图片路径
css: {
width: "680rpx",
height: "430rpx",
top: "0rpx",
left: "0rpx",
rotate: "0",
radius: "",
borderWidth: "",
borderColor: "#000000",
shadow: "",
mode: "scaleToFill",
},
},
{//标题
type: "text",
text: data.title,//文本内容 这里的文本如果有换行符也会换行
css: {
color: "#000000",
background: "rgba(0,0,0,0)",
width: "600rpx",//宽度
height: "25.740000000000002rpx",//相当于文本域高度
top: "440rpx",
left: "20rpx",
rotate: "0",
radius: "",
borderWidth: "",
borderColor: "#000000",
shadow: "",
padding: "0rpx",
fontSize: "35rpx",//字体大小
fontWeight: "normal",
maxLines: "1",//文本有几行
lineHeight: "25.974000000000004rpx",
textStyle: "fill",
textDecoration: "none",
fontFamily: "",
textAlign: "left",//对齐方式
},
},
});
}
然后在onLoad里面调用
3秒后执行,this.dataObject 是当前页面获取到的要渲染的数据
onLoad(options) {
setTimeout(() => {
// this.saveImgToLocal();
if(this.dataObject.userImg!=''&&this.dataObject.codeimage!=''){
this.canvasImage = new LastMayday(this.dataObject)
console.log(this.dataObject,'this.dataObject');
}
}, 3000)
},
在methods里
// 海报生成成功
getImg(e) {
console.log(e,'eeeeeee')
this.posterUrl = e
this.posterType=1
},
// 生成失败
fail(err) {
console.log("fail:" + JSON.stringify(err),"failfailfailfailfailfail");
this.posterType=2
},
// 点击生成贴图
beginCanvas() {
uni.showLoading({
title: '海报生成中'
})
this.orderTimer = setInterval(() => {
this.getquery()
}, 1000)
},
//海报生成状态查询
getquery(){
if(this.posterType==1){
setTimeout(() => {
uni.hideLoading()
clearInterval(this.orderTimer)
this.myshow = true
this.show = false
}, 1000)
}else if(this.posterType==2){
setTimeout(() => {
uni.hideLoading()
clearInterval(this.orderTimer)
this.canvasImage = new LastMayday(this.dataObject)
this.posterType=0
}, 1000)
}
},
//保存图片(){
SaveImage(index) {
let _this = this
if (index == 1) {
// 取消保存
_this.myshow &