镂空遮盖层效果的研究

2019-08-12
阅读 4 分钟
5k
上图是“QQ截图”选择区域时的画面,可以看到除了中间框选的部分,其他区域被一层半透明层覆盖(backdrop),这种效果不知道专业叫法,这里称呼它“镂空遮盖层”。实际业务需求中倒是不多见,比较常见的是“页面上的新手引导”,“视频网站的关灯模式”等用到这种效果,通用简单的做法是将内容元素的z-index设置大于遮盖层的,使...

用JavaScript来计算两个图像的相似度

2019-08-02
阅读 3 分钟
8.5k
最近看了阮一峰老师的相似图片搜索的原理(二),其中介绍了通过内容特征法来对比两个图片的相似性。 大致步骤: 把图片都缩放到50x50大小 转成灰度图片 利用"大津法"(Otsu's method)确定阈值 通过阈值再对图片进行二值化 对比两个图片对应位置像素,得出结果 接下来,看看用JS怎么实现上面的步骤,理论部分就不多介绍...

多个请求并发执行怎么写?

2019-07-28
阅读 4 分钟
11.5k
如果是传统做法是遍历数组发送请求,声明一个变量记录请求数,不管成功或失败,结束后都给这个变量+1,并且调用一个函数,这个函数判断当前变量是否等于数组长度,相等则表示所有请求已经完成。

canvas使用自定义字体

2019-07-24
阅读 2 分钟
18.3k
[TL;DR] 有人在群里发了张图片问最后一个是什么字。根据生活经验和一些图片上的信息搜索并没有匹配到对应的字。然后找了个提供字体识别服务的网站,获得图中所用字体后,把常用汉字输入预览,肉眼一一对比后确认了这个字,也是运气加眼神好。后来写了个简单的页面用程序来做对比:先把图片二值化再简化得到一个数组,然...

mask-image的应用

2019-07-01
阅读 2 分钟
4.1k
遮罩层,如果学过Flash的同学应该都听过,跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的,而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞,我们可以通过洞看卡纸后面的物体,这里卡纸相当于遮罩层,只不过洞是遮罩层不透明的部分,其他部分是遮罩层透明的部分,与我们...

从GitHub仓库下载单个文件夹或目录

2019-06-15
阅读 2 分钟
8.5k
现在我们开发项目时已经习惯了面向搜索,面向GitHub编程,有时候想把仓库中的某个文件夹或文件下载到本地,通常只能通过git clone先把整个仓库克隆到本地,遇到仓库中文件比较多或有较大文件时常常需要等待很长时间。

实现图片恒定宽高比的属性 — intrinsicsize

2019-06-10
阅读 1 分钟
8.7k
开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。(这里假设图片是<img>元素,不是作为background,页面上要显示图片的宽高比与图片本身的宽高比并不一定相同。)

url字符串解析

2019-05-02
阅读 2 分钟
6.4k
众所周知,我们可以通过location获得当前页面地址(URL)的href、protocol、host、search、hash等属性,但是如果给你一个url字符串,怎么得到这些属性呢?也许用正则是一个方法。

新手学跨域之代理/转发

2019-05-01
阅读 2 分钟
5.1k
jsonp iframe● document.domain● window.name● location.hash● navigator (IE6 bug)● postMessage CORS● XMLHttpRequest (modern browser)● XDomainRequest (IE8+) 图像Ping (略) flash (略) 代理/转发● http-server● webpack-dev-server● nginx 以前写的这个系列的时候,是看了一些资料之后通过实操,从一个前端初学者...

从灭霸的无限手套说起

2019-04-30
阅读 3 分钟
9.3k
前两天看到Google搜索有个彩蛋,搜索灭霸或者thanos,点击右边的无限手套触发彩蛋,打个响指,消灭一半的搜索结果条目,消失特效类似电影里的。

自定义Atom的代码片段

2017-03-09
阅读 2 分钟
5.2k
Atom生成代码片段(code snippets)的功能很好用,能够提高编写代码的效率,但有些默认片段可能不符合自己的预期或者我们想自己添加片段,那么就需要我们自定义了。

用svg写个圆环loading动画

2016-09-25
阅读 1 分钟
6.5k
通过观察可以发现,这个进度条大部分是实线,最后一小段是个逐渐消失的线段。所以,我们可以把这个进度条分成两个path实现,消失那段用渐变效果。

新手学跨域之CORS

2014-09-30
阅读 1 分钟
6.2k
jsonp iframe● document.domain● window.name● location.hash● navigator (IE6 bug)● postMessage CORS● XMLHttpRequest (modern browser)● XDomainRequest (IE8+) 图像Ping (略) flash (略) 代理/转发● http-server● webpack-dev-server● nginx 前后端跨域交互终于迎来了官方的支持,只需在后端设置允许前端请求域,即...

新手学跨域之iframe

2014-09-30
阅读 4 分钟
46.8k
jsonp iframe● document.domain● window.name● location.hash● navigator (IE6 bug)● postMessage CORS● XMLHttpRequest (modern browser)● XDomainRequest (IE8+) 图像Ping (略) flash (略) 代理/转发● http-server● webpack-dev-server● nginx 页面嵌套iframe是比较常见的,比如QQ相关业务页面的登录框一般都是iframe...

新手学跨域之Jsonp

2014-09-29
阅读 3 分钟
7.4k
jsonp iframe● document.domain● window.name● location.hash● navigator (IE6 bug)● postMessage CORS● XMLHttpRequest (modern browser)● XDomainRequest (IE8+) 图像Ping (略) flash (略) 代理/转发● http-server● webpack-dev-server● nginx Jsonp个人的理解是后端向前端传输JSON格式数据一种方式,形如 callback({"...

新手学跨域

2014-09-29
阅读 2 分钟
3.6k
协议 (http, https, ftp etc.) 、域名 (foo.com, bar.com, img.foo.com) 、端口 (80, 8080, ...) 其中有一个不一致即形成跨域。跨域是一种解决浏览器同源策略限制的手段,应根据场景选用合适的跨域方法,而不是在一种场景下随便哪个都可以。

同域跨页面监听

2014-09-20
阅读 1 分钟
4k
今天用百度音乐听歌,在一个页面点击播放,会打开音乐盒页面播放歌曲,再点另一首歌点播放,不会再打开一个新的音乐盒页面,而是在原来的音乐盒页面播放,感觉挺牛逼的。

[html5] (Notification) 桌面通知

2014-09-10
阅读 2 分钟
6.5k
前几天要做一个桌面通知的功能,翻查以前做的笔记,发现 webkitNotifications这个已经不能用了,baidu了下,基本都是介绍webkitNotifications的,后来在SOF上找到答案,现在chrome支持的是Notification,估计是W3C标准化了。api也变了,mark之。