图片涂鸦

src/common/env.js

@@ -54,7 +54,7 @@ export const getAddress = () => {
         Url = ipAddress + "/ADMIN_CMS_FE/rest/";
         //msUrl = "http://10.177.15.117:10201" + "/contents/";
         // msUrl = "http://10.177.15.154:10203" + "/contents/";
-        msUrl = "http://dev-sc.yunqueyi.com" + "/contents/";
+        msUrl = "https://dev-sc.yunqueyi.com" + "/contents/";
         lectureUrl = "https://dev-sc.yunqueyi.com"
         liveUrl = "https://dev-sc.yunqueyi.com/campaign/";
         kfUrl = "http://test1-kf.yunqueyi.com" + "/api/";
@@ -63,7 +63,7 @@ export const getAddress = () => {
         // qiniuUrl = "http://10.177.15.154:10203/contents/admin/qiniu/token"; //不再使用middle服务获取七牛token
         qiniuUrl = "https://dev-sc.yunqueyi.com/contents/admin/qiniu/token";
         // qiniuFileUrl = "http://10.177.15.154:10203/contents/admin/qiniu/token1";
-        qiniuFileUrl = "http://dev-sc.yunqueyi.com/contents/admin/qiniu/token1";
+        qiniuFileUrl = "https://dev-sc.yunqueyi.com/contents/admin/qiniu/token1";
         qiniuResourceUrl = "https://test1-videos.yunqueyi.com";
     } else if (isNotEmptyUtils(env)) {//测试test1 test2 uat
         versionUrl = 'https://' + env + '-dev.yunqueyi.com';

src/router/index.js

@@ -43,6 +43,10 @@ export default new Router({
                     path: '/path-data',
                     component: resolve => require(['../views/user-path/funnel-data.vue'], resolve)
                 },
+                { // 页面埋点管理
+                    path: '/strack-list',
+                    component: resolve => require(['../views/strack-data/strack-list.vue'], resolve)
+                }
             ]
         },
         {  // 短信中的 数据查看页面

src/views/strack-data/strack-list.vue

+<template>
+    <div>
+        <div>埋点管理</div>
+        <el-form ref="form" label-width="120px" :model="form">
+            <el-form-item label="上传图片:" prop="filePath">
+                <el-upload
+                    v-model="form.filePath"
+                    class="avatar-uploader"
+                    action="#"
+                    :show-file-list="false"
+                    :before-upload="beforeAvatarUpload">
+                    <img class="bg-img" src="../../../static/img/default.png">
+                </el-upload>
+            </el-form-item>
+        </el-form>
+        <div class="fa">
+            <div class="top">
+                <input id="clear" type="button" value="清除画布" style="width:80px;"/>
+                <input id="imgurl" type="button" value="保存" style="width:80px;"/>
+            </div>
+            <canvas id="canvas" width="375" height="667">您的浏览器不支持 canvas 标签</canvas>
+            <div id="div1"></div>
+        </div>
+        <div id="html">
+            <img :src="saveImgUrl" />
+        </div>
+    </div>
+</template>
+<script>
+import {doUpload, getFilePath,} from "../../common/qiniuUtil";
+import {isEmptyUtils, openLoading, closeLoading,messageBox} from '../../common/utils';
+export default {
+    data() {
+        return {
+            saveImgUrl: '',
+            form: {
+                filePath: ''
+            }
+        }
+    },
+    mounted() {
+       this.load();
+    },
+    methods: {
+        load(){   
+            this.x = [];//记录鼠标移动是的X坐标
+            this.y = [];//记录鼠标移动是的Y坐标
+            this.clickDrag = [];
+            this.lock = false;//鼠标移动前，判断鼠标是否按下
+            this.eraserRadius = 15;//擦除半径值
+            this.$ = function(id){return typeof id=="string" ? document.getElementById(id) : id;};
+            this.canvas = this.$("canvas");
+            this.cxt = this.canvas.getContext('2d');
+            this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式
+            this.cxt.lineWidth = 3;//线条的宽度
+            this.iptClear = this.$("clear");
+            this.imgurl = this.$("imgurl");//图片路径按钮
+            this.w = this.canvas.width;//取画布的宽
+            this.h = this.canvas.height;//取画布的高 
+            this.touch =("createTouch" in document);//判定是否为手持设备
+            this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代
+            this.MoveEvent = this.touch ? "touchmove" : "mousemove";
+            this.EndEvent = this.touch ? "touchend" : "mouseup";
+            this.bind();
+        },
+        bind(){
+            var t = this;
+            this.iptClear.onclick = function(){ /*清除画布*/
+                t.clear();
+            };
+            this.canvas['on' + t.StartEvent] = function(e){   /*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/
+                var touch = t.touch ? e.touches[0] : e; 
+                var _x = touch.clientX - touch.target.offsetLeft -250; //鼠标在画布上的x坐标，以画布左上角为起点
+                var _y = touch.clientY - touch.target.offsetTop -70; //鼠标在画布上的y坐标，以画布左上角为起点             
+                t.movePoint(_x,_y);//记录鼠标位置
+                t.drawPoint();//绘制路线
+                t.lock = true;
+            };
+            this.canvas['on' + t.MoveEvent] = function(e){ /*鼠标移动事件*/
+                var touch = t.touch ? e.touches[0] : e;
+                if(t.lock){ //t.lock为true则执行
+                    var _x = touch.clientX - touch.target.offsetLeft -250;//鼠标在画布上的x坐标，以画布左上角为起点
+                    var _y = touch.clientY - touch.target.offsetTop-70;//鼠标在画布上的y坐标，以画布左上角为起点
+                    t.movePoint(_x,_y,true);//记录鼠标位置
+                    t.drawPoint();//绘制路线
+                }
+            };
+            this.canvas['on' + t.EndEvent] = function(e){ /*重置数据*/
+                t.lock = false;
+                t.x = [];
+                t.y = [];
+                t.clickDrag = [];
+                clearInterval(t.Timer);
+                t.Timer=null;
+            };
+            this.imgurl.onclick=function(){
+                t.getUrl();
+            };
+        },
+        movePoint(x, y, dragging){   /*将鼠标坐标添加到各自对应的数组里*/
+            this.x.push(x);
+            this.y.push(y);
+            this.clickDrag.push(y);
+        },
+        drawPoint(x,y,radius){
+            for(var i = 0; i < this.x.length; i++){ //循环数组
+                this.cxt.beginPath(); //context.beginPath() , 准备绘制一条路径
+                if(this.clickDrag[i] && i){ //当是拖动而且i!=0时，从上一个点开始画线。
+                    this.cxt.moveTo(this.x[i-1], this.y[i-1]); //context.moveTo(x, y) , 新开一个路径，并指定路径的起点
+                }else{
+                    this.cxt.moveTo(this.x[i]-1, this.y[i]);
+                }
+                this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来
+                this.cxt.closePath();//context.closePath() , 如果当前路径是打开的则关闭它
+                this.cxt.stroke();//context.stroke() , 绘制当前路径
+            }
+        },
+        clear(){
+            this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点
+        },
+        dataURLtoFile(dataurl, filename = 'file') {
+            let arr = dataurl.split(',');
+            let mime = arr[0].match(/:(.*?);/)[1];
+            let suffix = mime.split('/')[1]
+            let bstr = atob(arr[1])
+            let n = bstr.length
+            let u8arr = new Uint8Array(n)
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n)
+            }
+            return new File([u8arr], `${filename}.${suffix}`, {
+                type: mime
+            })
+        },
+        getUrl(){
+            let _this = this;
+            var base64Img = this.canvas.toDataURL();
+            // 转成图片文件
+            var imgFile = this.dataURLtoFile(base64Img); 
+            doUpload(_this, imgFile, getFilePath(imgFile,null), 'preview4', 'progress1', 1).then(function (path) {
+                _this.saveImgUrl = path.fullPath;
+            });
+        },
+        beforeAvatarUpload(file) {
+            let _this = this;
+            if (isEmptyUtils(file)) {
+                return;
+            }
+            _this.$message.info('开始上传');
+            doUpload(_this, file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
+                let bg = document.getElementById('canvas');
+                let ctx = bg.getContext('2d')
+                // bg.style.background = "url('" + path.fullPath + "') no-repeat";
+                // bg.style.backgroundSize = "300px auto";
+                // bg.style.zIndex = "-1";
+                ctx.drawImage(path.fullPath,100,100);
+                _this.imageUrl = path.fullPath;
+                _this.form.filePath = path.fullPath
+                _this.$message.success('上传成功');
+            });
+            return false;  
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+*{margin:0;padding:0;}
+ .fa{width:740px;margin:0 auto;}
+ .top{margin:20px 0;}
+ #canvas{background:#eee;cursor:default;}
+</style>
\ No newline at end of file