当前位置：网站首页>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>
边栏推荐
猜你喜欢
JSBridge
Digital data was invited to participate in Nantong enterprise digital transformation Seminar
ArcGIS应用（二十）Arcgis 栅格图像符号系统提示“This dataset does not have valid histogram required for classificati…”
'dare not doubt the code, but have to doubt the code 'a network request timeout analysis
Learning the interpretable representation of quantum entanglement, the depth generation model can be directly applied to other physical systems
在Word中自定义多级列表样式
Install the typescript environment and enable vscode to automatically monitor the compiled TS file as a JS file
别再用 System.currentTimeMillis() 统计耗时了，太 Low，StopWatch 好用到爆！
企业数字化不是各自发展，而是全面SaaS化推进
保证数据库和缓存的一致性
随机推荐
2021-08-21
Summary of transport layer knowledge points
C sqlsugar, hisql, FreeSQL ORM framework all-round performance test vs. sqlserver performance test
Unity：利用 射线Ray 检测物体
js读取剪切板的图片
优化——线性规划
2020-12-20
Enterprise digitalization is not a separate development, but a comprehensive SaaS promotion
Longest word in output string
冒泡排序 指针
2021-04-14
阻止别人使用浏览器调试
OJ每日一练——过滤多余的空格
OJ每日一练——病毒的增生
[redisson] source code analysis of multilock
flutter外包，承接flutter项目
Spark RDD Programming Guide(2.4.3)
Php7.3 error undefined function simplexml_ load_ string()
MySQL master-slave synchronization and its basic process of database and table division
eslint 简单配置