莫卓颖 于 1年前发表 5755 3 2
相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度出发介绍如何通过canvas来进行简单的图像识别。 CANVAS是什么 canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像 CANVAS图片处理运用 对于canvas来说,主要是两个方法对图片处理比较重要,一个是通过html5 canvas的 getImageData 方法获取图片的像素信息,可以很方便的通过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息,可以修改像素信息后通过另外一个重要的方法putImageData导出处理后的图片。 1、获取canvas调用var c = document.createElement('canvas'); context = c.getContext('2d'); 2、获取导入图像信息var hiddenImage = new Image(); hiddenImage.src=图片地址
1年前
javascript技术
coverguo 于 1年前发表 5699 4 1
以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。 * 页面可见性API--page Visbility * 全屏API --full Screen * 获取MediaAPI--getUserMedia * 电池API --battery * 资源预加载API--link Prefetching PAGE VISIBILITY 页面可见性API 该API可以用来检测页面对于用户的 可见性 ,即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。) PAGE VISIBILITY的介绍 【document.hidden】 该值表示page是否是可见的,值为boolean值 【document.visibilityState】 这个visibilitystate 可有三个值得可能: 【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口
1年前
HTML&HTML5
黎腾 ,如果sea能带走我的哀愁 于 2年前发表 5615 8 3
有人说,前端的界限就在浏览器那儿。 无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去。 这就像二次元各种炫酷的毁灭世界,都不会导致三次元的世界末日。 然而,作为一个前端,我发现是有方式打开次元大门的… 这个实验脑洞较大,动机无聊,但某种意义上反映了一些 安全问题 。 想象一下,有天你在家里上网,吃着火锅还唱着歌, 点开一个链接,电脑突然就蓝屏了 !想想还真有点小激动。 起因 故事得从localStorage说起。 html5的本地存储,相信大家都不陌生。将数据以二进制文件形式存储到本地,在当前应用得非常广泛。 windows下的chrome,localStorage存储于 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Local Storage 文件夹中。但如果任由网页无限写文件,对用户硬盘的伤害可想而知,因而浏览器对其做了大小限制。 对于一个域名+端口,PC侧的上限是5M-10M之间,移动侧是则不大于2.5M。 那么问题就变成: 这样的限制足够保护用户硬盘了吗 ? 关键
2年前
Web安全
coolriver 于 1年前发表 5584 2 1
1. SERVICE WORKER的身份 Service的意思是服务,Worker的意思是工人,那么Service Worker的意思就是服务员。这个员工是2014年6月HTML5新招的实习生,目前在试用中。在此之前,已经有一位老员工,它叫Web Worker。那么问题来了,Boss是谁?Boss就是浏览器。准确来说,每个页面的javascript运行主线程都是一个Boss。 这里先谈一下大的背景。Boss很厉害,在页面上指点江山,呼风唤雨。但他有个局限:同一时刻只做一件事( 单线程 )。当一些很耗时的杂事让Boss去处理时,在处理的过程中他就无暇顾及其它重要的事了。在用户看来,页面没人管了,Boss不干事了!这时Boss就很郁闷。为了保证Boss能处理更重要的事情,董事会( W3C )终于招聘了一个新员工:Web worker。这下,Boss终于可以从耗时的杂事中解放出来了,他只需要把Web
1年前
HTML&HTML5
结一 于 9个月前发表 5518 0 2
SHERAL [HTTPS://GITHUB.COM/IMWEB/SHERAL] 是什么 简单来说, sheral [https://github.com/imweb/sheral] 是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的组件。但是sheral决不只限于UI库,它还拥有了30+ sass 的基础 mixin 或 % 的封装及其他基础能力,有了这些基础能力,不仅快捷便利,更是拥有了更多扩展可能。下面是sheral的三张UI截图: [http://7tszky.com1.z0.glb.clouddn.com/Fg0TocYTmOVFQYuPe1sZ5F-TG7VL][http://7tszky.com1.z0.glb.clouddn.com/Fkr1IoX-fIQrwTdwDLeh8JWJdVRB][http://7tszky.com1.z0.glb.clouddn.com/FknbTNLAw6iEBt1SW53uV9LPY8Am]
9个月前
移动开发
coolriver 于 2年前发表 5513 3 1
本文为初步阅读 ECMAScript6入门 [http://es6.ruanyifeng.com/] 后的一些记录与感想。 简介 ES6的设计目标,是使得JavaScript语言可以用来编写大型复杂的应用程序,成为企业级开发语言。ES6将于2015年6月正式发布。 现在最新版本的Nodejs上可以通过`--harmony`参数开启ES6的部分支持。如果旧的Nodejs版本不支持或者想体验更多的ES6 特性 可以 使用Google的[traceur](https://github.com/google/traceur-compiler)工具。traceur可以在前端编译ES6代码,也可以 在node上 编译或执行ES6代码。 * traceur在node上安装: npm install -g traceur * 直接执行ES6文件: traceur test.es6.js * 编译ES6文件到ES5文件: traceur --script test.es6.js --out test.es5.js ES6在很方面都对ES5有增强,下面将从不同方面对ES6在ES5上的加强进行介绍。
2年前
浏览器
yangchunwen 于 1年前发表 5276 0 2
要做什么 假设你有一个博客,有一台网站服务器(或者很多台作负载均衡的服务器),当你的博客要升级时,你可能要在你自己的电脑上写好代码(可能包括本地调试好),然后提交到git(或svn),然后在每个服务器中checkout一份代码并重启服务器应用…… 这里要介绍的是一种直接在本地提交代码,即可自动完成服务器部署的方法。 怎么做 假设你有网站主机(后面统称线上机): user:user host:1.2.3.4password:passwd 并且确保你的本地开发机器(后面统称开发机)与线上机均已安装好 Git [http://git-scm.com/downloads] (不是Github) 1. 线上机增加三个文件夹: mkdir ~/git-directory.git mkdir ~/deploy-directory-1mkdir ~/deploy-directory-2 其中git-directory.git作为代码仓库,即开发机的代码统一提交到这里存放. deploy-directory-1和deploy-directory-2是开发机上的部署目录,比如测试目录和正式线上内容目录
1年前
工具建设
yangchunwen 于 1年前发表 5064 2 0
React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的 state [https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#how-state-works] / props [https://github.com/uberVU/react-guide/blob/master/props-vs-state.md] / 生存周期 [https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods] 等基本概念,建议先学习相关文档 客户端REACT
1年前
nodeJS全栈
江源 ,非常让人头疼…… 于 2年前发表 5041 3 0
上手 mac 之前,我调查了好久, mac 比起 windows 到底有什么优势?我想说的是,调查并没有什么软用,只有上手一台体验才有意义。 这会是一个系列,作为我折腾 mac 的知识备忘,同时也给想买却犹豫不决的同学吃一个定心丸,买,没错。 mac 相比 windows 有一个大优势,那就是美。在开发者眼中,这体现在开发工具的主题搭配上,废话不多说,上图。 * Terminal[http://7tszky.com1.z0.glb.clouddn.com/Fsx0rHmQpDQ-qcyRTtMiunmx7SDV] * iTerm2 和 terminal 一样。[http://7tszky.com1.z0.glb.clouddn.com/Fjtb-cLILNUujjIMwN3QxKzAPUNh] * idea > webstorm[http://7tszky.com1.z0.glb.clouddn.com/Fnvs_Mk0egVQQhi9vpP1K1OiLTMw]
2年前
工具建设
devinran ,唯封建与迷信难养也 于 1年前发表 4983 5 3
在最初的六天,我创造了天与地 webGL 是基于 OpenGL 的Web3D图形规范,是一套JavaScript的API。简单来说,可以把它看成是3D版的 canvas 。恩,你会这样引入canvas对吧: canvas = document.getElementById("xxx"); ctx = canvas.getContext("2d"); SO,3D版本的就酱: canvas = document.getElementById("xxx"); gl = canvas.getContext("experimental-webgl"); 是的,webGL直接使用canvas元素,只是引入一个不同的上下文“ experimental-webgl ”,方便吧。 这里的上下文实际上应该是.getContext("webgl"),但由于现在webgl标准尚未完善,所以多数浏览器采用一个“试验性”的上下文 让我们先啰嗦一些玩意儿 3D坐标系 [http://7tszky.com1.z0.glb.clouddn.com/FsJGJz-KF4wl30j2y8-tet8cSbRx]
1年前
javascript技术
黎清龙 于 10个月前发表 4952 3 2
深入探讨前端UI框架 1 前言 先说说这篇文章的由来 最近看riot的源码,发现它很像angular的dirty check,每个component ( tag )都保存一个expressions数组,更新时,遍历expressions数组,重新求值,对比旧值,如果有变更则更新DOM。 这不就是dirty check吗?为什么riot还声称它实现了virtual DOM? 疑惑之下,就去复盘了一下各大前端框架,把一些收获分享给大家 本文内容很多,实在不知道怎么取标题,最终取了一个泛泛的标题,请读者不要纠结 本文将会涉及的内容有: 1. MV*前端框架,UI框架,UI更新相关介绍 2. UI更新机制原理及其代表框架介绍 3. 深入探讨各个UI更新机制(为什么virtual DOM会快) 4. 浏览器渲染机制 5. riot的真相(virtual DOM的本质,给我自己一个交代!) 裹脚布较长,读者慎入! 2 理解前端框架 2.1 前端的工作 [http://7tszky.com1.z0.glb.clouddn.com/FjQRozSFfOJTE8y3Ew9l3yMZoEY8]
10个月前
前端库
结一 于 2年前发表 4848 8 3
在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的一个宽或高,那么另一个值就会按照图片真实比例缩放,如 <img class="demo1" src="http://placehold.it/200x150" alt="" <img class="demo2" src="http://placehold.it/400x300" alt="" .demo1{ width: 100px;/* 只设置宽度,根据等比例缩放得到高度为75px */ } .demo2{ height: 150px; /* 只设置高度,根据等比例缩放得到宽度为200px */ } 图片因为本身存在宽高比,所以设置一个值,另一个值自动也就根据真实的比例对应上,但是如果是视频呢? 一般在响应式中,我们会要求视频的宽高比为16:9或4:3,这么一来就比较头大了。当用户改变浏览器宽度的时候(改变高度不考虑),视频的宽度变了,那么高度也得根据我们要求的16:9或4:3改变。 这里老外提供了一个很巧的方案: Creating Intrinsic Ratios for Video
2年前
CSS/重构