当前位置：网站首页>canvas生成海报
canvas生成海报
2022-06-22 21:03:00 【花归去】
安装
npm i html2canvas
npm install qrcodejs2 --save
引入
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2";
<template>
<div>
<div class="van_header">
<van-nav-bar
title="
海报
"
left-arrow
@click-left="onClickLeft"
>
<template #right>
<div class="saveclass">
<span
v-if="saveNum == 1"
@click="saveImage('posterImge', '海报')"
>保存</span
>
<span v-else @click="FinishImage('posterImge', '海报')"
>完成</span
>
</div></template
>
</van-nav-bar>
</div>
<div v-show="saveNum == 1">
<div
v-show="typeinform == 0"
ref="posterImge"
id="posterImgeId"
class="poster_bigbox"
>
<!-- 头部title文字 -->
<div class="titletext">
<div
class="toptext"
@click="Wordclick(0)"
:style="{
color: valuecolorWord,
'font-size': valuesliderWord + 'rem'
}"
>
{
{ specialTraining }}
</div>
<div class="toplefttext_box">
<div
class="toplefttext"
@click="Wordclick(1)"
:style="{
color: valuecolorWordone,
'font-size': valuesliderWordone + 'rem'
}"
>
{
{ wordone }}
</div>
<div
class="toprighttext"
@click="Wordclick(2)"
:style="{
color: valuecolorWordtwo,
'font-size': valuesliderWordtwo + 'rem'
}"
>
{
{ wordtwo }}
</div>
</div>
</div>
<!-- 个人信息 -->
<div class="information_box">
<div class="information_Insidebox">
<div class="top_information">
<div
@click="Wordclick(3)"
:style="{
color: valuecolorWordthree,
'font-size': valuesliderWordthree + 'rem'
}"
id="information"
class="top_information_left"
>
{
{ value }}
</div>
<div
contenteditable="true"
class="top_information_Inside"
@click="Wordclick(4)"
:style="{
color: valuecolorWordfour,
'font-size': valuesliderWordfour + 'rem'
}"
>
{
{ value1 }}
</div>
<div
@click="Wordclick(5)"
:style="{
color: valuecolorWordfive,
'font-size': valuesliderWordfive + 'rem'
}"
class="top_information_right"
>
{
{ value2 }}
</div>
</div>
<!-- 信息 -->
<div
class="informationclass"
:style="{
color: valuecolor,
'font-size': valueslider + 'px'
}"
>
<div>
联系人： <span>{
{ contact }}</span>
</div>
<div>
电话号码：<span>{
{ contacttel }}</span>
</div>
<div>地址： {
{ contactaddres }}</div>
</div>
<!-- 二维码 -->
<div class="qrcode_box">
<div class="qrcode_class" id="qrcode"></div>
</div>
<!-- -->
<div></div>
</div>
</div>
<img class="poster_back" :src="posterimg" alt="" />
<!-- 图片 -->
<vue-drag-resize
v-if="AddfileList.length != 0"
:w="AddImgList[index].AddImgWidth"
:h="AddImgList[index].AddImgHeight"
:x="AddImgList[index].AddImgLeft"
:y="AddImgList[index].AddImgTop"
:z="temp[index]"
:parent-limitation="true"
v-for="(item, index) in AddfileList"
:key="index"
@clicked="act(index)"
@dragging="dragging"
>
<!-- 调用接口时 scr（item.content）赋值为后端返回的图片地址 -->
<img
:src="item.content"
alt=""
:style="{
width: AddImgList[index].AddImgWidth + 'px',
height: AddImgList[index].AddImgHeight + 'px',
top: AddImgList[index].AddImgTop + 'px',
left: AddImgList[index].AddImgLeft + 'px'
}"
/>
</vue-drag-resize>
<!-- 文本 -->
<!-- -->
<vue-drag-resize
v-if="AddTetxListVal.length != 0"
:w="AddTetxList[index].AddTetxWidth"
:h="AddTetxList[index].AddTetxHeight"
:x="AddTetxList[index].AddTetxLeft"
:y="AddTetxList[index].AddTetxTop"
:z="temp[index]"
:parent-limitation="true"
v-for="(item, index) in AddTetxListVal"
:key="'text' + index"
@clicked="actAddText(index)"
@dragging="draggingAddText"
>
<div
class="addtextclass"
alt=""
:style="{
color: item.valcolor,
'font-size': item.valsize + 'rem',
width: AddTetxList[index].AddTetxWidth + 'px',
height: AddTetxList[index].AddTetxHeight + 'px',
top: AddTetxList[index].AddTetxTop + 'px',
left: AddTetxList[index].AddTetxLeft + 'px'
}"
>
{
{ item.valname }}
</div>
</vue-drag-resize>
</div>
<!-- 我的海报 -->
<div v-show="typeinform == 1"></div>
<van-image
v-show="imgUrl"
:src="imgUrl"
:preview-src-list="[imgUrl]"
></van-image>
<div class="imgtextclass">
<div class="ledclass">
<div>
<!-- <img :src="" alt="" @click="addTextInput" /> -->
<div class="divbox" @click="addTextInput">
文 本
</div>
</div>
<div>
<!-- <img
:src=""
alt=""
@click="personaInformShowImg = true"
/> -->
<div
class="divbox"
@click="personaInformShowImg = true"
>
图 片
</div>
</div>
</div>
</div>
<!-- 新增文本 -->
<div>
<van-popup
:close-on-click-overlay="false"
v-model="personaInformShowAddText"
position="bottom"
:style="{ height: '30%' }"
>
<div class="cloes_query">
<div>
<img
@click="personaInformShowAddText = false"
class="cloesimg"
:src="closeimg"
alt=""
/>
</div>
<div>
<van-button
class="btnquery"
size="small"
type="primary"
@click="queryAddtext"
>确认</van-button
>
</div>
</div>
<div class="personatext_box">
<div class="Addtextbox">
<div
v-for="(item, index) in AddTetxListVal"
:key="'a' + index"
>
<div class="AddtextDelbox">
<div>
<van-field
v-model="item.valname"
label="文本："
placeholder="请输入文字"
/>
</div>
<div>
<img
class="imgupd"
:src="updtextimg"
alt=""
@click="UpdaddText(item, index)"
/>
</div>
<div>
<img
class="imgdel"
:src="delimg"
alt=""
@click="DeladdText(item, index)"
/>
</div>
</div>
<div
class="styleclass"
v-show="
AddTetxListIndexUpd == index &&
AddTetxListIndexIsNo
"
>
<div class="colorclass">
<div class="colortextclass">颜色：</div>
<div>
<input
class="inputcolor"
type="color"
:value="item.valcolor"
ref="colorvalWordAdd"
@change="colorvalWordAddClick"
/>
</div>
</div>
<div class="ziseclass">
<span> 字号：</span>
<van-slider
step="0.1"
min="0.1"
max="10"
bar-height="4px"
active-color="#fc7401"
v-model="item.valsize"
@change="onChangeWordAdd"
></van-slider>
</div>
</div>
</div>
<van-button
class="btnqueryAddText"
size="small"
type="primary"
@click="AddTextVal"
>新增</van-button
>
</div>
</div>
</van-popup>
</div>
<!-- 图片弹框 -->
<div>
<van-popup
:close-on-click-overlay="false"
v-model="personaInformShowImg"
position="bottom"
:style="{ height: '30%' }"
>
<div class="cloes_query">
<div>
<img
@click="personaInformShowImg = false"
class="cloesimg"
:src="closeimg"
alt=""
/>
</div>
<div>
<van-button
class="btnquery"
size="small"
type="primary"
@click="queryinformImg"
>确认</van-button
>
</div>
</div>
<div class="personatext_box">
<van-tabs v-model="activeImg">
<van-tab title="背景图片">
<van-uploader
class="uploaderimg"
v-model="fileList"
multiple
:after-read="afterRead"
:before-delete="beforeDelete"
:max-count="1"
></van-uploader>
</van-tab>
<van-tab title="新增图片">
<van-uploader
v-model="AddfileList"
multiple
:max-count="3"
:after-read="AddafterRead"
:before-delete="beforeDeleteAdd"
></van-uploader>
</van-tab>
</van-tabs>
</div>
</van-popup>
</div>
<!-- 文字弹框 -->
<div>
<van-popup
:close-on-click-overlay="false"
v-model="personaInformShowWord"
position="bottom"
:style="{ height: '30%' }"
>
<div class="cloes_query">
<div>
<img
@click="personaInformShowWord = false"
class="cloesimg"
:src="closeimg"
alt=""
/>
</div>
<div>
<van-button
class="btnquery"
size="small"
type="primary"
@click="queryinformWord"
>确认</van-button
>
</div>
</div>
<div class="personatext_box">
<van-tabs v-model="activeWord" @click="onClicktabWord">
<van-tab title="文字">
<div class="filed_box">
<van-field
v-model="valWord"
label="文本："
placeholder="请输入文字"
/></div
></van-tab>
<van-tab title="样式">
<div class="styleclass">
<div class="colorclass">
<div class="colortextclass">颜色：</div>
<div>
<input
class="inputcolor"
type="color"
:value="valuecolorText"
ref="colorvalWord"
/>
</div>
</div>
<div class="ziseclass">
<span> 字号：</span>
<van-slider
step="0.1"
min="0.1"
max="8"
bar-height="4px"
active-color="#fc7401"
v-model="valuesliderText"
@change="onChangeWord"
></van-slider>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</van-popup>
</div>
</div>
<div v-show="saveNum == 2">
<div class="savebixbox">
<div id="captureId" @click="FinishImage('posterImge', '海报')">
<img class="saveposter_back" :src="imghref" alt="" />
</div>
<div class="icontextbox">
<van-icon
class="iconclass"
name="info-o"
/>长按保存海报至手机相册
</div>
</div>
<div class="btnbox">
<div class="btnclass">
<van-button
@click="returnposter"
class="vanbtn"
type="primary"
>返回海报列表</van-button
>
<van-button
@click="shareposter"
class="vanbtn"
type="primary"
>分享至朋友圈</van-button
>
<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
@select="onSelect"
/>
</div>
</div>
</div>
</div>
</template>
<script>
//import VueDragResize from "vue-drag-resize";
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";
// import posterimg from "";
// import posterimgBF from "";
// import closeimg from " ";
// import delimg from "";
// import updtextimg from "";
import { Toast } from "vant";
export default {
components: {
//VueDragResize
},
props: {
Id: {
type: String
}
},
data() {
return {
x: 0,
y: 0,
l: 0,
t: 0,
wxleft: "",
wxtop: "",
isDown: false,
textshow: true,
closeimg:"https://img1.baidu.com/it/u=4148146874,2237566668&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
showShare: false,
options: [
{ name: "微信", icon: "wechat" },
{ name: "微博", icon: "weibo" },
{ name: "复制链接", icon: "link" },
{ name: "分享海报", icon: "poster" },
{ name: "二维码", icon: "qrcode" }
],
// 切换模板、我的
typeinform: 0,
// 保存、完成
saveNum: 1,
//
active: 0,
posterimg:"https://img-qn-0.51miz.com/2017/06/28/22/2017062822916271_P1237556_a577aee4.jpg!/quality/90/unsharp/true/compress/true/format/webp/fh/260",
posterimgBF:"https://img-qn-0.51miz.com/2017/06/28/22/2017062822916271_P1237556_a577aee4.jpg!/quality/90/unsharp/true/compress/true/format/webp/fh/260",
addimgs: "",
delimg:"https://img1.baidu.com/it/u=1440994322,452618293&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256",
updtextimg:"https://img2.baidu.com/it/u=3423780862,3243678606&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
personaInformShowImg: false, //图片弹框
activeImg: 0, //切换图片
// 新增图片
AddfileList: [
// { url: "https://img01.yzcdn.cn/vant/leaf.jpg" ,Id:1},
], //新增图片 保存图片后返回{url:"",Id:""} //
temp: [], //不要
AddImgListIndex: 0, //不要
// 新增图片实体类
AddImgList: [
// {
// AddImgWidth: 90, //宽度 int
// AddImgHeight: 80, //高度 int
// AddImgTop: 0, //向上 int
// AddImgLeft: 0 //向下 int
// },
],
//
personaInformShowAddText: false, //新增文本 （不要）
activeAddTetx: 0, //切换文本 （不要）
// 新增文本实体类
AddTetxListVal: [
// {
// valcolor: "#1A1919", //颜色 字符串
// valsize:0.8, //字体大小 字符串
// valname: "" //文本内容 字符串
// }
], //新增文本
AddTetxtemp: [], //不要
AddTetxListIndex: 0, //不要
AddTetxListIndexUpd: 0, //不要
AddTetxListIndexIsNo: false, //不要
// 新增文本位置 实体类
AddTetxList: [
// {
// AddTetxWidth: 90, //宽度 int
// AddTetxHeight: 80, //高度 int
// AddTetxTop: 0, //向上 int
// AddTetxLeft: 0 //向下 int
// }
],
valuecolorTextAdd: "#FFA622", //默认颜色 文本
valuesliderTextAdd: 0.8, //默认字体大小 文本 字符串
fileList: [], //图片存放（可不要）
valuecolor: "#FFFFFF", //个人信息字体颜色
valueslider: 12, //个人信息size（字体大小）
specialTraining: "您好世界！", //篮球专项训练
valuecolorWord: "#FFFFFF", //篮球专项训练 颜色
valuesliderWord: "2.87", //篮球专项训练 字体大小
value: "限时优惠价", //限时优惠价
valuecolorWordthree: "#FFFFFF", //限时优惠价颜色
valuesliderWordthree: 0.3, //限时优惠价字体大小
value1: "8999", //价格
valuecolorWordfour: "#FFA622", //价格颜色
valuesliderWordfour: 2, //价格字体大小
value2: "元", //单位
valuecolorWordfive: "#FFFFFF", //单位颜色
valuesliderWordfive: 0.36, //单位字体大小
imgUrl: "", //生成海报的图片（可不要）
qrCodeUrl: "https://www.baidu.com/", //二维码地址
personaInformShow: false, //（不要）
contact: "花归去", //个人信息 名字
contacttel: "178011xxxxx", //个人信息 电话
contactaddres: "北京市xxxxxx", //个人信息 地址
valWord: "", //（不要）
activeWord: 0, //(不要)
personaInformShowWord: false, //(不要)
valuecolorText: "#E60526", //默认颜色 文本 （不要）
valuesliderText: 0.8, //默认字体大小 文本 （不要）
wordType: 0, //点击的那个 文本 （不要）
wordone: "早安 ", //早安
valuecolorWordone: "#FFFFFF", //早安 颜色
valuesliderWordone: "2.3", //早安 字体大小
wordtwo: "梦寻汝", //梦寻汝
valuecolorWordtwo: "#FFA622", //梦寻汝 颜色
valuesliderWordtwo: 2.53, // 梦寻汝 字体大小
imghref: "", //（不要）
saveImageA: "" //（不要）
};
},
activated() {},
mounted() {
this.getapp();
},
created() {},
methods: {
dragging(newRect) {
this.AddImgList[this.AddImgListIndex].AddImgWidth = newRect.width;
this.AddImgList[this.AddImgListIndex].AddImgHeight = newRect.height;
this.AddImgList[this.AddImgListIndex].AddImgTop = newRect.top;
this.AddImgList[this.AddImgListIndex].AddImgLeft = newRect.left;
},
//点击事件，传入索引，把所有层级都设置为1，当前元素设置为10
act(index) {
this.AddImgListIndex = index;
for (let i = 0; i < this.AddfileList.length; i++) {
this.temp[i] = 1;
}
this.temp[index] = 10;
this.$forceUpdate();
},
// 新增图片
AddafterRead(file) {
console.log(file);
this.addimgs = file.content;
this.AddImgList.push({
AddImgWidth: 90,
AddImgHeight: 80,
AddImgTop: 0,
AddImgLeft: 0
});
console.log(this.AddfileList);
// this.AddfileList.push({ url: file.content, isImage: true });
},
// 新增图片删除
beforeDeleteAdd(file, detail) {
this.AddfileList.splice(detail.index, 1);
console.log(file);
console.log(detail);
},
// 新增文本
AddTextVal() {
this.AddTetxListVal.push({
valcolor: "#1A1919",
valsize: parseFloat("0.8"),
valname: ""
});
this.AddTetxList.push({
AddTetxWidth: 90,
AddTetxHeight: 20,
AddTetxTop: 0,
AddTetxLeft: 0
});
this.AddTetxListIndexIsNo = false;
},
// 编辑新增
UpdaddText(item, index) {
this.AddTetxListIndexIsNo = true;
this.AddTetxListIndexUpd = index;
},
// 删除新增
DeladdText(item, index) {
this.AddTetxListIndexIsNo = false;
if (index != 0) {
this.AddTetxListVal.splice(index, 1);
}
},
// 文本add
onClicktabWordAdd() {},
// 文字字号
onChangeWordAdd(val) {
this.AddTetxListVal.forEach((item, index) => {
if (this.AddTetxListIndexUpd == index) {
item.valsize = val;
}
});
},
// 文本颜色
colorvalWordAddClick(val) {
console.log("文本颜色:", val);
this.AddTetxListVal.forEach((item, index) => {
if (this.AddTetxListIndexUpd == index) {
item.valcolor = this.$refs.colorvalWordAdd[
this.AddTetxListIndexUpd
].value;
}
});
},
// 文本新增
addTextInput() {
this.personaInformShowAddText = true;
if (this.AddTetxListVal.length == 0) {
this.AddTetxListVal.push({
valcolor: "#1A1919",
valsize: parseFloat("0.8"),
valname: ""
});
this.AddTetxList.push({
AddTetxWidth: 90,
AddTetxHeight: 20,
AddTetxTop: 0,
AddTetxLeft: 0
});
}
},
//确认
queryAddtext() {
this.personaInformShowAddText = false;
console.log(this.AddTetxListVal);
},
draggingAddText(newRect) {
this.AddTetxList[this.AddTetxListIndex].AddTetxWidth =
newRect.width;
this.AddTetxList[this.AddTetxListIndex].AddTetxHeight =
newRect.height;
this.AddTetxList[this.AddTetxListIndex].AddTetxTop = newRect.top;
this.AddTetxList[this.AddTetxListIndex].AddTetxLeft = newRect.left;
},
actAddText(index) {
this.AddTetxListIndex = index;
for (let i = 0; i < this.AddTetxListVal.length; i++) {
this.AddTetxtemp[i] = 1;
}
this.AddTetxtemp[index] = 10;
this.$forceUpdate();
},
//图片格式转换方法
dataURLToBlob(dataurl) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
// // 生成图片
saveImage(divText, imgText) {
const toast = Toast.loading({
duration: 0, // 持续展示 toast
message: "保存中...",
forbidClick: true
});
let canvasID = this.$refs[divText];
let that = this;
let a = document.createElement("a");
html2canvas(canvasID).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
//这块是保存图片操作 可以设置保存的图片的信息
a.setAttribute("download", imgText + ".png");
this.imghref = a.href;
toast.clear(); // 清除加载
this.saveNum = 2;
this.saveImageA = a;
// document.body.appendChild(a);
// a.click();
// URL.revokeObjectURL(blob);
// document.body.removeChild(a);
});
// 分享
// this.showShare = true;
},
// 完成
FinishImage(divText, imgText) {
// image.src = document.querySelector('canvas').src
const a = document.createElement("a");
fetch(this.imghref) // 跨域时会报错
.then(res => res.blob())
.then(blob => {
// 将链接地址字符内容转变成blob地址
a.href = URL.createObjectURL(blob);
a.download = imgText || "下载图片"; // 下载文件的名字
document.body.appendChild(a);
a.click();
//在资源下载完成后 清除 占用的缓存资源
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
});
},
getapp() {
// new QRCode(document.getElementById('qrcode'), 'your content');
var qrcode = new QRCode("qrcode", {
text: this.qrCodeUrl,
width: 47,
height: 47,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
},
// 返回海报
returnposter() {
this.saveNum = 1;
},
// 分享海报
shareposter() {
this.showShare = true;
},
// 分享
onSelect(option) {
Toast(option.name);
this.showShare = false;
},
// 背景图
afterRead(file) {
this.posterimg = file.content;
//文件读取完成后的回调函数
// console.log("gile~~~", file.content);
},
// 背景图删除图片
beforeDelete(file, detail) {
this.fileList.splice(detail.index, 1);
this.posterimg = this.posterimgBF;
},
// 确认按钮
queryinform() {
this.personaInformShow = false;
if (this.$refs.colorval) {
this.valuecolor = this.$refs.colorval.value;
}
// console.log( this.$refs.colorval.value)
},
// 点击文字
Wordclick(val) {
this.personaInformShowWord = true;
this.wordType = val;
if (val == 0) {
this.valWord = this.specialTraining;
this.valuecolorText = this.valuecolorWord;
this.valuesliderText = parseFloat(this.valuesliderWord);
} else if (val == 1) {
this.valWord = this.wordone;
this.valuecolorText = this.valuecolorWordone;
this.valuesliderText = parseFloat(this.valuesliderWordone);
} else if (val == 2) {
this.valWord = this.wordtwo;
this.valuecolorText = this.valuecolorWordtwo;
this.valuesliderText = parseFloat(this.valuesliderWordtwo);
} else if (val == 3) {
this.valWord = this.value;
this.valuecolorText = this.valuecolorWordthree;
this.valuesliderText = parseFloat(this.valuesliderWordthree);
} else if (val == 4) {
this.valWord = this.value1;
this.valuecolorText = this.valuecolorWordfour;
this.valuesliderText = parseFloat(this.valuesliderWordfour);
} else if (val == 5) {
this.valWord = this.value2;
this.valuecolorText = this.valuecolorWordfive;
this.valuesliderText = parseFloat(this.valuesliderWordfive);
}
},
// 文字确认按钮
queryinformWord() {
this.personaInformShowWord = false;
if (this.wordType == 0) {
this.specialTraining =
this.valWord == "" ? this.specialTraining : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWord = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 1) {
this.wordone = this.valWord == "" ? this.wordone : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordone = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 2) {
this.wordtwo = this.valWord == "" ? this.wordtwo : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordtwo = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 3) {
this.value = this.valWord == "" ? this.value : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordthree = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 4) {
this.value1 = this.valWord == "" ? this.value1 : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordfour = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 5) {
this.value2 = this.valWord == "" ? this.value2 : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordfive = this.$refs.colorvalWord.value;
}
}
},
// 文字字号
onChangeWord(val) {
if (this.wordType == 0) {
this.valuesliderWord = val;
} else if (this.wordType == 1) {
this.valuesliderWordone = val;
} else if (this.wordType == 2) {
this.valuesliderWordtwo = val;
} else if (this.wordType == 3) {
this.valuesliderWordthree = val;
} else if (this.wordType == 4) {
this.valuesliderWordfour = val;
} else if (this.wordType == 5) {
this.valuesliderWordfive = val;
}
// console.log(this.valuesliderWord);
},
// 文字tab切换
onClicktabWord(val) {},
onClickLeft() {
this.$router.history.go(-1);
},
queryinformImg() {
console.log("图片", this.fileList);
if (this.fileList.length != 0) {
// 此处赋值为图片上传地址 页面不展示为canvas跨越 放到线上环境就可以了（注意图片和线上地址域名统一）
// this.posterimg =
} else {
this.posterimg = this.posterimgBF;
}
this.personaInformShowImg = false;
}
}
};
</script>
<style lang="scss" scoped>
.divbox {
width: 150px;
height: 150px;
border: 1px solid #ccc;
border-radius: 10px;
text-align: center;
line-height: 150px;
font-size:30px;
font-weight: 600
}
.addtextclass {
display: flex;
justify-content: start;
flex-wrap: wrap;
}
.Addtextbox {
.AddtextDelbox {
display: flex;
align-content: center;
align-items: center;
}
.imgupd {
margin: 0 10px;
width: 50px;
}
.imgdel {
width: 50px;
}
.btnqueryAddText {
margin-top: 10px;
width: 100%;
background: #fc7401;
border: 1px solid #fc7401;
}
}
.tuozbox {
width: 100px;
height: 100px;
border: 1px solid #fc7401;
border-radius: 10px;
}
.saveclass {
font-size: 28px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #fc7401;
line-height: 40px;
}
.checkedclass {
margin-top: 36px;
}
.poster_bigbox {
width: calc(100% - 70px);
margin: auto;
margin-top: 64px;
// display: inline-block;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
#wxcode {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
// z-index: 999;
}
.titletext {
position: absolute;
left: 65px;
// width: calc(100% - 150px);
margin-top: 83px;
.toptext {
font-size: 87px;
height: 63px;
font-family: PangMenZhengDao;
font-weight: 400;
font-style: italic;
color: #ffffff;
line-height: 48px;
text-shadow: 0px 6px 13px rgba(10, 52, 196, 0.6);
}
.toplefttext_box {
margin-top: 43px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
// align-items: flex-end;
.toplefttext {
// width: 38%;
font-size: 80px;
font-family: PangMenZhengDao;
font-weight: 400;
font-style: italic;
color: #ffffff;
line-height: 48px;
display: flex;
align-items: center;
margin-right: 5px;
text-shadow: 0px 5px 13px rgba(10, 52, 196, 0.75);
}
.toprighttext {
color: #ffa622;
font-size: 103px;
font-family: PangMenZhengDao;
font-weight: 400;
line-height: 100px;
font-style: italic;
text-shadow: 0px 7px 13px rgba(10, 52, 196, 0.6);
}
}
// margin-left: 66px;
}
.information_box {
position: absolute;
width: calc(100% - 136px);
// height: 256px;
bottom: 46px;
// background: rgba(255, 255, 255, 0.2);
background: rgba(96, 179, 249, 0.36);
// background: #60b3f9;
// opacity: 0.36;
border-radius: 25px;
.information_Insidebox {
margin-left: 30px;
.top_information {
display: flex;
align-items: center;
// height: 100px;
.top_information_left {
float: left;
// display: flex;
margin-top: 30px;
font-weight: 400;
font-size: 36px;
font-family: PangMenZhengDao;
color: #fff;
border: none;
outline: none;
}
.top_information_Inside {
// float: left;
// width: 46%;
// height: 50px;
// display: flex;
// align-items: center;
// align-items: flex-start;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
// font-size: 80px;
font-weight: bold;
font-style: italic;
// font-family: PangMenZhengDao;
color: #ffa622;
-webkit-text-stroke: 0.8px #ffffff;
text-shadow: 0px 8px 13px rgba(10, 52, 196, 0.51);
// height: 100px;
.top_information_Insidesvg {
height: 72px;
// text-shadow: 0px 8px 13px rgba(10, 52, 196, 0.51);
}
}
.top_information_right {
float: left;
// width: 300px;
margin-top: 30px;
font-weight: 400;
font-size: 36px;
font-style: italic;
font-family: PangMenZhengDao;
color: #fff;
}
}
.qrcode_box {
position: absolute;
bottom: 21px;
right: 35px;
width: 115px;
height: 115px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.informationclass {
width: calc(100% - 150px);
display: flex;
flex-direction: column;
flex-wrap: wrap;
// font-size: 18px;
// font-size: 18px;
// font-family: PangMenZhengDao;
font-weight: 400;
// color: #ffffff;
line-height: 40px;
padding-bottom: 21px;
}
}
}
// .qrcode_class {
// position: absolute;
// bottom: 20px;
// right: 40px;
// }
.poster_back {
width: 680px;
height: 1020px;
}
}
.inputclass {
float: left;
width: 100px;
margin-top: 20px;
font-weight: 400;
font-size: 35px;
font-family: PangMenZhengDao;
color: #fff;
}
.color_size {
margin-top: 20px;
font-weight: 400;
font-size: 35px;
font-family: PangMenZhengDao;
stop-color: #fff;
}
.imgtextclass {
margin-top: 123px;
margin-bottom: 83px;
.ledclass {
width: calc(100% - 116px);
margin: auto;
display: flex;
// justify-content: space-between;
justify-content: space-around;
img {
width: 143px;
}
}
}
.cloes_query {
display: flex;
justify-content: space-between;
width: calc(100% - 86px);
margin: auto;
margin-top: 46px;
align-items: flex-end;
.cloesimg {
width: 33px;
}
.btnquery {
height: 50px;
background: #fc7401;
border: 1px solid #fc7401;
}
}
.personatext_box {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
.uploaderimg {
margin-top: 30px;
margin-left: 40px;
}
/deep/ .van-tabs__line {
background: #fc7401 !important;
}
.styleclass {
margin-top: 10px;
margin-left: 8%;
.colorclass {
display: flex;
align-items: center;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 400;
.colortextclass {
margin-right: 30px;
}
.inputcolor {
border: 3px solid #fc7401;
}
}
.ziseclass {
margin-top: 20px;
margin-right: 30px;
display: flex;
align-items: center;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 400;
span {
// margin-right: 20px;
width: 110px;
}
}
}
.filed_box {
padding-top: 5px;
margin-left: 8%;
/deep/ .van-cell {
padding: 5px 10px 5px 16px;
.van-field__label {
width: 45px;
}
}
}
}
.savebixbox {
width: calc(100% - 70px);
margin: auto;
margin-top: 86px;
.saveposter_back {
width: 680px;
height: 1020px;
}
.icontextbox {
margin-top: 38px;
font-size: 32px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #222222;
line-height: 45px;
.iconclass {
width: 34px;
color: #fc7401;
margin-right: 21px;
margin-bottom: 35px;
}
}
}
.btnbox {
width: 100%;
// height: 231px;
height: 331px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
// margin-bottom: 180px;
.btnclass {
width: calc(100% - 100px);
margin: auto;
display: flex;
margin-bottom: 150px;
justify-content: space-between;
.vanbtn {
width: 297px;
height: 88px;
background: #fc7401;
border-radius: 10px;
border: 1px solid #fc7401;
font-size: 30px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #ffffff;
line-height: 88px;
text-align: center;
}
}
}
</style>
边栏推荐
- Spark SQL 访问json和jdbc数据源
- Spark SQL Generic Load/Save Functions(2.4.3)
- 2021-08-21
- Stop using system Currenttimemillis() takes too long to count. It's too low. Stopwatch is easy to use!
- Greedy interval problem (3)
- One case of SQL performance degradation caused by modifying implicit parameters
- 2021-08-22
- 同步电路与跨时钟域电路设计2——多bit信号的跨时钟域传输（FIFO）
- 使用smart-doc自动生成接口文档
- Freshman girls' nonsense programming is popular! Those who understand programming are tied with Q after reading
猜你喜欢
2021-04-05
2021-03-06
Stop using system Currenttimemillis() takes too long to count. It's too low. Stopwatch is easy to use!
Ensure database and cache consistency
China Mobile's mobile phone users grow slowly, but strive for high profit 5g package users
ArcGIS application (20) the ArcGIS grid image symbol system prompts "this dataset does not have valid histogram required for classificati..."
2021-04-14
Huawei cloud recruits partners in the field of industrial intelligence to provide strong support + commercial realization
c＃ sqlsugar,hisql,freesql orm框架全方位性能测试对比 sqlserver 性能测试
【Kubernetes 系列】Kubernetes 概述
随机推荐
2021-08-22
SourceTree版本管理常用操作
Finding the value of the nth term of Fibonacci sequence by recursion
2020-12-20
Enabling partners, major guarantee of Spring Festival "non-stop"
Greedy distribution problem (1)
Redis big key problem
10 Super VIM plug-ins, I can't put them down
Talk about SQL profile again: can I fix the execution plan?
flutter外包，承接flutter项目
What if the SQL execution plan of the production system suddenly becomes worse?
保证数据库和缓存的一致性
Use the find command
A case of misuse of append
14. 最长公共前缀
为 localStorage 添加过期时间
2021-05-02
Greedy interval problem (3)
【STM32技巧】使用STM32 HAL库的硬件I2C驱动RX8025T实时时钟芯片
Digital data depth | about software self-control, source code left, no code right