Skip to content

P
pica-sensitive-admin
提交 2195795f 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

图片涂鸦

上级 3d2a4329
显示空白字符变更
内嵌 并排
正在显示 包含 177 行增加 和 2 行删除
src/common/env.js
浏览文件 @ 2195795f
...@@ -54,7 +54,7 @@ export const getAddress = () => { ...@@ -54,7 +54,7 @@ export const getAddress = () => {
Url = ipAddress + "/ADMIN_CMS_FE/rest/"; Url = ipAddress + "/ADMIN_CMS_FE/rest/";
//msUrl = "http://10.177.15.117:10201" + "/contents/"; //msUrl = "http://10.177.15.117:10201" + "/contents/";
// msUrl = "http://10.177.15.154:10203" + "/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" lectureUrl = "https://dev-sc.yunqueyi.com"
liveUrl = "https://dev-sc.yunqueyi.com/campaign/"; liveUrl = "https://dev-sc.yunqueyi.com/campaign/";
kfUrl = "http://test1-kf.yunqueyi.com" + "/api/"; kfUrl = "http://test1-kf.yunqueyi.com" + "/api/";
...@@ -63,7 +63,7 @@ export const getAddress = () => { ...@@ -63,7 +63,7 @@ export const getAddress = () => {
// qiniuUrl = "http://10.177.15.154:10203/contents/admin/qiniu/token"; //不再使用middle服务获取七牛token // qiniuUrl = "http://10.177.15.154:10203/contents/admin/qiniu/token"; //不再使用middle服务获取七牛token
qiniuUrl = "https://dev-sc.yunqueyi.com/contents/admin/qiniu/token"; qiniuUrl = "https://dev-sc.yunqueyi.com/contents/admin/qiniu/token";
// qiniuFileUrl = "http://10.177.15.154:10203/contents/admin/qiniu/token1"; // 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"; qiniuResourceUrl = "https://test1-videos.yunqueyi.com";
} else if (isNotEmptyUtils(env)) {//测试test1 test2 uat } else if (isNotEmptyUtils(env)) {//测试test1 test2 uat
versionUrl = 'https://' + env + '-dev.yunqueyi.com'; versionUrl = 'https://' + env + '-dev.yunqueyi.com';
......
src/router/index.js
浏览文件 @ 2195795f
...@@ -43,6 +43,10 @@ export default new Router({ ...@@ -43,6 +43,10 @@ export default new Router({
path: '/path-data', path: '/path-data',
component: resolve => require(['../views/user-path/funnel-data.vue'], resolve) 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 0 → 100644
浏览文件 @ 2195795f
<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
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或