按文件修改日期整理和移动文件

想整理下手里的照片,懒得装管理软件了,只想简单的按日期整理。心想这种脚本应该是满大街的了,结果简单搜了下居然没搜到windows下顺手的,索性自己写了一个。

用法是,把下面代码保存成 .js 文件,放到要处理的文件夹下运行即可。可处理 jpg和nef文件。

注1:之所以没有使用文件创建日期,是因我一旦照片经过复制后,文件创建日期就变成了复制的时间了。但就算复制后,文件修改时间还是之前照片的拍摄时间,所以才用了文件最后修改时间。

注2:修改第3行可以变更待处理照片的地址。比如改成
f = fso.GetFolder("G:/DCIM/109D7000");
就可以直接处理存储卡中的照片了。

注3:修改第11行可变更目标地址。比如改成 s.move("d:/photo/" + path + "/") 就可以让照片都保存到 d:\photo 下了。

var fso, f, fc, s, d, path;
fso = new ActiveXObject(“Scripting.FileSystemObject”);
f = fso.GetFolder(“.”);
fc = new Enumerator(f.files);
for (; !fc.atEnd(); fc.moveNext()){
s = fc.item();
if(!/(.jpg|.nef)$/.test(s.name.toLowerCase()))continue;
d = new Date(s.dateLastModified);
path = d.getFullYear() + lz(d.getMonth() + 1) + lz(d.getDate());
if(!fso.FolderExists(path))fso.CreateFolder(path);
s.move(path + “/”)
}
function lz (num) {
return num > 9 ? “” + num : “0” + num;
}

自定义 HTML5 meter 元素样式

meter

HTML5种的meter元素非常有用,然而默认样式总是跟不上时代的步伐,所以琢磨了一下自定义样式的方式,仅适用于webkit内核的浏览器。Chrome 26 测试通过。分享给大家。颜色取自 Bootstrap Button


meter::-webkit-meter-bar {
background: #FFF;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}

测试地址 :http://shawphy.com/demo/meter.html

@simurai 写的更神奇的用法
@simurai 写的更神奇的用法

扩展阅读:
HTML5 progress元素的样式控制、兼容与实例

bitbucket上提交代码后用户名不显示链接问题

一个不痛不痒的问题,就是在bitbucket上提交代码到代码仓库,总是不会在我的用户名上显示出链接来,简单搜索一下,没找到中文的信息,搜英文的,倒是很快找到这个 issue : https://bitbucket.org/site/master/issue/3394/user-aliasing-commit-user-not-showing-up

原来很简单,他必须要在用户名里设置邮件才可以,
以 username <email@example.com> 这样的形式设置用户名才可以。
编辑~/.hgrc
找到其中用户名的字段,改成如下的形式即可

[ui]
username = Shawphy <email@example.com>

即可

Node.js 的简易web服务器

网上关于Node.js的介绍已经铺天盖地了,但我就没找到一个简单的web服务器给我做测试用。
实际上Node.js只需要一个exe文件和一个js文件就可以搭建服务器了,用来随便测试页面之类的用起来比nginx还方便。所以我就随手写了一个简单的。只可用于http服务,没有更多功能的js文件。

用起来很简单:
1,先去 http://nodejs.org/下载最新的Node.js可执行的exe文件。比如: http://nodejs.org/dist/latest/node.exe
2,把下面的代码保存为一个 server.js 文件,把它跟刚才下载到的 node.exe 文件放在一起。
3,把server.js文件拖到node.exe文件上就OK了

就这三步之后,整个目录下的文件都可以通过 http://127.0.0.1:8080/ 来访问了,测试用起来非常方便。

其他系统下也如法炮制,官网上也有下载mac和linux的版本。


var http = require(“http”),
url = require(“url”),
path = require(“path”),
fs = require(“fs”);

http.createServer(function (req, res) {
var pathname=__dirname+url.parse(req.url).pathname;
if (path.extname(pathname)==””) {
pathname+=”/”;
}
if (pathname.charAt(pathname.length-1)==”/”){
pathname+=”index.html”;
}

fs.exists(pathname,function(exists){
if(exists){
switch(path.extname(pathname)){
case “.html”:
res.writeHead(200, {“Content-Type”: “text/html”});
break;
case “.js”:
res.writeHead(200, {“Content-Type”: “text/javascript”});
break;
case “.css”:
res.writeHead(200, {“Content-Type”: “text/css”});
break;
case “.gif”:
res.writeHead(200, {“Content-Type”: “image/gif”});
break;
case “.jpg”:
res.writeHead(200, {“Content-Type”: “image/jpeg”});
break;
case “.png”:
res.writeHead(200, {“Content-Type”: “image/png”});
break;
default:
res.writeHead(200, {“Content-Type”: “application/octet-stream”});
}

fs.readFile(pathname,function (err,data){
res.end(data);
});
} else {
res.writeHead(404, {“Content-Type”: “text/html”});
res.end(“

404 Not Found

“);
}
});

}).listen(8080, “127.0.0.1”);

console.log(“Server running at http://127.0.0.1:8080/”);

Sublime Text 2 简介

最近试用了一款新的编辑器 Sublime Text 2,跨平台,据说他是仿TextMate的,没用过TextMate,不知道后者有多厉害。然而 Sublime Text 2 我一用就爱上他了。

sublimetext2

一开始是由于他的迷你地图模式而吸引我的注意力的,这个迷你地图可以概览整个文件。实现快速跳转。这个是个亮点,在其他编辑器中都没有见过此类功能。然而试用了之后我很快发现,迷你地图功能可能未必好用,但真正让我觉得舒服的是,他的zencoding支持的非常完美,直接有实时预览功能。

此外他的窗口分组、项目管理、扩展工具、代码折叠方面都非常不错。他还直接支持vim模式呢!
我之前在微博上推荐 Sublime Text 2 后,引来好多vimer的鄙视。说比vim差多了。我也无意参与这类争论。一个是现代兵器,一个是上古神器。自己用的爽就行了,何必与人争呢。

总之这个编辑器非常适合我这样喜欢vim的快捷键,又不喜欢vim复杂的配置的人。轻松上手功能强大。

目前他唯一的缺点是,无法打开gb2312之类的东亚编码,打开都会乱码。但是打开utf-8编码的文件毫无问题,可以正常显示和输入中文。

=========
update:
@seanliang写了一个插件用来编辑和保存gb2312和big5编码的文件,可以访问项目地址: https://github.com/seanliang/ConvertToUTF8
=========

如果你也心动了,可以点下面的地址来下载最新版。Sublime Text 2是收费软件,售价$59,但可以无限期试用,仅仅会偶尔在保存文件时弹出提示框而已,编码过程中不会出现任何干扰。

beta版:
http://www.sublimetext.com/2
大约1个月更新一次。

dev版:
http://www.sublimetext.com/dev
隔三差五更新,非常频繁,慎用……

另外建议依次拜读 Lucifr 的三篇博客
Sublime Text 2 入门及技巧
ZenCoding in Sublime Text 2
Sublime Text 2 实用快捷键[Mac OS X]

Lorem ipsum 是什么?顺便推荐一款假文生成器MoreText

今天在测试Coda还有VIM snipMate都看到了一段 Lorem ipsum 。好长的一串,看都看不懂的文字:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

一次遇到也就算了,一天之内在不同地方遇到两次,可见是有缘分了。简单一查,原来这是印刷设计排版上用于测试效果的一段无意义的文字,难怪我完全看不懂了。维基上是这样说的:

Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
Lorem ipsum从西元15世纪开始就被广泛地使用在西方的印刷、设计领域中,在电脑排版盛行之后,这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头,并且常被用于标题的测试中,所以一般称为Lorem ipsum,简称为Lipsum。

于是根据维基页面上,找到了两款中文的假文生成器。但遗憾的是都是繁体中文的,没有简体的。我只推荐这款MoreText,因为虽然他生成的是没有意义的假文,但每句话看起来都还像是一句句子,而不是随意的汉字堆砌的句子而已。因为他可以选择语料库!有赖和、徐志摩、Twitter和苹果日报!所以他的这个看起来效果还真不错呢!如果你在设计产品的时候需要大量文本填充的话,不妨试试吧!我随便贴一段:

鬧熱到了,借著拜年的名目,奉行正朔,實在可憐可恨,雖受過欺負,使人們沒有年歲的感覺,死鴨子的嘴吧,街上看鬧熱的人,波湧似的,和狺狺的狗吠,和他們一拚!街上看鬧熱的人,驟然受到光的刺激,現在不高興了,地方領導人。接連鬥過兩三晚,是抱著滿腹的憤氣,先先後後,在冷風中戰慄著,且新正閒著的時候,孩子們得到指示,看看又要到了。這回在奔走的人,走過了一段里程,勞動總說是神聖之事,怎地所說的一週會不同?一陣吶喊的聲浪,蹧躂人!所謂風家也者,他倆的來歷有些不明,凶惡的他們忍相虐待,甲總不平地罵。

看吧,每句话都像是一句话,但就是看不明白他们的意思。其实用Google Translate随便翻译一段英文,也能达到差不多的效果吧。

在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

HTML 5中的 canvas 元素是相当强大的,利用他的 getImageData 方法可以对载入的图像直接进行位图操作。但是直接对位图进行操作比较麻烦,如果利用卷积矩阵这个工具的话,可以通过几个简单的参数实现复杂的效果。

所谓的矩阵的卷积,就是如下图显示的那样,当计算红色框中的数值的时候,分别先提取周围绿框中8个数字,然后与施加的那个矩阵中对应位置相乘,然后把各个乘积加在一起,就得到了最终的值了。

卷积矩阵的运算

比如上图中的42是这么来的:

  (40*0)+(42*1)+(46*0)
+ (46*0)+(50*0)+(55*0)
+ (52*0)+(56*0)+(58*0)
= 42

这就是卷积了。然后,所谓的对图像的卷积操作,就是指对图像上的每一点的像素值,用这个矩阵进行运算,得到一个新的值。

比如下面这张图
卷积矩阵原图
利用下面这个矩阵
-6 -3 0
-3 -1 3
0 3 6
就立刻能够得到浮雕效果。

卷积矩阵浮雕效果

然后为了使用更方便,通常还会给最终值除以一个系数以及加上一个偏移。
比如下面这个矩阵。
0 0 0
0 1 0
0 0 0
这个矩阵(实际上这个矩阵本身不对图像进行任何操作),然后设置系数为-1,偏移为255的话,就能实现反色效果了,真是相当的神奇。
卷积矩阵反色效果

为了简化操作,我写了个简单的函数来对图像数据进行操作。
函数第一个参数是 canvas上的 imageData 对象
第二个参数是传入矩阵所对应的数组,如果是下面这样的矩阵
a b c
d e f
g h i
则传入第二个的参数应为 [a,b,c,d,e,f,g,h,i]
第三个参数是除数因子。
第四个参数就是偏移量。

// 计算卷积矩阵的函数
function ConvolutionMatrix(input, matrix, divisor, offset){
// 创建一个输出的 imageData 对象
var output = document.createElement(“canvas”)
.getContext(‘2d’).createImageData(input);

var w = input.width, h = input.height;
var iD = input.data, oD = output.data;
var m = matrix;

// 对除了边缘的点之外的内部点的 RGB 进行操作,透明度在最后都设为 255
for (var y = 1; y < h-1; y += 1) { for (var x = 1; x < w-1; x += 1) { for (var c = 0; c < 3; c += 1) { var i = (y*w + x)*4 + c; oD[i] = offset +(m[0]*iD[i-w*4-4] + m[1]*iD[i-w*4] + m[2]*iD[i-w*4+4] + m[3]*iD[i-4] + m[4]*iD[i] + m[5]*iD[i+4] + m[6]*iD[i+w*4-4] + m[7]*iD[i+w*4] + m[8]*iD[i+w*4+4]) / divisor; } oD[(y*w + x)*4 + 3] = 255; // 设置透明度 } } return output; }

我这里只写了个3阶的卷积矩阵。如果觉得不够high还可以自己实现一个5阶的。
gimp自带卷积矩阵的滤镜,photoshop里我没找到。
关于gimp的卷积矩阵滤镜可以参考: http://docs.gimp.org/en/plug-in-convmatrix.html

我写的更多效果直接查看: http://shawphy.github.com/share/2011/matrix.html

关于 canvas 的资料可以查看 https://developer.mozilla.org/cn/Canvas_tutorial