- 博客(11)
- 收藏
- 关注
RSS订阅原创 vue js 图像标注 --- canvas 实现
图像标注需求打点式实现思路矩形框实现思路右键弹出删除和添加备注菜单删除选中内容更新备注项目中碰到一个需要对图像标注的功能，查了好几个插件，但是感觉用起来有点颇为复杂而且和自己需要的功能不完全一致，于是就自己用canvas写了一个简单的：需求两种标注方式，一种是打点式标注，一种是矩形框标注打点式：单击图像打点，把每一个点用线连接起来，最后双击结束，形成一个闭环，并把所有坐标点记录下来传给后端矩形框：和其他标注工具一样，鼠标随意拖动，形成一个矩形框，并把四个角的坐标点记录下来传给后端在绘制的内容
2021-09-01 14:15:32
3813
2
原创 数字图像处理 ---- 初级
在一次项目中，碰到一个需求是前端处理图像的，看到反色显示、边缘增强、有机物剔除、无机物剔除、黑白、彩色、变深、变浅等功能，瞬间有点慌。。。毕竟从来没有接触过，感觉好难的亚子。。。后来经过各种百度最终完成了，在这里记录一下：首先安利一下css的 filter滤镜属性，之前都完全不知道这个属性，还是经过这次才了解到，超级好用…不过再好用它也只能帮我完成部分功能，比如反色、黑白、彩色、变深、变浅这几个，剩下的边缘增强和有机物无机物剔除还是靠我们强大的canvas完成的：首先要了解图像是由像素点构成，比如
2021-08-23 15:26:11
214
原创 vue-number-running ----------数字滚动插件
数字滚动插件有很多，可能你也想要下面这样子的：可以使用vue-number-running这款插件安装依赖npm install vue-number-running或者cnpm ... yarn ...引入打开main.jsimport NumberRunning from 'vue-number-running'import "vue-number-running/lib/number-running.css"Vue.use(NumberRunning)组件使用<
2021-08-19 14:03:37
343
2
原创 vue-gradient-progress --------渐变色圆环进度条
在实际开发中可能会遇到这样的 UI 效果图：带动画效果的渐变色圆环进度条，可以使用vue-gradient-progress插件来实现安装依赖npm install vue-gradient-progress -S也可以使用 cnpm yarn 等main.js 引入： import GradientProgress from 'vue-gradient-progress' import "vue-gradient-progress/lib/gradient-progress.css"
2021-08-17 17:46:23
1073
1
原创 vue-cli3自定义组件发布npm包
创建项目使用vue create xxx命令创建一个default类型的项目修改目录把src 改为 examples添加一个新目录 packages修改配置添加vue.config.js 并修改为：开发组件在packages下创建progress目录和index.js文件，progress目录下创建index.js和main.vuemain.vue中编写组件代码，注意：组件的name一定要写，将来是使用时的标签名(我这里是GradientProgress)progr
2021-08-17 15:35:18
504
原创 linux常用命令
linux常用命令返回文件系统中的位置；返回当前目录下的所有文件和目录进入指定目录创建指定名称的空文件或目录删除指定名称的文件或目录重命名或移动文件或目录（可以同时完成）重命名或复制文件或目录 (可以同时完成)解压目录(常用类型的)压缩/打包目录(常用类型的)查看文件内容编辑文件内容返回文件系统中的位置；pwd 打印当前工作目录返回当前目录下的所有文件和目录ls 仅有文件或目录名ll 详细信息，包含时间、大小等进入指定目录cd ...创建指定名称的空文件或目录touch ..
2021-08-10 17:30:37
59
原创 常用的utils工具函数
前端常用的工具函数深拷贝对象或数组防抖函数节流函数深拷贝对象或数组 deepClone(source){ // 排除null 和不是对象或数组的值 if(source === null || typeof source !== 'object'){ return source } let isArray = Array.isArray(source) let result = isArray ? []:{} if(isArray){ result = source.m
2021-07-16 18:32:29
697
原创 认识JSX语法
jsx笔记环境基础使用环境html代码中必须先引入babel 的包，并且script 必须添加type='text/babel’属性，才能识别jsx；基础使用const element = <div>这就是一句JSX代码</div>
2021-07-07 16:54:33
83
原创 复习this的面试习题
面试题一：var name = "window";var person = { name: "person", sayName: function () { console.log(this.name); }};function sayName() { var sss = person.sayName; sss(); person.sayName(); (person.sayName)(); (b = person.sayName)(); }sayN
2021-07-05 16:19:06
115
原创 进一步了解this的指向
this的几种绑定默认绑定隐式绑定显示绑定new 绑定几种绑定的优先级内置函数忽略显示绑定间接函数引用ES6的箭头函数默认绑定独立的函数调用，并没有被绑定到任何对象上；this 指向window；常见的几种情况：普通函数直接调用函数调用链将函数作为参数传入到另一个函数中例子如下： 1、 function foo(){ console.log(this) } foo() //window 2、function fun1(){ console.log(this)
2021-07-05 15:39:00
51
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人