前端利用js进行图片压缩

经常遇到用户上传文件的场景,大多数是图像,在满足一些业务时候需要对用户上传的图像进行前端的校验控制,比如体积、长宽、类型等,如果遇到校验不通过的情况分两种一种是阻止上传一种是帮组用户处理出合法的图片。
第一种阻止上传影响用户的体验,用户还要自己找图片处理软件对着规则进行处理。
第二种就需要用到前端的一些技术帮组用户处理图像,目前可以做到压缩体积、压缩宽高、改变图片类型、甚至提供裁切宽进行裁切。

关键知识点:

FileReader
Canvas

关键代码:

1
2
3
4
5
6
7
8
9
10
11
12
// 以base64形式读取文件
reader.readAsDataURL(file)
// 读取成功回调 e.target.result
reader.onload = (e)=>{ img.src = e.target.result }
// canvas画图操作,this指当前image对象,起始点在平面坐标(0,0)处,画一张目标宽高的图像
context.drawImage(file, 0, 0, Width, Height)
// 转为blob对象
canvas.toBlob()
// 转为bae64对象
canvas.toDataURL()
// 图片加载完毕
img.onload = ()=>{}

阅读全文

限频节流函数debounce&throttle

lodash的function模块里有两个方法,debouncethrottle,可以做节流限频使用,为在某些特定的环境下做必要的优化。
这两个方法了解原理后也可以自己去实现。

场景一 曝光埋点

在一个多屏长度的页面中,A模块的A元素在出现在屏幕可视区域时候(即曝光)触发埋点事件,随即上报相应参数。
思路:A模块A元素距离文档顶部的高度是固定值设为bodyOffsetTop,添加onscroll事件到window上,通过监听滚动事件,不断计算此时被卷入上去的文档高度docScrollTop,假设屏幕可视区域的高度为viewHeight
当以下条件成立的时候,我们就认为该元素是出于可曝光的区域的。

1
bodyOffsetTop <= docScrollTop + viewHeight

具体实现代码:

阅读全文

Vue长笔陆续更新

Npm install

1
2
npm install -S vue
npm install -S vuex

Vuex

root组件处进行store注册注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Vue.use(Vuex)
const store = new Vuex.Store(storeParams)
const storeParams = {
state:{
point: [55,90,29,66,86,85,99],
count: 0
}
getters:{
pointBoder(state){
const maxPoint = Math.max.apply(null, state.point)
return maxPoint-20 //最高分以下20分被认为是高分的边界
},
highPoints(state, getters){
const pointBorder = getters.pointBoder
return state.point.filter(item => item > pointBorder)
}
}
mutations:{
// 'increament'称为事件类型 对应方法称为回调函数
increament(state, { baseNum = 1 }){
state.count += payload.baseNum
}
}
actions:{
asyncIncreament({ commit }){
setTimeout(()=>{
commit('increament')
},1000)
}
}
}

阅读全文

webpack搭建react基础项目框架

初始化,生成package.json

1
npm init -y

初始化git

1
git init

阅读全文

Mac利用charles进行本地服务调试

Charles官网
mac上我一般都会用Charles作为抓包和代理映射工具
1.普通抓包很简单,Charles和需要抓包的网络请求设备处于同一网络环境中,工具栏的proxy -> macOS Proxy勾选就可以抓包本机的请求,移动设备或者其他设备抓包请将代理设置成手动,代理地址即为Charles所在设备的网络环境ip,端口一般为8888,设置完成后Charles会有弹框提醒是否允许信任之类的询问,直接选择allow,这样就可以愉快的抓其他设备的请求包来看了,这种抓包不需要安装ssl证书也可以抓https

阅读全文

node笔记整理之HTTP模块

核心类
http.Server 提供服务处理客户端的请求
http.ServerResponse 服务端针对客户端的请求做出响应
http.IncomingMessage 获取服务端/客户端返回的相关信息
http.ClientRequest 客户端向服务端发起请求

http.Server类

提供服务,处理客户端的请求

createServer(requestListener)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
* @param requestListener(request,response) <Function> 当接收到客户端的请求时候进行的处理
* * * * * @param request http.IncomingMessage对象 指客户端的请求
* * * * * @param response http.serverResponse对象 指服务端的响应
* @return HTTP Server类
*
* 继承自 net.server 类且具有以下额外事件方法属性
* @event clientError 客户端触发一个Error事件,该事件监听器负责销毁底层socket
* * * * callback(err,socket)
* * * * @param err 错误对象
* * * * @param socket net.socket对象 触发此事件将不会有(req,res),所以发送任何http响应,应写入socket对象
* @event close 当http服务关闭触发
* @event connect 当客户端发送HTPP CONNECT请求时候触发,HTTP method为connect,该事件未被监听则客户端会关闭连接
* @event connection 客户端和服务端建立连接时触发 callabck(socket)
* * * * @param socket 服务端监听客户端的socket对象
* @event request callback(req,res) 每接收到一个请求时触发,多个request可能对应的是一个 connection(keep-alive), 参数值同requestListener
* @event upgrade callback(req,socket,head) 每当客户端发送http upgrade请求时触发,该事件未被监听则客户端会关闭连接
*
* @method close 停止服务端接收新的连接
* @method listen([port],[hostname],[backlog],[callback])
* * * * * @param port <number> 端口 默认随机分配
* * * * * @param hostname <string> 主机名域名
* * * * * @param backlog <number> 等待连接的队列最大长度 默认511
* * * * * @param callback <function> 回调
* @method listen(path,[callback]) 启动一个unix socket服务
* @method listen(handle,[callback])
* @method setTimeout([msecs=120000],[callback]) 设置socket超时时间,发生超时触发服务器对象的 'timeout' 事件,并传入 socket 作为一个参数
*
* @property listening [boolean] 服务是否在监听连接
* @property maxHeaderCount 限制请求头的最大数量 默认2000 0表示无限制
* @property timeout 设置获取连接超时时间
* @property keepAliveTimeout 服务器完成最后的响应需要等待额外数据的时间,保持活跃的毫秒数,之后才销毁socket
*/

阅读全文

node笔记整理之fs和path

FS模块

打开文件

fs.open(path, flags[, mode], callback)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// flags: 文件打开模式,读取为'r',写入为'w',追加为'a'
// 读取
fs.open('./readfile.txt', 'r', (err, fd) => {
if (err) {
console.log('发生错误: ' + err);
} else {
let buff = Buffer.allocUnsafe(255);
// fs.read() @params(文件描述,指定读入的缓存,写入缓存开始位置,写入长度,读取文件开始位置,callback)
// callback() @params(错误对象,实际长度,被读取缓存的对象)
fs.read(fd, buff, 0, 28, 0, (err, bytesRead, buffer) => {
let newBuff = buffer.slice(0, bytesRead).toString();
console.log(bytesRead, newBuff);
});
}
});
// 写入
fs.open('./writefile.txt', 'a', (err, fd) => {
if (err) {
console.log('发生错误: ' + err);
} else {
let buff = Buffer.from('打开后写入:nodeJs博大精深~\r\n');
// fs.write() @params(文件描述,指定读出的缓存,读取缓存开始位置,读取长度|null默认长度,写入文件开始位置|null上次位置,callback)
// callback() @params(错误对象,实际长度,被读取缓存的对象)
fs.write(fd, buff, 0, null, null, (err, written, buffer) => {
if (err) console.log('写文件失败');
console.log('写文件成功', written, buffer);
fs.fsync(fd, err => { if (err) console.log('fsync错误:' + err) });
fs.close(fd, err => { if (err) console.log('close错误:' + err) });
});
}
});

阅读全文

js的this指向实践问题记录

遇到的this问题的翻车事故

this对于当时刚接触js的人来说幽灵一般的存在,就是老司机也不免有大意翻车的时候,印象中很多前端面试的基础部分考察prototypethis是必不可少的。
前几天改一个bug改出this的问题,大意翻车,虽然很快就解决了,但还是警醒下自己,温习梳理以免再出错。
问题类似下面的代码块,对象外提取公共模块导入,对象内部方法和属性通过对象传参params的方式进入setTime方法执行业务逻辑。

阅读全文

mac转windows入职舒适体验手册

“这辈子不可能windows的,不可能用windows的,体验太差了”,这是我用三年的mac之后感受到的,appple对于软硬件结合使用的用户体验真的是做到了极致,几近完美的retina和字体体验,三年几乎没有关过机的情况下没有任何卡顿。我从A出来之后到了J,这边强制性的配置了台式机windows7系统,当时我是拒绝的,个人电脑也没有很好的办法加到公司的网络,当时真的是硬着头皮从mac转windows的,果然一开机,这个开机速度,渣渣的屏幕和windows的默认字体,没有了习惯的Spotlight,加上J公司相对较差较慢的网络环境,强大到github,各种云,各种音乐视频网站都上不去的网络限制,真是感觉自己会因为一台设备和开发环境离职的感觉。但是,我要说但是,自己不可能这么幼稚的,一个人强大的表现是跳出自己舒适圈,去适应和挑战一些东西。随手查了资料,发现自己可以打造一个相对于舒适的设备环境体验,不用mac又如何?
so…

阅读全文

根据唯一标识进行UI定制化

UI可定制的地方:

  • 字体
  • 图片图标背景
  • 文案
  • 位置
  • 数量
  • 外观(形状背景)
  • 请求地址(通过标识的更改)

阅读全文