askbot-dragon 0.7.17 → 0.7.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "0.7.17",
+  "version": "0.7.21",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/js/AliyunlssUtil.js

@@ -0,0 +1,92 @@
+
+
+const OSS = require('ali-oss');
+
+const ossConfig={
+    region: "oss-cn-zhangjiakou",
+        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
+        accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
+        accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
+        // stsToken: '<Your securityToken(STS)>',
+        bucket: "guoranopen-zjk",
+};
+
+let IDX = 256, HEX = [], SIZE = 256, BUFFER;
+while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
+
+function uid(len) {
+    let i = 0, tmp = (len || 11);
+    if (!BUFFER || ((IDX + tmp) > SIZE * 2)) {
+        for (BUFFER = '', IDX = 0; i < SIZE; i++) {
+            BUFFER += HEX[Math.random() * 256 | 0];
+        }
+    }
+
+    return BUFFER.substring(IDX, IDX++ + tmp);
+}
+
+function dataFormat(fmt, date = new Date()) {
+    const o = {
+        "M+": date.getMonth() + 1, //月份
+        "d+": date.getDate(), //日
+        "h+": date.getHours(), //小时
+        "m+": date.getMinutes(), //分
+        "s+": date.getSeconds(), //秒
+        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
+        "S": date.getMilliseconds() //毫秒
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (const k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+}
+
+function pathGenerate(filename) {
+    return "front-oss/" + dataFormat("yyyy/MM/dd/hh/mm/") + uid(32) + "/" + filename;
+}
+
+
+async function upload(ossConfig, data) {
+    let ossClient = new OSS(ossConfig);
+    // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
+    let objectKey = pathGenerate(data.name);
+    let result = await ossClient.put(objectKey, data);
+    console.debug(result);
+    return result;
+}
+
+async function multipartUpload(ossConfig, data, callback,extCallback) {
+    let ossClient = new OSS(ossConfig);
+    // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
+    let objectKey = pathGenerate(data.name);
+    let res = await ossClient.multipartUpload(objectKey, data, {
+        progress: function (p, checkpoint) {
+            console.debug('progress callback', p, checkpoint);
+            // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
+            if (callback && callback instanceof Function) {
+                callback(p, checkpoint,data,extCallback);
+            }
+        }
+    });
+    return res;
+}
+
+function ossFileUrl(ossConfig, path, cname) {
+    if (cname == null) {
+        return '//' + ossConfig.bucket + '.' + ossConfig.region + '.aliyuncs.com/' + path;
+    } else {
+        return cname + '/' + path;
+    }
+}
+
+function uploadImageByBase64(ossConfig,blob) {
+    let ossClient = new OSS(ossConfig);
+
+    // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
+    let objectKey = pathGenerate(new Date().getTime());
+    let result = ossClient.put(objectKey, blob);
+    console.debug(result);
+    return result;
+}
+
+export {upload, multipartUpload, ossFileUrl,uploadImageByBase64,ossConfig}

package/src/assets/js/Base64Util.js

@@ -0,0 +1,22 @@
+function base64toBlob(b64Data, contentType='', sliceSize=512) {
+    const byteCharacters = atob(b64Data);
+    const byteArrays = [];
+
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+        const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+
+        const byteArray = new Uint8Array(byteNumbers);
+
+        byteArrays.push(byteArray);
+    }
+
+    const blob = new Blob(byteArrays, {type: contentType});
+    return blob;
+}
+
+export {base64toBlob}

package/src/components/askVideo.vue

@@ -1,7 +1,9 @@
 <template>
     <div
             v-loading="loading"
-            :element-loading-text="showProgress">
+            :element-loading-text="showProgress"
+            id="dragon-video"
+    >
         <!-- <video-player
           class="video-player vjs-custom-skin"
           x5-video-player-type="h5"
@@ -12,21 +14,24 @@
                 controls="controls"
                 :raw-controls="true"
                 x5-video-player-type="h5-page"
-                style="object-fit: contain;width: calc(100vw - 139px);height: 160px;background-color: black;border-radius: 25px;max-width: 230px;padding: 0 10px"
+                style="object-fit: contain;width: calc(100vw - 139px);height: 160px;background-color: black;border-radius: 25px;max-width: 230px;padding-left: 10px"
+                :poster="poster"
                 class="video-player vjs-custom-skin"
                 :id="msg.keyId+'key'">
-          <source :src="videoSrc" />
+          <source :src="videoSrc"/>
         </video>
-      <div id="output"></div>
     </div>
 </template>
 <script>
+    import {ossConfig,uploadImageByBase64} from "../assets/js/AliyunlssUtil";
+
     export default {
         name: "ask_video",
         props: ["msg", "url", "localUrl", "progress"],
         data() {
             return {
-              videoSrc:''
+              videoSrc:'',
+              poster:''
             }
         },
         watch: {
@@ -45,14 +50,78 @@
       mounted() {
           this.$nextTick(()=>{
             this.videoSrc = this.url ? this.url : this.localUrl
+            this.getImage()
+
           })
 
       },
       methods:{
+        getImage(){
+          let that = this
+          var video;
+          var scale = 0.8;
+
+          var initialize = function() {
+            let id = that.msg.keyId+'key'
+            video = document.getElementById(id);
+            video.addEventListener('loadeddata',captureImage);
+          };
+
+          var captureImage = function() {
+            var canvas = document.createElement("canvas");
+            canvas.width = video.videoWidth * scale;
+            canvas.height = video.videoHeight * scale;
+            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+            /*var img = document.createElement("img");
+            img.crossOrigin = 'anonymous'*/
+            /*img.src = canvas.toDataURL("image/png");*/
+            let base64 = canvas.toDataURL("image/png")
+            let blob = that.dataURLtoFile(base64,'name')
+            let promise = uploadImageByBase64(ossConfig,blob);
+            promise.then((res)=>{
+              console.debug("upload base64 reslut",res);
+              if (res&&res.url){
+                that.poster = res.url
+              }
+            });
+            /*output.appendChild(img);*/
+          };
+
+          initialize();
+        },
+        dataURLtoFile(dataurl, filename) {
+          var arr = dataurl.split(',');
+          var mime = arr[0].match(/:(.*?);/)[1];
+          var bstr = atob(arr[1]);
+          var n = bstr.length;
+          var u8arr = new Uint8Array(n);
+          while(n--){
+            u8arr[n] = bstr.charCodeAt(n);
+          }
+          //转换成file对象
+          return new File([u8arr], filename, {type:mime});
+          //转换成成blob对象
+          /*return new Blob([u8arr],{type:'image/png'});*/
+        }
       }
 
     }
 </script>
 <style scoped lang="less">
+video::-webkit-media-controls-mute-button { display: none !important;}
+#dragon-video{
+  position: relative;
+  #outputVideo{
+    position: absolute;
+    top: 0px;
+    /deep/img{
+      width: calc(100vw - 139px);
+      border-radius: 25px;
+      max-width: 230px;
+      height: 160px;
+    }
+
+  }
+}
 
 </style>