网络进行时

使用gravity重新定义坐标后，可以很容易让子元素与父元素的对齐方式达到想要的效果，让一切变得非常简单。比如把一张小图片叠加到背景图片的正中位置，按照默认的坐标系统，那必须要先知道背景图片和小图片的宽度以及高度，然后才能计算出起始点的坐标，再通过-geometry来设置坐标点。如果使用gravity，把其设置center，即把中心作为坐标的原点，那么根本不需要计算起始坐标点，ImageMagicK会自动把小图片放置在背景的正中央位置，-geometry默认是+0+0。gravity不仅影响父元素的坐标系统，而且子元素的重心点（或者叫参照点）也随之改变。举例来说，当gravity值为southeast，父元素的坐标原点变为右下角了，x轴方向是从右到左，y轴方向从下到上；子元素重心点也是右下角，所以geometry设置的坐标点就是子元素的右下角相对父元素右下角的位置。gravity会影响通过geometry、annotate、region等来定义坐标点。

gravity可用值有九个,分别是:

• NorthWest：左上角为坐标原点，x轴从左到右，y轴从上到下，也是默认值。

convert -size 400x120 xc:gray -size 100x50 xc:blue -gravity northwest -geometry +10+10 -composite -size 100x50 xc:yellow -gravity northwest -geometry +110+60 -composite -gravity northwest -fill red -pointsize 24 -draw "text 110,60 'hello netingcn.com!'" nw.png

说明：创建一个灰色的400×120的背景,分别把两个100×50的小图片放置在背景上的(10,10)和(110,60)的位置,同时通过draw在图片输入一段文本，小图片和文本的参照点是左上角，效果如下图。

• North：上部中间位置为坐标原点，x轴从左到右，y轴从上到下。

convert -size 400x120 xc:gray -size 100x50 xc:blue -gravity north -geometry +10+10 -composite -size 100x50 xc:yellow -gravity north -geometry +110+60 -composite -fill red -pointsize 24 -gravity north -draw "text 0,60 'hello netingcn.com!'" n.png

说明：小图片和文字的参照点是上部中间位置，效果如下图。

• NorthEast：右上角位置为坐标原点，x轴从右到左，y轴从上到下。 阅读全文…

convert通过draw可以在已有的图片上绘制一些文字、线条、形状等。可能会用text、line、rectangle、roundRectangle、circle、ellipse等，下面逐一来说明。

• text，把一段文本绘制到已有图片上。基本命令格式：convert 图片 -draw “text x坐标,y坐标 ‘文本信息’” ?结果图片，另外还可有一些参数是可以设置的，比如字体，字体大小，字体颜色已经重新定义坐标原点。

convert -size 512x50 xc:gray -gravity southeast -fill red -pointsize 24  -draw "text 20,5 'hello netingcn.com!'"  txt.png

上述命令中使用gravity来重新定义坐标，关于gravity的更多信息，请参考ImageMagicK之gravity参数详解，-fill 设置文字的颜色，颜色能够使用类似#ff00ff的方式，但是需要用双引号引起来，-pointsize 24设置文字的大小， -draw 后面引号中第一个单词是text，表明是在图片上绘制一个设置的文本，20是x坐标，5则是y坐标，hello netingcn.com!是绘制到图片上的文本信息，如果文本信息中含有空格，需要用单引号引起来，没有空格也可以用单引号，所以建议总是使用单引号。不过遗憾的是不能把中文通过这种方式绘制到图片，要把中文加在图片是，需要另外的方法。结果如下图：

• line，在图片上绘制一条直线，基本命令格式：convert 图片 -draw “line 起点x坐标,起点y坐标 ?终点x坐标,终点y坐标” ?结果图片，可以使用的参数有-stroke 来指定线条的颜色，-strokewidth 指定线的宽度。

convert -size 512x50 xc:gray -stroke white -strokewidth 4 -draw "line 10,25 500,25" line.png

• rectangle、roundRectangle，两者功能都是在图片上绘制一个矩形，前者是直角，后者可以绘制圆角。

convert -size 150x150 xc:gray -stroke red -strokewidth 2 -fill white -draw "Rectangle 10,10 140,140" rect-1.png

convert -size 150x150 xc:gray -stroke red -strokewidth 2 -fill white -draw "roundRectangle 10,10 140,140 8,8" rect-2.png

说明：参数-stroke 来指定边框的颜色，-strokewidth 指边框的宽度，-fill　矩形的填充颜色，可以用none设置为不填充任何颜色，如果没有-fill参数，默认填充为黑色，Rectangle 与roundRectangle 后第一组参数是确定矩形左上角的坐标，第二组是确定右下角的坐标，roundRectangle的第三组参数是确定圆角的幅度，如果是0,0话，就是直角，所以可以直接用roundRectangle 来代替Rectangle 。示例图片如下：

• circle、ellipse，分别绘制圆和椭圆。其实也可以用椭圆来完成圆的绘制。下面用例子说明：

convert -size 140x140 xc:gray -stroke red -strokewidth 2 -fill white -draw "circle 70,70 5,70" circle.png

convert -size 140x140 xc:gray -stroke red -strokewidth 2 -fill white -draw "ellipse 70,70 65,65 0,360" ellipse-1.png

convert -size 140x140 xc:gray -stroke red -strokewidth 2 -fill white -draw "ellipse 70,70 60,30 0,360" ellipse-2.png

convert -size 140x140 xc:gray -stroke red -strokewidth 2 -fill white -draw "ellipse 70,70 60,30 90,270" ellipse-3.png

说明：同矩形一样，参数-stroke 来指定边框的颜色，-strokewidth 指边框的宽度，-fill　矩形的填充颜色，可以用none设置为不填充任何颜色。circle和ellipse中的第一组参数都是代表圆心的坐标，但是他们第二组参数含义不同，circle的第二组参数是圆的任何一边缘坐标，所以圆的半径就是两组坐标的距离，ellipse的第二组参数中的第一个是横向的最大长度、第二个是纵向最大高度，第三组参数是绘制的区间，区间是0~360度，0度是原点开始到从左到右，度数是顺时针方向。有了这个参数就可以很容易绘制半圆，1/4圆，乃至圆的任何一部分，所以ellipse比circle的功能更加强大。上述的第二条命令完成和第一条命令同样的事。示例图片如下：

gif动画由一系列图片按照一定的时间间隔来播放的，每张单独的图片作为gif动画的一帧。使用ImageMagicK的convert命令很容易获取gif动画中的每桢图片，例如命令?convert exam.gif p.png ,?就会把生产 p-0.png,p-1.png 等一系列图片。gif动画的原理就是把一些列动画合成在一起。所以通过convert很容易做到。例如命令　convert *.jpg ?dest.gif ,?是把当前目录下的所有 jpg格式的图片生成一个名为dest.gif的文件，有两个参数比较重要，分别是-delay和-loop，其中-delay是控制每桢的切换时间，-loop是控制gif动画的播放次数,默认是0，0表示无尽的循环播放。

如果想控制每桢的间隔时间不一致，可以使用类似?convert -delay 50 0.jpg 1.jpg -delay 100 2.jpg 3.jpg 4.jpg dest.gif 这样的操作来完成,甚至可以先制作两个临时的gif,然后把临时的gif合成自己想要的,例如

convert -delay 50 0.jpg 1.jpg t1.gif
convert -delay 100 2.jpg 3.jpg 4.jpg t2.gif
convert t1.gif t2.gif dest.gif

通过上述的素材加一个logo图片制作一个如下的gif动画

?

convert -size 84x200 xc:"#f396eb" bg.gifconvert bg.gif logo.gif -geometry +2+2 -composite bg.gif

convert bg.gif 0.jpg -geometry +2+55 -composite 0.png
convert bg.gif 1.jpg -geometry +2+55 -composite 1.png
convert bg.gif 2.jpg -geometry +2+55 -composite 2.png
convert bg.gif 3.jpg -geometry +2+55 -composite 3.png
convert bg.gif 4.jpg -geometry +2+55 -composite 4.png

convert -delay 50 *.png dest1.gif

说明：思路是先创建一张空白背景图片，然后把logo合成在背景上，再依次把素材的每张图片和背景生成一张新图片作为gif动画的一帧，最后使用convert把每桢图片合成一张gif 。这样的缺点是生成的gif图片尺寸会比较大，下面的方法能改进在尺寸上的缺点，但是在gif的循环上又有点不足。

convert -delay 50 *.jpg t.gif
convert -size 84x200 xc:"#f396eb" bg.gif
convert bg.gif logo.gif -geometry +2+2 -composite bg.gif
convert -loop 0 bg.gif -page +2+55 t.gif dest2.gif

ImageMagicK能方便的把多张小图片合成一张大图片。合成的方式大致有三种,

1. 使用convert命令加 +append或-append参数
2. 使用convert命令加 -composite参数
3. 直接使用composite命令来完成

其中方式１处理图片只能左右或上下来拼接图片，方式２最为灵活，可以一次性把多张图片合成在一起，方式３处理多张图片时需要一张一张来处理。下面的例子是把google地图中的4个256×256块合成一张512×512的大图，原始图片如下：

使用方式1

convert +append u0.png u1.png u.png
convert +append d0.png d1.png d.png
convert -append u.png d.png dest.png

说明：其中 +append 横向把多张图片拼接在一起，可以多于2张，图片按上边缘对齐,最后一个参数是目标图片,而-append是纵向拼接图片,图片按左边缘对齐。

使用方式2

convert -size 512x512 -strip -colors 8 -depth 8 xc:none u0.png -geometry +0+0 -composite u1.png -geometry +256+0 -composite d0.png -geometry +0+256 -composite d1.png -geometry +256+256 -composite dest4.png

说明：convert -size 512×512 xc:none 创建一张空白图片,然后把小图片合成到其上面。合成的命令大致为：convert 背景图片 图片 定义坐标原点 图片的位置 -composite 目标图片，其中“图片 定义坐标原点 图片的位置 -composite”　可以重复，从而把多张图片一次性合成到背景图片上。使用　-gravity　定义坐标原点，默认是左上角，可以用east,north,northwest等来重新定义原点，-geometry相对于原点的位置

使用方式3

convert -size 512x512 -strip -colors 8 -depth 8 xc:none dest1.png
composite -geometry +0+0 u0.png dest1.png dest1.png
composite -geometry +256+0 u1.png dest1.png dest1.png
composite -geometry +0+256 d0.png dest1.png dest1.png
composite -geometry +256+256 d1.png dest1.png dest1.png

说明： composite 定义坐标原点 图片的位置 图片 背景图片 目标图片

影响图片大小（占用空间）主要取决于图片的profile和quality。

• quality：图片的品质，品质越高，占用的空间越大。适当降低品质能很大程度的减少图片的尺寸。一般来说，从品质100降到85，基本上肉眼很难区别其差别，但尺寸上减少很大。imagemagick通过通过 -quality 来设置。
• profile：记录图片一些描述信息。例如相机信息（光圈，相机型号）、photoshop元数据，颜色表等信息。它占用的空间可以从几KB到几百KB，甚至可能更大。ImageMagicK可以通过两种方式来去掉这些信息。+profile “*” 　或　-strip

下述图片中第一张原始图片为56KB，第二张图片执行了　convert +profile “*” -strip src.jpg src-profile.jpg　后变成了26.3KB, 第三张设置图片品质为85，convert -quality 85 src.jpg src-quality85.jpg，图片大小变成了19.5KB，第四张是同时使用去掉profile和设置品质为85, convert -quality 85 -strip src.jpg src-p-q85.jpg，图片只有18.7KB。经过一个简单的命令处理，就可以把原始图片体积减小到原来的的三分之一。一般来说jpg格式的图片有比较大的操作空间，而png、gif有时候处理了反而变大。所以具体问题需要具体分析。

原始图片

去掉profile

quality85

最终图片

在linux下可以很方便把某个目录下的所有jpg文件来一次瘦身运动，例如命令　find /tmp/images -iname “*.jpg” -exec convert -strip +profile “*” -quality 85 {} {} \;　可以把/tmp/images目录下所有jpg图片进行压缩。

awk 默认是用空格作为分隔符，后面的大括号需要用单引号引起来，不能用双引号，否则就得不到想要的结果,如果要指定分隔符，使用　-F 分隔符。例如从文本-rw-r–r– 1 root root 165 Aug 25 12:51 runAll.sh中获取165,可以使用命令：echo “-rw-r–r– 1 root root 165 Aug 25 12:51 runAll.sh” | awk -F” ” ‘{print $5}’，其中 awk -F” ” ‘可以省略.。

sed -e  patt 中的patt需要用引号引起来，单引号双引号都行。sed能很方便的将文本中指定字符串替换成另外的字符串，配合其他的命令可以一次性把一个目录下所有文件进行替换操作。例如把文本 “start zhou yang end”替换成“start yang zhou  end”, 即把yang前面的一个单词和与yang换位置，可以使用命令：

echo "start zhou yang end" | sed -e 's/ \(.*\) \(yang\)/ \2 \1/g'

。命令：

grep "114.87.189.33"  * -R | awk -F: '{print $1}' |sort |uniq | xargs sed -i "s/114.87.189.33/214.187.189.33/g"

则会把当前目录下所有文件的114.87.189.33替换成214.187.189.33。注意sed的patt里很多符号需要转义的，比喻()等，g表示替换全部。

关于sed，awk的用户可以参看 linux下监控网卡流量的shell脚本 中的用法。

另外在shell中把命令的输出结果存放在一个变量可以用以下两种方式

1，$var = `cmd`

2,  $var = $(cmd)

linux下可以很容易获取网卡信息，使用命令 cat /proc/net/dev 即可。该命令详细列出当前网卡流入流出的字节总数，要监控网络的流量，只需要按一定的时间间隔去读取流量信息，然后做一下简单的四则运算即可。附完整的脚本如下：

#!/bin/bash

usage() {
        echo "Useage : $0"
        echo "eg. sh $0 eth0 2"
        exit 1
}

if [ $# -lt 2 ]
then
        usage
fi

eth=$1
timer=$2

in_old=$(cat /proc/net/dev | grep $eth | sed -e "s/\(.*\)\:\(.*\)/\2/g" | awk '{print $1 }')
out_old=$(cat /proc/net/dev | grep $eth | sed -e "s/\(.*\)\:\(.*\)/\2/g" | awk '{print $9 }')

while true
do
        sleep ${timer}
        in=$(cat /proc/net/dev | grep $eth | sed -e "s/\(.*\)\:\(.*\)/\2/g" | awk '{print $1 }')
        out=$(cat /proc/net/dev | grep $eth | sed -e "s/\(.*\)\:\(.*\)/\2/g" | awk '{print $9 }')
        dif_in=$(((in-in_old)/timer))
        dif_in=$((dif_in/1024))
        dif_out=$(((out-out_old)/timer))
        dif_out=$((dif_out/1024))
        ct=$(date +"%F %H:%M:%S")
        echo "${ct} -- IN: ${dif_in} KByte/s     OUT: ${dif_out} KByte/s"
        in_old=${in}
        out_old=${out}
done

exit 0

sort，顾名思义就是用来排序的，不关可以对已存在的文件中的行进行排序，也能够对管道输出进行排序。该命令常用的参数有如下一些：

-f		将小写字母与大写字母同等对待,即忽略大小写
-n		按数字（算术值）大小排序
-r		降序的形式来排序，默认是升序
-o		排序的结果输出到指定文件，如果输出文件是输入文件之一，
		sort先将该文件的内容写入一个临时文件，然后再排序和写输出结果。
-i		比较中忽略任何非显示字符
-t"sepchar"	指定sepchar为单一的字段分隔符,把行分割成多个列，
		可以对指定列一个或多个列来作为排序字段
+pos1 -pos2	pos为列的index，指定一个或几个字段作为排序关键字，
		字段位置从posl开始，到pos2为止（包括posl，不包括pos2
		也可以通过-k来达到+pos1 -pos2的选择关键列的目的

sort默认是把一行的所有信息都作为排序关键字,下面通过例子来说明按任意字段来作为关键字的排序

例如文本(文件名为test.txt)如下：

yams:104
turnips:8
potatoes:15
carrots:104
green beans:32
radishes:5
lettuce:15

需要按照“:”后面的数值大小进行排序，第一步要找到一个字符来作为分隔符，这里一目了然的就可以选择“:”,第二步确定该列是第几列，注意列的编号是从０开始的，所以这里排序的关键字段就是第一列，另外需要注意的是按照数字的大小来排序，所以不能忘记 -n,否则得到的结果不是预期的，按字符排序的话108 < 15 < 32 < 5。根据分析得到的命令就是：sort -t: +1 -2 -n test.txt 执行的结果如下:

radishes:5
turnips:8
lettuce:15
potatoes:15
green beans:32
carrots:104
yams:104

同样可以使用 -k来代替 +1 -2指定排序关键列,例如：sort -t: -k2 -n test.txt, 注意: -k指定的列是编号是从1开始的。

用户的信息存放在主站上，一个子站也提供用户登录的接口，登陆采用ajax不刷新页面的方式，由于安全原因，ajax不允许跨域执行，所以单纯的ajax是不能直接运行的。但是动态创建script的方式不存在跨域的问题，大致的操作是通过document.createElement创建一个script对象，同时script的src指向主站提供验证用户信息的url，url中参数包括用户输入的用户名和密码，把这个script对象添加到当前页面上。主站的接口根据用户名密码来验证用户是否合法，响应的内容是调用一个js方法。

该方式在IE6下有时不能正常工作，其他主流浏览器都没有问题。IE6的具体症状是第一次能正常工作，如果用户输入用户名和密码不匹配，第一次能提示用户重新输入，但是修改后重新提交了就没有反应，必须要强制刷新才会正常，通过httpwatcher查看，请求是发送，也有响应，就是没有调用成功页面上的js方法。经常反复折腾，终于找到问题的根源，主站接口url是php，所以响应的header中content-type不是text/html，强制设置header中content-type设置为 Content-Type: text/javascript 或者Content-Type: application/x-javascript后，IE6就正常工作了。另外如果服务器启用gzip压缩，可能也会造成IE6不能正常工作，在apache中可以针对某个特定的uri设置成不压缩，如：SetEnvIfNoCase Request_URI /user/vlogin/.* no-gzip dont-vary。

当前的Web应用中少不了flash，有时候当前页面需要跟flash交互，交互的桥梁是通过javasript来实现，javascript能够调用到flash中定义的方法，同样的flash中也可以调用到javacript的方法。

点这里 查看演示例子 ||  点这里 下载完整代码

flash可以用 ExternalInterface.call(“swfCall” [,arg1[,arg2]]) 的方式来调用javacript中定义的swfCall方法，参数为可选;但是javascript中调用flash的方法，需要flash指定那些方法能调用，例如在flash的代码

ExternalInterface。addCallback("setFlashVal", flashFunction);

function flashFunction(msg) {
	//do something
}

function flashFunction_1(msg) {
	//do something
}

javascript中就可以调用到flashFunction，但调用的方法名是setFlashVal，由于flashFunction_1没有导出，所以页面javascript无法访问到。IE跟Firefox、chrome获取flash对象的方式不同,IE是用window对象，Firefox等则是用document对象。具体参看下面代码：

function getSwfObject(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName]
	}else{
		return document[movieName]
	}
}

getSwfObject('swfId').setFlashVal('text');

其中movieName是flash的ID，即<object>标签中定义的ID、或者是embed标签的name属性值，最好这两个值保持一致，否则可能在不同的平台下无法正常工作。