更新新增海报

package.json

@@ -29,6 +29,7 @@
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "qrcodejs2": "^0.0.2",
     "reqwest": "^2.0.5",
     "tinymce": "^5.1.1",
     "vant": "^2.5.2",

src/components/sysmanage/codeMove.vue

 <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>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from 'vuedraggable';
+import QRCode from 'qrcodejs2';
+
 export default {
   name: "codeMove",
   components:{draggable},
@@ -18,12 +23,48 @@ export default {
       desY:0,
       timer:null,
       positionX:0,
-      positionY:0
+      positionY:0,
+      text:"",
+        images:""
     }
   },
   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){
-      let op = e.target;    //获取目标元素
+      let op = e.currentTarget;    //获取目标元素
 
       //算出鼠标相对元素的位置
       let disX = e.clientX - op.offsetLeft;

src/views/poster/newPoster.vue

@@ -17,6 +17,13 @@
             <input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
           </div>-->
           <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 :span="6" v-if="images!=''">
           <a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
@@ -27,7 +34,7 @@
     </div>
     <div class="center-box">
       <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" />
       </div>
     </div>
@@ -46,13 +53,17 @@ export default {
     return {
       visible: false,
       images: "",
-      codeWidth: 150 //二维码大小
+      codeWidth: 150, //二维码大小
+      codeText:""
     };
   },
   methods: {
     showModal(picture) {
-      this.images=picture
+      this.getBase64(picture, 'jpeg', (base64) =>{
+        // 给原生img对象的src属性赋值
+        this.images=base64;
         this.visible = true;
+      });
     },
     onClose() {
       this.visible = false;
@@ -65,7 +76,6 @@ export default {
       var reader = new FileReader();
       reader.onload = evt => {
         let result = evt.target.result;
-        debugger
         this.images = result;
       };
       reader.readAsDataURL(file.files[0]);
@@ -78,6 +88,28 @@ export default {
         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) {
       const blob = this.base64ToBlob(content); // new Blob([content]);
       if (window.navigator.msSaveOrOpenBlob) {

yarn.lock

@@ -9024,6 +9024,11 @@ q@^1.1.2:
   resolved "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   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:
   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"