当前位置：网站首页>Canvas generate Poster
Canvas generate Poster
2022-06-22 23:26:00 【Flowers go back】
install
npm i html2canvas
npm install qrcodejs2 --save
introduce
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2";
<template>
<div>
<div class="van_header">
<van-nav-bar
title="
posters
"
left-arrow
@click-left="onClickLeft"
>
<template #right>
<div class="saveclass">
<span
v-if="saveNum == 1"
@click="saveImage('posterImge', ' posters ')"
> preservation </span
>
<span v-else @click="FinishImage('posterImge', ' posters ')"
> complete </span
>
</div></template
>
</van-nav-bar>
</div>
<div v-show="saveNum == 1">
<div
v-show="typeinform == 0"
ref="posterImge"
id="posterImgeId"
class="poster_bigbox"
>
<!-- Head title written words -->
<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>
<!-- Personal information -->
<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>
<!-- Information -->
<div
class="informationclass"
:style="{
color: valuecolor,
'font-size': valueslider + 'px'
}"
>
<div>
Contacts ： <span>{
{ contact }}</span>
</div>
<div>
Phone number ：<span>{
{ contacttel }}</span>
</div>
<div> Address ： {
{ contactaddres }}</div>
</div>
<!-- QR code -->
<div class="qrcode_box">
<div class="qrcode_class" id="qrcode"></div>
</div>
<!-- -->
<div></div>
</div>
</div>
<img class="poster_back" :src="posterimg" alt="" />
<!-- picture -->
<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"
>
<!-- When calling the interface scr（item.content） Assign the value to the image address returned by the backend -->
<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>
<!-- Text -->
<!-- -->
<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>
<!-- My poster -->
<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">
writing Ben
</div>
</div>
<div>
<!-- <img
:src=""
alt=""
@click="personaInformShowImg = true"
/> -->
<div
class="divbox"
@click="personaInformShowImg = true"
>
chart slice
</div>
</div>
</div>
</div>
<!-- New text -->
<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"
> confirm </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=" Text ："
placeholder=" Please enter text "
/>
</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"> Color ：</div>
<div>
<input
class="inputcolor"
type="color"
:value="item.valcolor"
ref="colorvalWordAdd"
@change="colorvalWordAddClick"
/>
</div>
</div>
<div class="ziseclass">
<span> Font size ：</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"
> newly added </van-button
>
</div>
</div>
</van-popup>
</div>
<!-- Picture frames -->
<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"
> confirm </van-button
>
</div>
</div>
<div class="personatext_box">
<van-tabs v-model="activeImg">
<van-tab title=" Background image ">
<van-uploader
class="uploaderimg"
v-model="fileList"
multiple
:after-read="afterRead"
:before-delete="beforeDelete"
:max-count="1"
></van-uploader>
</van-tab>
<van-tab title=" The new pictures ">
<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>
<!-- Text popup -->
<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"
> confirm </van-button
>
</div>
</div>
<div class="personatext_box">
<van-tabs v-model="activeWord" @click="onClicktabWord">
<van-tab title=" written words ">
<div class="filed_box">
<van-field
v-model="valWord"
label=" Text ："
placeholder=" Please enter text "
/></div
></van-tab>
<van-tab title=" style ">
<div class="styleclass">
<div class="colorclass">
<div class="colortextclass"> Color ：</div>
<div>
<input
class="inputcolor"
type="color"
:value="valuecolorText"
ref="colorvalWord"
/>
</div>
</div>
<div class="ziseclass">
<span> Font size ：</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', ' posters ')">
<img class="saveposter_back" :src="imghref" alt="" />
</div>
<div class="icontextbox">
<van-icon
class="iconclass"
name="info-o"
/> Long press to save the poster to the mobile photo album
</div>
</div>
<div class="btnbox">
<div class="btnclass">
<van-button
@click="returnposter"
class="vanbtn"
type="primary"
> Return to the poster list </van-button
>
<van-button
@click="shareposter"
class="vanbtn"
type="primary"
> Share with friends </van-button
>
<van-share-sheet
v-model="showShare"
title=" Share with friends now "
: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: " WeChat ", icon: "wechat" },
{ name: " Microblogging ", icon: "weibo" },
{ name: " Replication link ", icon: "link" },
{ name: " Share posters ", icon: "poster" },
{ name: " QR code ", icon: "qrcode" }
],
// Switch templates 、 my
typeinform: 0,
// preservation 、 complete
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, // Picture frames
activeImg: 0, // Switch pictures
// The new pictures
AddfileList: [
// { url: "https://img01.yzcdn.cn/vant/leaf.jpg" ,Id:1},
], // The new pictures Save the picture and return to {url:"",Id:""} //
temp: [], // Don't
AddImgListIndex: 0, // Don't
// New picture entity class
AddImgList: [
// {
// AddImgWidth: 90, // Width int
// AddImgHeight: 80, // Height int
// AddImgTop: 0, // Up int
// AddImgLeft: 0 // Down int
// },
],
//
personaInformShowAddText: false, // New text （ Don't ）
activeAddTetx: 0, // Switch text （ Don't ）
// New text entity class
AddTetxListVal: [
// {
// valcolor: "#1A1919", // Color character string
// valsize:0.8, // font size character string
// valname: "" // Text content character string
// }
], // New text
AddTetxtemp: [], // Don't
AddTetxListIndex: 0, // Don't
AddTetxListIndexUpd: 0, // Don't
AddTetxListIndexIsNo: false, // Don't
// New text position Entity class
AddTetxList: [
// {
// AddTetxWidth: 90, // Width int
// AddTetxHeight: 80, // Height int
// AddTetxTop: 0, // Up int
// AddTetxLeft: 0 // Down int
// }
],
valuecolorTextAdd: "#FFA622", // Default color Text
valuesliderTextAdd: 0.8, // Default font size Text character string
fileList: [], // Picture storage （ Don't ）
valuecolor: "#FFFFFF", // Personal information font color
valueslider: 12, // Personal information size（ font size ）
specialTraining: " Hello Worlds ！", // Special basketball training
valuecolorWord: "#FFFFFF", // Special basketball training Color
valuesliderWord: "2.87", // Special basketball training font size
value: " Limited time preferential price ", // Limited time preferential price
valuecolorWordthree: "#FFFFFF", // Limited time discount color
valuesliderWordthree: 0.3, // Limited time discount font size
value1: "8999", // Price
valuecolorWordfour: "#FFA622", // Price color
valuesliderWordfour: 2, // Price font size
value2: " element ", // Company
valuecolorWordfive: "#FFFFFF", // Unit color
valuesliderWordfive: 0.36, // Unit font size
imgUrl: "", // Generate a picture of the poster （ Don't ）
qrCodeUrl: "https://www.baidu.com/", // QR code address
personaInformShow: false, //（ Don't ）
contact: " Flowers go back ", // Personal information name
contacttel: "178011xxxxx", // Personal information Telephone
contactaddres: " The Beijing municipal xxxxxx", // Personal information Address
valWord: "", //（ Don't ）
activeWord: 0, //( Don't )
personaInformShowWord: false, //( Don't )
valuecolorText: "#E60526", // Default color Text （ Don't ）
valuesliderText: 0.8, // Default font size Text （ Don't ）
wordType: 0, // Click on the Text （ Don't ）
wordone: " Good morning, ", // Good morning,
valuecolorWordone: "#FFFFFF", // Good morning, Color
valuesliderWordone: "2.3", // Good morning, font size
wordtwo: " Dream to find you ", // Dream to find you
valuecolorWordtwo: "#FFA622", // Dream to find you Color
valuesliderWordtwo: 2.53, // Dream to find you font size
imghref: "", //（ Don't ）
saveImageA: "" //（ Don't ）
};
},
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;
},
// Click event , Incoming index , Set all levels to 1, The current element is set to 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();
},
// The new pictures
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 });
},
// New pictures deleted
beforeDeleteAdd(file, detail) {
this.AddfileList.splice(detail.index, 1);
console.log(file);
console.log(detail);
},
// New text
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;
},
// Edit new
UpdaddText(item, index) {
this.AddTetxListIndexIsNo = true;
this.AddTetxListIndexUpd = index;
},
// Delete new
DeladdText(item, index) {
this.AddTetxListIndexIsNo = false;
if (index != 0) {
this.AddTetxListVal.splice(index, 1);
}
},
// Text add
onClicktabWordAdd() {},
// Word size
onChangeWordAdd(val) {
this.AddTetxListVal.forEach((item, index) => {
if (this.AddTetxListIndexUpd == index) {
item.valsize = val;
}
});
},
// text color
colorvalWordAddClick(val) {
console.log(" text color :", val);
this.AddTetxListVal.forEach((item, index) => {
if (this.AddTetxListIndexUpd == index) {
item.valcolor = this.$refs.colorvalWordAdd[
this.AddTetxListIndexUpd
].value;
}
});
},
// New text
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
});
}
},
// confirm
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();
},
// Image format conversion method
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 });
},
// // Generate pictures
saveImage(divText, imgText) {
const toast = Toast.loading({
duration: 0, // Continuous display toast
message: " In storage ...",
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));
// This is the operation of saving pictures You can set the information of the saved picture
a.setAttribute("download", imgText + ".png");
this.imghref = a.href;
toast.clear(); // Clear load
this.saveNum = 2;
this.saveImageA = a;
// document.body.appendChild(a);
// a.click();
// URL.revokeObjectURL(blob);
// document.body.removeChild(a);
});
// Share
// this.showShare = true;
},
// complete
FinishImage(divText, imgText) {
// image.src = document.querySelector('canvas').src
const a = document.createElement("a");
fetch(this.imghref) // Cross domain errors will be reported
.then(res => res.blob())
.then(blob => {
// Convert the link address character content into blob Address
a.href = URL.createObjectURL(blob);
a.download = imgText || " Download the pictures "; // Download the name of the file
document.body.appendChild(a);
a.click();
// After the resource download is complete eliminate Occupied cache resources
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
});
},
// Back to the poster
returnposter() {
this.saveNum = 1;
},
// Share posters
shareposter() {
this.showShare = true;
},
// Share
onSelect(option) {
Toast(option.name);
this.showShare = false;
},
// Background map
afterRead(file) {
this.posterimg = file.content;
// Callback function after reading the file
// console.log("gile~~~", file.content);
},
// Background image delete picture
beforeDelete(file, detail) {
this.fileList.splice(detail.index, 1);
this.posterimg = this.posterimgBF;
},
// confirm button
queryinform() {
this.personaInformShow = false;
if (this.$refs.colorval) {
this.valuecolor = this.$refs.colorval.value;
}
// console.log( this.$refs.colorval.value)
},
// Click on the text
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);
}
},
// Text confirmation button
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;
}
}
},
// Word size
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);
},
// written words tab Switch
onClicktabWord(val) {},
onClickLeft() {
this.$router.history.go(-1);
},
queryinformImg() {
console.log(" picture ", this.fileList);
if (this.fileList.length != 0) {
// The assignment here is the image upload address The page is not displayed as canvas stride across Just put it in the online environment （ Pay attention to the unification of the picture and the online address domain name ）
// 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>
边栏推荐
- Tianyi cloud takes advantage of the new infrastructure to build a "4+2" capability system for digital transformation
- three.js模拟驾驶游览艺术展厅---打造超级相机控制器
- 13. 罗马数字转整数
- 防抖＆节流 加强版
- Help customers' digital transformation and build a new operation and maintenance system
- [redisson] source code analysis of multilock
- Relationship between adau1452 development system interface and code data
- Greedy interval problem (3)
- Autoincrement attribute of sqlserver replication table
- C language -- 17 function introduction
猜你喜欢
OJ每日一练——过滤多余的空格
10 Super VIM plug-ins, I can't put them down
安装typescript环境并开启VSCode自动监视编译ts文件为js文件
数据库访问工具简介
2021-04-14
Synchronization circuit and cross clock domain circuit design 2 -- cross clock domain transmission (FIFO) of multi bit signals
'dare not doubt the code, but have to doubt the code 'a network request timeout analysis
Introduction and example application of PostgreSQL string separator function (regexp\u split\u to\u table)
在Word中自定义多级列表样式
2021-03-06
随机推荐
mysql主从同步及其分库分表基本流程
Greedy interval problem (3)
tp5.1上传excel文件并读取其内容
How to change the dial on the apple Watch
Considerations for using redisson to operate distributed queues
PHP7.3报错undefined function simplexml_load_string()
2021-04-14
Introduction to database access tools
Dip1000,1 of D
Common operations of sourcetree version management
Uniapp modifies array properties, and the view is not updated
为 localStorage 添加过期时间
使用Redisson操作分布式队列的注意事项
Php7.3 error undefined function simplexml_ load_ string()
Zynq ultrascale + rfsoc zcu111 RF clock tree learning 1
Freshman girls' nonsense programming is popular! Those who understand programming are tied with Q after reading
Learn redis with you (11) -- redis distributed lock
14. 最长公共前缀
使用HBuilder X编辑器安装终端窗口插件未响应的解决方案
2021-04-14