Skip to content

G
gdtel-gztel-school-center-ui
Commit 6fc868ed by kyonback
Options

更新新增海报

parent 15d232ff
Showing with 88 additions and 9 deletions
package.json
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
"lodash.pick": "^4.4.0", "lodash.pick": "^4.4.0",
"md5": "^2.2.1", "md5": "^2.2.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"qrcodejs2": "^0.0.2",
"reqwest": "^2.0.5", "reqwest": "^2.0.5",
"tinymce": "^5.1.1", "tinymce": "^5.1.1",
"vant": "^2.5.2", "vant": "^2.5.2",
......
src/components/sysmanage/codeMove.vue
<template> <template>
<img class="code" src="../../assets/img/cosc.png" @mousedown.prevent="move" :style="{'width':(width+'px'),'height':(width+'px')}"> <div>
<img ref="code2" class="code" :src="images" v-if="images != ''" @mousedown.prevent="move" :style="{'width':(width+'px'),'height':(width+'px')}">
<div ref="code" v-show="false" class="qrcode" :style="{'width':(width+'px'),'height':(width+'px')}"></div>
</div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable';
import QRCode from 'qrcodejs2';
export default { export default {
name: "codeMove", name: "codeMove",
components:{draggable}, components:{draggable},
...@@ -18,12 +23,48 @@ export default { ...@@ -18,12 +23,48 @@ export default {
desY:0, desY:0,
timer:null, timer:null,
positionX:0, positionX:0,
positionY:0 positionY:0,
text:"",
images:""
} }
}, },
methods:{ methods:{
//生成海报
newCode(text){
//清空内容
this.$refs.code.innerHTML = "";
this.text = text;
new QRCode(this.$refs.code, {
text: text,
width: this.width,
height: this.width
})
listenQrcodeSrc();
let that = this;
function listenQrcodeSrc() {
let qrcodeImg = document.querySelector('.qrcode canvas+img')
let observeConfig = {attributes: true}
let observeCb = (mutationsList, observer) => {
mutationsList.forEach(function (mutation) {
if (
mutation.type.toLowerCase() === 'attributes' &&
mutation.attributeName.toLowerCase() === 'src'
) {
console.log('qrcodeImg src done!', mutation.target.src)
that.images = mutation.target.src;
observer.disconnect()
}
})
}
if (typeof MutationObserver !== 'undefined') {
let observer = new MutationObserver(observeCb)
observer.observe(qrcodeImg, observeConfig)
}
}
},
move(e){ move(e){
let op = e.target; //获取目标元素 let op = e.currentTarget; //获取目标元素
//算出鼠标相对元素的位置 //算出鼠标相对元素的位置
let disX = e.clientX - op.offsetLeft; let disX = e.clientX - op.offsetLeft;
......
src/views/poster/newPoster.vue
...@@ -17,6 +17,13 @@ ...@@ -17,6 +17,13 @@
<input ref="selectImgae" class="seletImg" type="file" @change="selectImage" /> <input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
</div>--> </div>-->
<a-button @click="toImage" v-if="images != ''">生成图片</a-button> <a-button @click="toImage" v-if="images != ''">生成图片</a-button>
<a-divider type="vertical"/>
<a-button @click="newCode" v-if="images != ''">生成二维码</a-button>
</a-col>
<a-col :span="6" v-if="images!=''">
<a-form-item label="二维码内容：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-model="codeText"></a-input>
</a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="images!=''"> <a-col :span="6" v-if="images!=''">
<a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> <a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
...@@ -27,7 +34,7 @@ ...@@ -27,7 +34,7 @@
</div> </div>
<div class="center-box"> <div class="center-box">
<div class="image-box" ref="imageWrapper" v-if="images!=''"> <div class="image-box" ref="imageWrapper" v-if="images!=''">
<code-move :width="codeWidth"></code-move> <code-move ref="code" :width="codeWidth"></code-move>
<img class="bg-img" :src="images" /> <img class="bg-img" :src="images" />
</div> </div>
</div> </div>
...@@ -46,13 +53,17 @@ export default { ...@@ -46,13 +53,17 @@ export default {
return { return {
visible: false, visible: false,
images: "", images: "",
codeWidth: 150 //二维码大小 codeWidth: 150, //二维码大小
codeText:""
}; };
}, },
methods: { methods: {
showModal(picture) { showModal(picture) {
this.images=picture this.getBase64(picture, 'jpeg', (base64) =>{
this.visible = true; // 给原生img对象的src属性赋值
this.images=base64;
this.visible = true;
});
}, },
onClose() { onClose() {
this.visible = false; this.visible = false;
...@@ -65,7 +76,6 @@ export default { ...@@ -65,7 +76,6 @@ export default {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = evt => { reader.onload = evt => {
let result = evt.target.result; let result = evt.target.result;
debugger
this.images = result; this.images = result;
}; };
reader.readAsDataURL(file.files[0]); reader.readAsDataURL(file.files[0]);
...@@ -78,6 +88,28 @@ export default { ...@@ -78,6 +88,28 @@ export default {
this.downloadFile("海报.png", dataURL); this.downloadFile("海报.png", dataURL);
}); });
}, },
newCode(){
if(this.codeText === ''){
this.$notification.warning({ message: '系统提示', description:'请输入二维码内容!',duration: 4});
return;
}
this.$refs.code.newCode(this.codeText);
},
getBase64(url, ext, callback) {
let canvas = document.createElement("canvas"); //创建canvas DOM元素
let ctx = canvas.getContext("2d");
let img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = () => {
canvas.width = img.width; //指定画板的宽度，自定义
canvas.height = img.height; //指定画板的高度,自定义
ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
let dataURL = canvas.toDataURL("image/" + ext);
callback.call(this, dataURL); //回掉函数获取Base64编码
canvas = null;
};
},
downloadFile(fileName, content) { downloadFile(fileName, content) {
const blob = this.base64ToBlob(content); // new Blob([content]); const blob = this.base64ToBlob(content); // new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) { if (window.navigator.msSaveOrOpenBlob) {
......
yarn.lock
...@@ -9024,6 +9024,11 @@ q@^1.1.2: ...@@ -9024,6 +9024,11 @@ q@^1.1.2:
resolved "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" resolved "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qrcodejs2@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/qrcodejs2/-/qrcodejs2-0.0.2.tgz#465afe5e39f19facecb932c11f7a186109146ae1"
integrity sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE=
qs@6.7.0: qs@6.7.0:
version "6.7.0" version "6.7.0"
resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment