子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

分类:Front End

【实战】HTML5摄像头拍照组件的封装

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。…

+ 阅读更多

Webstorm(Mac版)快捷键整理

用Webstorm来调试Node代码简直太赞了,断点调试、属性方法快速等特性让我快速脱离了用Sublime text + node-inspector那种刀耕火种的痛苦状态,幸福指数嗖嗖嗖的就上来了~~~~…

+ 阅读更多

学习笔记:vim基础 —— 多窗口功能

一般的编辑软件都有“切割窗口或冻结窗口”的功能,使得一个文件或多个文件放在多个窗口里展示。vim也有这个功能。

下面总结一下Vim中的多窗口操作方法。…

+ 阅读更多

学习笔记:vim基础 —— 命令行备忘录

缘由:又一次被队友吐槽:咋连vim都不会用?!~( ╯□╰ )~。。。这就尴尬了,于是赶紧找一波资料,做一下笔记,方便下次查找和理解。

一. vim的三种模式

+ 阅读更多

【实战】封装一个audio音频组件

备注:因为懒得去重复些一堆的事件兼容性函数,先用jQuery库快速捣鼓一个audio音频组件。等以后有空了,再干掉jQuery库的依赖,用纯JavaScript重构一下。…

+ 阅读更多

【小技巧】解决iPhone中video视频的行内播放

如果我们希望在一个<div>内播放<video>视频,我们可能会这么写:

// CSS: 
video {width: 100%; height: auto;}

// HTML: 
<div style="width: 500px; height: 300px;">
    <video src="test.mp4"
+ 阅读更多

原生JS:无刷新表单的兼容性封装(IE6+)

在做form表单提交的时候,都会遇到一个非常尴尬的事情:就是浏览器默认的submit功能竟然会刷新当前页面,并跳转至action链接

这(“▔□▔) Σ<(=~д~=!)>…

+ 阅读更多

canvas转base64/jpeg时,透明区域变成黑色背景的解决方案

问题:png图片转jpeg时,透明区域被填充成黑色

在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。

代码如下:

<p>Canvas:</p>
<canvas id="canvas"
+ 阅读更多

JavaScript:获取url的querystring参数

一. 获取url的querystring参数

获取url的querystring参数的两种方法如下:

1.1 方法一:正则匹配

//获取url中的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)",
+ 阅读更多

input[file]标签的accept=”image/*”属性响应很慢的解决办法

input[file]标签的accept属性可用于指定上传文件的MIME类型

例如,想要实现默认上传图片文件的代码,代码可如下:

<input type="file" name="file" class="element" accept="image/*">
+ 阅读更多

canvas在高倍屏下变模糊的处理办法

一. 事起缘由

最近在用Canvas做社区网站的技能雷达图,如下图所示。

一倍屏下的显示情况:

image_1au479vu344r18fqg3b74a4859.png-7.2kB

二倍屏下的显示情况:

mohu.png-12.3kB

正当我很开心的准备发布出去时,用Mac Book…

+ 阅读更多

总结:http状态码

简单版:

  • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
+ 阅读更多

HTML5读取拖放的本地文件

在桌面上创建了自定义的放置目标后,可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似,从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件,此时它是一个File对象,与通过文件输入字段取得的File对象一样。…

+ 阅读更多

学习笔记:HTML5的拖放 API

在HTML5之前,如果要实现拖放效果,一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果,比较麻烦。而HTML5规范实现了原生拖放功能,使得元素拖放的实现更加方便和高效。…

+ 阅读更多

独创系列:雷达图生成组件radarChart.js

项目地址: https://github.com/dengzhirong/radarChart

Demo展示地址: https://dengzhirong.github.io/radarChart/radarChart.html

一. 使用方法:

1.1 引入组件资源

需要在页面中首先引入radarChart.js和radarChart.css:…

+ 阅读更多

我的Sublime Text3插件配置

缘由:每次重装电脑后,Sublime Text的插件又得重新谷歌一份来拼凑,着实很累,还不能保证完整还原。所以写此文档,记录我的Sublime Text3常用插件配置清单,和插件的使用方法。…

+ 阅读更多

总结:Sublime Text3 快捷键 (Windows版)

缘由:尽管谷歌一下就能搜出很多Sublime Text快捷键总结的文章,但是有些分类和快捷键的总结不够完善。自己的记忆不好,需常**用常查,故总结一份,方便日后查找。…

+ 阅读更多

SVG之分组与引用对象

SVG提供了一些元素,允许我们对元素进行分组,从而使得文档更加结构化、模块化。

<g>元素

<g>元素会将其所有子元素作为一个组合,通常组合还会有一个唯一的id作为名称。在程序中类似于“层”的概念,一个层就是一些相关对象构成的组合。每个组合还可以拥有自己的…

+ 阅读更多

使用JS控制伪元素的几种方法

一. 缘由:

本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。

然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)来获取:before伪元素。…

+ 阅读更多

:before和:after伪元素的常见用法总结

1. 利用content属性,为元素添加内容修饰:

1) 添加字符串:

使用引号包括一段字符串,将会向元素内容中添加字符串。栗子:

a:after { content: "after content"; }

2) 使用attr()方法,调用当前元素的属性的值:

+ 阅读更多