HTML5守望者/暨开发者日——第二季攻城师嘉年华,共享·共赢·共行动

enter image description here

活动主办:HTML5梦工场
活动官网:2013.html5dw.com
协办方:W3Ctech Nodejs社区 w3cplus
独家战略合作社区:InfoQ
官方战略合作伙伴:Google

Web应用程序和移动互联网是大势所趋,不管HTML5是遥不可及的幻想,还是眼下移动互联网的救命稻草?整个行业不都需要我们共同坚守,才有机会迎接和拥抱属于我们自己的未来吗?!

让我们一起坚守,共谱新篇章!

图像混合(溶图)算法的javascript实现

变暗

photoshop中的图层混合功能大家一定很熟悉。此功能可以根据指定模式,将2个图层进行混合,实现不同色彩风格的图像效果,也就是我们通常所说的溶图。 实现图像混合的原理其实很简单,就是将两张图像的重叠,分别取相同位置的两个像素点上的RGB值,通过特定的公式计算出新的RGB值,这样,不公的公式,将产生不同的色彩效果。利用canvas提供的api,我们可以在支持canvas的浏览器上实现图像混合,例如,以下代码将实现上图“变暗”的效果:

//传入2个canvas
function blend (cv1, cv2) {
    var c2d1 = cv1.getContext('2d');
    var c2d2 = cv2.getContext('2d');
    var imgData1 = c2d1.getImageData(0, 0, cv1.width, cv1.height);
    var data1 = imgData1.data;
    var data2 = c2d2.getImageData(0, 0, cv2.width, cv2.height).data;

    //计算函数,传入2个RGB对象进行计算
    var darken = function (a, b) {
        var r = {};
        for (var i in a) {
            r[i] = a[i] < b[i] ? a[i] : b[i]; //变暗效果公式
        }
        return r;
    }

    //遍历像素点
    for (var i = 0, len = data1.length; i < len; i += 4) {

        //计算新的RGB
        var newRGB = darken(
            {r: data1[i], g: data1[i + 1], b: data1[i + 2]},
            {r: data2[i], g: data2[i + 1], b: data2[i + 2]}
        );

        //覆盖掉data1
        data1[i] = newRGB.r;
        data1[i + 1] = newRGB.g;
        data1[i + 2] = newRGB.b;
    }

    //将新的像素数据写入canvas
    c2d1.putImageData(imgData1, 0, 0);

    //返回生成的图像url
    return cv1.toDataURL('image/png');
}

假设a[i]代表第一个像素点的RGB值中的一个值,相对应于b[i](代表另一个像素点的RGB值中的一个值),变暗效果的公式是a[i] < b[i] ? a[i] : b[i],这个公式很简单,就是比较2个值得大小。

Read More

你是阿蒙森还是斯科特?

1911年10 月,两支探险队作好了出发前的最后准备,他们都希望自己能够成为现代历史上最先抵达南极的人。结果是一支队伍夺得胜利,并最终安全返回。而另一支队伍却遭受了一场毁灭性的失败,因为到达南极时,他们发现他们的对手早在34 天前就已经把旗帜插在了那里,而接下来,他们与死神展开了一场生死搏斗,结果以失败告终,凛冽的严冬最终将他们吞噬——这支南极探险队中的5 名成员全部命丧他乡。据部分成员最后写的日志以及他们给家中至亲的留言,这次探险让他们遭受了难以置信的磨难和无法忍受的冻伤,直至全部被冻死。

这两支探险队的实力可谓旗鼓相当。两名领队分别是39 岁的罗尔德· 阿蒙森和43 岁的罗伯特· 法尔肯· 斯科特。他们年龄相仿且有着相似的经验,但最终的结果却是前者获胜,后者失败。阿蒙森曾带队成功穿越西北航道,并参加过南极洲首次越冬探险;斯科特曾在1902 年率队南极探险,并最终抵达南纬82 度。阿蒙森和斯科特率队出征南极的时间相差无几——前后不过几天,他们都将面临超过1 400 英里 的往返行程(大致相当于从纽约市到芝加哥的往返路程),然后进入一个不确定的、极端恶劣的环境中,而那里的温度即便是在夏天也经常会达到零下20 摄氏度,且经常伴随着强气流。需要注意的是,那是1911 年,他们没有与探险营地保持联系的现代化通信工具,没有无线电、手机,也没有卫星电话,而一旦在南极被困,那么要想拯救他们是根本不可能的事情。一名领队率队获胜并安全返回,一名领队率队败北并付出了生命的代价。

是什么造成了这两人之间的区别?这是两名领导者,他们都致力于在极端环境中取得卓越成就。为什么一个人会在如此恶劣的环境中取得非凡成功,而另一个人却连命也没有保住?这是一个很有吸引力的问题,也是一个非常鲜明的类比。

Read More

基于canvas将视频转化成字符动画

video2txt
在上篇文章/img2txt-canvas,主要介绍了如何将一张图片转成字符画的办法,经过同事吕哥文韬的提醒和修改。在此基础上,可以实现视频转字符动画的效果哦。原理都是通过getContext(‘2d’)对象的drawImage方法引入视频或图像到canvas中,再进行转换,转换方法上篇已经介绍,不通的是视频的话要通过回调函数,不停回调转换函数,实现动画功能:

demo:
/img2txt/video2txt.html
http://www.jsbug.com/lab/samples/ascii-video/

vim备忘

虽然平时写代码的时候都是用Intellij IDEA,但也偶尔通过ssh+vim远程修改文件,特此记录,以备时需。

标签命令

:tabe fn     在一个新的标签页中编辑文件fn
gt           切换到下一个标签页
gT           切换到上一个标签页
:tabr        切换到第一个标签页
:tabl        切换到最后一个标签页
:tabm [N]    把当前tab移动到第N个tab之后

窗口命令

ctrl+w s     水平分割窗口
ctrl+w w     切换窗口
ctrl+w q     退出当前窗口(由于同时有多个文件,此命令不会影响其他窗口)
ctrl+w v     垂直分割窗口
:sp fn       分割窗口,并将fn加载到新的窗口中

Read More

在Intellij IDEA中使用Ant

Ant最初是为Java量身定做的工程构建工具,但因为其简单的XML语法和内置的任务,作为前端领域的构建工具也不失为一个明智的选择。关于Ant与前端,明河的教程有更详细的介绍:http://book.36ria.com/ant/index.html,对于Ant的常规使用方法,新手请直接学习明河的教程。下面来说说Intellij IDEA,它内置了Ant,如果你不喜欢命令行,那么在Intellij IDEA中使用Ant是非常方便的,本文主要介绍windows下在Intellij IDEA中使用Ant进行前端构建的方法,如果你使用其他操作系统,也可以参考。

1、首先,确保你的系统已经安装了Java运行环境,如果你的机子已经安装jdk,那么请跳过这一步,如果没有,请移步至http://willerce.com/post/jdk。参照此教程安装好jdk。

2、配置project structure。点击File>Project Structure(快捷键ctrl+alt+shift+s),在Project SDK这一项中,如果显示的是“No SDK”,说明还木有设置运行环境,我们点击New,选择你的jdk安装目录,比如我的是C:\Program Files (x86)\Java\jdk1.6.0_10。设置好以后,会显示jdk的版本信息,如下图。

Intellij IDEA Project Structure

Read More

Days with my father.

半夜里,在拜读阮一峰老师的网志的时候,看到一个美国摄影师的作品。母亲去世后,他就拍他的父亲,还写下自己的感想。

我被这组作品深深地感动了。儿子对父亲的爱与不舍、以及父亲在年老之际的孤独,都在其中得到了细腻的体现,非常感人,有时候,我们需要安静下来,给生命一个思考的时间。

=============================================

与父亲在一起的日子
作者:Phillip Toledano
译者:阮一峰
原文网址:http://www.dayswithmyfather.com

1.

这是一份日记,记录我的父亲。

Read More

jQuery.viewport插件实现不同场景的数据异步加载

viewport是我同事@吕哥写的实现不同场景的图片异步加载的jq插件。想象一下,当服务器返回列表的数据项(或图片)非常多,而其数据项不用在页面回应时全部加载给浏览器,可以按需加载。那么通过将列表 viewport化,你就可以设置并知道知道哪些数据项被显示出来的时机,完成数据异步加载的操作。

viewport非常适合应用于海量图片的查看器(神马轮播图,相册之类的),或者瀑布流的布局当中,此插件可以被绑定到 window 对象或任意以 block 方式显示的对象上,如:$(window).viewport() 或 $(“#container”).viewport()。

两个demo:
http://www.jsbug.com/lab/samples/viewport/index.html#sample1
http://www.jsbug.com/tools/wall/

参数说明

  1. id:可选,字符串类型。每个容器都可以执行 viewport 方法多次,也就是说,任何容器都可以被视口化多次,且同一容器的各视口间互不影响。
  1. targets:可选,在“视口”中查找的目标元素。
  1. includeHiddens:可选,当提供 targets 时才有效。用来控制是否查找视口内的隐藏目标元素,默认为 true。
  1. threshold:可选,当提供 targets 时才有效。通过此值你可以增大或减小视口检测的阈值范围。
  1. delay:可选,此参数用来控制 onViewChange 的触发频率,默认为 500 毫秒。
  1. onViewChange:可选,用户定义的回调事件,当“视口”被滚动或缩放后触发。
  1. thresholdBorderReaching:可选,此参数主要用来影响 onViewChange 回调中的 detail 参数,默认为 0。

更详细的用法以及demo详见:http://www.jsbug.com/lab/samples/viewport/index.html