Home Explore Help
Register Sign In
xiuli.gao
/
playlet
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 1777 Releases 0 Wiki
Browse Source

build: PC

zhengxy 1 year ago
parent
53e749d110
commit
4ca53aac51
9 changed files with 272 additions and 21 deletions
Split View Show Diff Stats
  1. 1 1
      index.html
  2. 67 0
      project/src/assets/js/canvasTools.js
  3. 125 0
      project/src/components/assembly/addPlaybtn.vue
  4. 62 3
      project/src/components/assembly/editCon.vue
  5. 1 0
      static/css/app.240903d7212d52fa0963fd6968e2adab.css
  6. 0 1
      static/css/app.ee268c228186068249b80da5915dba0c.css
  7. 15 0
      static/js/0.5d368e5de7530ce4b8f6.js
  8. 0 15
      static/js/0.7a782b9b88edaf102a06.js
  9. 1 1
      static/js/manifest.a43c681408839246ce8b.js

+ 1 - 1
index.html
View File 

@@ -7,4 +7,4 @@
7 7 
         hm.src = "https://hm.baidu.com/hm.js?d61b9e2caf4d46ccda7471b5385e2333";
8 8 
         var s = document.getElementsByTagName("script")[0];
9 9 
         s.parentNode.insertBefore(hm, s);
10 
-      })();</script><link href=./static/css/app.ee268c228186068249b80da5915dba0c.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.a43c681408839246ce8b.js></script><script type=text/javascript src=./static/js/app.2e73dbd6be2161b32ce3.js></script></body></html>
10 
+      })();</script><link href=./static/css/app.240903d7212d52fa0963fd6968e2adab.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.1d4b6a95be8b1e7b7a2f.js></script><script type=text/javascript src=./static/js/app.2e73dbd6be2161b32ce3.js></script></body></html>

+ 67 - 0
project/src/assets/js/canvasTools.js
View File 

@@ -0,0 +1,67 @@
1 
+/**
2 
+ * 图片路径转成canvas
3 
+ * @param {图片url} url
4 
+ */
5 
+async function imgToCanvas(url) {
6 
+  // 创建img元素
7 
+  const img = document.createElement("img");
8 
+  img.src = url;
9 
+  img.setAttribute("crossOrigin", "anonymous"); // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
10 
+  await new Promise((resolve) => (img.onload = resolve));
11 
+  // 创建canvas DOM元素，并设置其宽高和图片一样
12 
+  const canvas = document.createElement("canvas");
13 
+  canvas.width = img.width;
14 
+  canvas.height = img.height;
15 
+  // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
16 
+  canvas.getContext("2d").drawImage(img, 0, 0);
17 
+  return canvas;
18 
+}
19 
+
20 
+/**
21 
+ * canvas转成img
22 
+ * @param {canvas对象} canvas
23 
+ */
24 
+function canvasToImg({canvas, maxWidth = "100%", maxHeight = "100%"}) {
25 
+  // 新建Image对象，可以理解为DOM
26 
+  var image = new Image();
27 
+  // canvas.toDataURL 返回的是一串Base64编码的URL
28 
+  // 指定格式 PNG
29 
+  image.src = canvas.toDataURL("image/png");
30 
+  image.style.maxHeight = maxHeight;
31 
+  image.style.maxWidth = maxWidth;
32 
+  return image;
33 
+}
34 
+
35 
+/**
36 
+ * 下载canves为图片
37 
+ * @param {canvas对象} canvas
38 
+ * @param {文件名} filename
39 
+ */
40 
+function downloadCanves(canvas, filename = "下载") {
41 
+  let base64 = canvas.toDataURL("image/png");
42 
+  let blob = dataURItoBlob(base64);
43 
+  const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
44 
+  const url = window.URL.createObjectURL(blob);
45 
+  a.href = url;
46 
+  a.download = filename;
47 
+  a.click();
48 
+  window.URL.revokeObjectURL(url);
49 
+}
50 
+
51 
+/**
52 
+ * 画布添加水印
53 
+ */
54 
+function drawPlaybtnToCanvasCenter({ canvas }) {
55 
+  const ctx = canvas.getContext("2d");
56 
+  let imgWidth = canvas.width;
57 
+  let imgHeight = canvas.height;
58 
+
59 
+
60 
+};
61 
+
62 
+export {
63 
+  imgToCanvas,
64 
+  canvasToImg,
65 
+  downloadCanves,
66 
+  drawPlaybtnToCanvasCenter,
67 
+}

+ 125 - 0
project/src/components/assembly/addPlaybtn.vue
View File 

@@ -0,0 +1,125 @@
1 
+<template>
2 
+<div>
3 
+
4 
+</div>
5 
+</template>
6 
+<script>
7 
+import axios from 'axios'
8 
+import { imgToCanvas, canvasToImg, downloadCanves, drawPlaybtnToCanvasCenter } from '@/assets/js/canvasTools.js'
9 
+
10 
+export default {
11 
+    name: 'addPlaybtn',
12 
+    props:{
13 
+      fileUrl:{
14 
+        type: String
15 
+      },
16 
+      source: { // 涞源：默认是小程序图片裁剪，uploadMaterials来源于素材库裁剪
17 
+        type: String,
18 
+        default: 'applet'
19 
+      }
20 
+    },
21 
+    data() {
22 
+       return {
23 
+        loadCut: false,
24 
+        base64_url: '', // base64
25 
+        firstCome: true, // 判断是否初次进来
26 
+        oss_url: '', // 域名更新后的地址
27 
+       }
28 
+    },
29 
+    watch: {
30 
+      // target(){
31 
+      //   this.target && this.target != '' && this.getBase64Image(this.target);
32 
+      // }
33 
+    },
34 
+    mounted(){
35 
+      // if(this.firstCome && this.target && this.target != ''){
36 
+      //   this.getBase64Image (this.target)
37 
+      // }
38 
+      this.handler()
39 
+    },
40 
+    methods: {
41 
+      async handler() {
42 
+        console.log('handler => ')
43 
+        // 1.图片路径转成canvas
44 
+        const tempCanvas = await imgToCanvas(this.fileUrl);
45 
+        console.log('tempCanvas => ', tempCanvas)
46 
+      },
47 
+      getBase64Image (url, ref) {
48 
+        this.loadCut = true
49 
+        this.firstCome = false ;
50 
+        var that = this
51 
+        var image = new Image()
52 
+        image.src = url + '?v=' + Math.random() // 处理缓存
53 
+        image.crossOrigin = 'anonymous' // 支持跨域图片
54 
+        image.onload = function () {
55 
+          var base64 = that.drawBase64Image(image)
56 
+          that.loadCut = false;
57 
+          that.base64_url = base64;
58 
+          that.forIe9();
59 
+        }
60 
+      },
61 
+      drawBase64Image (img) {
62 
+        var canvas = document.createElement('canvas')
63 
+        canvas.width = img.width
64 
+        canvas.height = img.height
65 
+        var ctx = canvas.getContext('2d')
66 
+        ctx.drawImage(img, 0, 0, img.width, img.height)
67 
+        var dataURL = canvas.toDataURL('image/png')
68 
+        return dataURL
69 
+      },
70 
+      //裁剪
71 
+      forIe9 () {
72 
+        this.$refs.imgCutterModal.handleOpen({
73 
+          name: 'img',
74 
+          src: this.base64_url,
75 
+          width: 400,
76 
+          height: 400,
77 
+        });
78 
+      },
79 
+       //通过cutDown事件接收选择的图片信息
80 
+       cutDown(event) {
81 
+          if (!event.file) {
82 
+            this.$emit('imgCutterCallback',{flag:false})
83 
+            this.$message({ message: '图片剪裁失败！', type: "error" })
84 
+            return
85 
+          };
86 
+          let formData = new FormData();
87 
+          let axios_api = this.URL.material_upload;
88 
+          formData.append("type",1);
89 
+          formData.append("need_media_id",0);
90 
+          formData.append("admin_id",this.$cookie.getCookie('admin_id'));
91 
+          formData.append("ttl",this.$cookie.getCookie('ttl'));
92 
+          formData.append("sign",this.$cookie.getCookie('sign'));
93 
+          formData.append("corpid",this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '');
94 
+
95 
+          let instance= axios.create({
96 
+            baseURL: '',
97 
+            data: formData,
98 
+            headers: { 'Content-Type': 'multipart/form-data'}
99 
+          })
100 
+
101 
+          if (this.source == 'uploadMaterials') { // 素材库
102 
+            formData.append("file",event.file);
103 
+            axios_api = this.URL.media_upload;
104 
+          } else {
105 
+            formData.append("material_file",event.file);  //上传一个files对象
106 
+          }
107 
+
108 
+          instance.post(this.URL.BASEURL + axios_api, formData).then((res) => {
109 
+            var res = res.data
110 
+            if (res && res.errno == 0) {
111 
+              this.$emit('imgCutterCallback',{flag:true,data:res.rst})
112 
+            } else if (res.errno != 4002) {
113 
+              this.$emit('imgCutterCallback',{flag:false})
114 
+              this.$message({ message: res.err, type: "error" })
115 
+            }
116 
+          }).catch((err) => {
117 
+            this.$emit('imgCutterCallback',{flag:false})
118 
+            this.$message({ message: '服务器错误，获取裁剪图片失败', type: "error" })
119 
+          });
120 
+
121 
+       },
122 
+    }
123 
+
124 
+}
125 
+</script>

+ 62 - 3
project/src/components/assembly/editCon.vue
View File 

@@ -217,14 +217,18 @@
217 217 
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
218 218 
           </el-upload>
219 219 
           <div style="margin-left:40px;">
220 
-            <div style="margin-bottom:10px;">
220 
+            <div style="margin-bottom:6px;">
221 221 
               <el-button type="primary" size="mini" style="height:30px;margin-bottom:0px;" @click="onClickSelectMaterials('XCX')">选择素材</el-button>
222 222 
               <span class="uploadImgHint" style="margin:0">可直接从素材库选择图片。</span>
223 223 
             </div>
224 
-            <div>
224 
+            <div style="margin-bottom:6px;">
225 225 
               <el-button type="danger" size="mini" style="height:30px;margin-bottom:0px;" @click="openImgCutter">图片裁剪</el-button>
226 226 
               <span class="uploadImgHint" style="margin:0">可根据需要对图片进行裁剪。</span>
227 227 
             </div>
228 
+            <div>
229 
+              <el-button type="danger" size="mini" style="height:30px;margin-bottom:0px;" class="addBtn" @click="onClickAddPlaybtn">添加按钮</el-button>
230 
+              <span class="uploadImgHint" style="margin:0">在封面中心添加"播放按钮"素材。</span>
231 
+            </div>
228 232 
           </div>
229 233
230 234 
           <!-- <el-button type="primary" plain size="mini">裁剪</el-button> -->
 
@@ -314,6 +318,12 @@
314 318 
     </el-dialog>
315 319 
     <!-- E 批量编辑短剧链接 - 弹框 -->
316 320
321 
+    <!-- S 添加播放按钮弹框 -->
322 
+    <el-dialog width="840px" title="添加播放按钮" :visible.sync="addPlaybtnVisible" append-to-body>
323 
+      <addPlaybtn v-if="addPlaybtnVisible" :fileUrl="miniprogram.pic_url" @imgCutterCallback="addPlaybtnCallback" />
324 
+    </el-dialog>
325 
+    <!-- E 添加播放按钮弹框 -->
326 
+
317 327 
     <!-- S 批量添加短剧 - 弹框 -->
318 328 
     <multipleLinkSelect
319 329 
       :dialogVisible="multipleLinkSelectVisible"
 
@@ -331,15 +341,16 @@ import draggable from "vuedraggable"
331 341 
 import phonePreview from './phonePreview.vue'
332 342 
 import radarEntrance from './radarEntrance.vue'
333 343 
 import imgCutter from './imgCutter.vue'
344 
+import addPlaybtn from './addPlaybtn.vue'
334 345 
 import multipleLinkEdit from './multipleLinkEdit.vue'
335 346 
 import multipleLinkSelect from '@/components/manage/playletManageV2/dialog/multipleLinkDialog.vue'
336 347 
 import { pageFromType } from '@/assets/js/staticTypes'
337 348 
 import selectMaterials from "@/components/manage/materialLibrary/dialog/selectMaterials.vue"
338 349
339 
-// import imgCutter from './imgCutter.vue'
340 350 
 export default {
341 351 
   components: {
342 352 
     imgCutter,
353 
+    addPlaybtn,
343 354 
     draggable,
344 355 
     phonePreview,
345 356 
     radarEntrance,
 
@@ -443,6 +454,8 @@ export default {
443 454 
       multipleLinkSelectVisible: false, // 控制"添加短剧"弹框显示
444 455 
       selectMaterialsVisible: false, // 选择素材弹框
445 456 
       selectMaterialsSource:'', // 选择素材 - 判断是从哪里点击的
457 
+
458 
+      addPlaybtnVisible: false, // 添加按钮弹框
446 459 
     }
447 460 
   },
448 461 
   created () {
 
@@ -528,6 +541,48 @@ export default {
528 541 
         this.imgCutterVisible = true
529 542 
       }
530 543 
     },
544 
+
545 
+    onClickAddPlaybtn() {
546 
+      if (!this.miniprogram.pic_url) return this.$message.warning('请先添加小程序封面')
547 
+
548 
+      this.$loading(this.$loadingConfig)
549 
+      if ( this.miniprogram.pic_url.indexOf('http://playlet.oss-cn-beijing.aliyuncs.com/') != -1 ){
550 
+        this.oss_url = this.miniprogram.pic_url.replace('http://playlet.oss-cn-beijing.aliyuncs.com/','http://duanju.wenxingshuju.com/oss_image/');
551 
+        this.addPlaybtnVisible = true
552 
+        this.$loading(this.$loadingConfig).close()
553 
+      } else {
554 
+        if (this.oss_url) { // oss_url存在，说明已经通过服务端转化过，不需要重复转化
555 
+          this.addPlaybtnVisible = true
556 
+          this.$loading(this.$loadingConfig).close()
557 
+          return
558 
+        }
559 
+        // 图片通过服务器转化，解决图片裁剪跨域问题
560 
+        this.$axios.post(this.URL.BASEURL + this.URL.material_uploadFileByUrl, {
561 
+          img_url: this.miniprogram.pic_url
562 
+        }).then((res) => {
563 
+          var res = res.data
564 
+          if (res && res.errno == 0) {
565 
+            this.oss_url = res.rst.oss_url.replace('http://playlet.oss-cn-beijing.aliyuncs.com/','http://duanju.wenxingshuju.com/oss_image/');
566 
+            this.addPlaybtnVisible = true
567 
+            this.$loading(this.$loadingConfig).close()
568 
+          } else if (res.errno != 4002) {
569 
+            this.$message({ message: res.err, type: "error" })
570 
+          }
571 
+        }).catch((err) => {
572 
+          this.$message({ message: '服务器错误，获取图片失败', type: "error" })
573 
+        });
574 
+      }
575 
+
576 
+      this.addPlaybtnVisible = true
577 
+    },
578 
+    addPlaybtnCallback(obj) {
579 
+      this.addPlaybtnVisible = false
580 
+      if (obj.flag) {
581 
+        this.miniprogram.pic_url = obj.data.url
582 
+        this.miniprogram.pic_media_id = obj.data.material_id;
583 
+      }
584 
+    },
585 
+
531 586 
     radarids_reset () { //雷达id回显
532 587 
       this.has_attachLen = 0
533 588 
       this.radarIds = []
 
@@ -908,6 +963,10 @@ export default {
908 963 
 }
909 964 
 </script>
910 965 
 <style lang="scss" scoped>
966 
+.addBtn {
967 
+  background-color: #46a7ff;
968 
+  border-color: #46a7ff;
969 
+}
911 970 
 .ml-20 {
912 971 
   margin-left: 20px;
913 972 
 }

File diff suppressed because it is too large
+ 1 - 0
static/css/app.240903d7212d52fa0963fd6968e2adab.css


File diff suppressed because it is too large
+ 0 - 1
static/css/app.ee268c228186068249b80da5915dba0c.css


File diff suppressed because it is too large
+ 15 - 0
static/js/0.5d368e5de7530ce4b8f6.js


File diff suppressed because it is too large
+ 0 - 15
static/js/0.7a782b9b88edaf102a06.js


File diff suppressed because it is too large
+ 1 - 1
static/js/manifest.a43c681408839246ce8b.js