IT瘾图片推荐

完美的nginx图片防盗链设置详解

Fri, 09 Oct 2015 10:22:38 CST

关于 nginx防盗链的方法网上有很多教程，大部分都可以用，不过很多所做的 nginx防盗链并不是真正的彻底的防盗链！一般，我们做好防盗链之后其他网站盗链的本站图片就会全部失效无法显示，但是您如果通过浏览器直接输入图片地址，仍然会显示图片，仍然可以右键图片另存为下载文件！依然可以下载？这样就不是彻底的防盗链了！那么，nginx应该怎么样彻底地实现真正意义上的防盗链呢？

首先，我们来看下nginx如何设置防盗链

如果您使用的是默认站点，也就是说，您的站点可以直接输入服务器IP访问的，使用root登录，修改 /usr/local/nginx/conf/nginx.conf 这个配置文件。

如果您新建了站点，那么修改/usr/local/nginx/conf/vhost/你的域名.conf 这个配置文件，找到：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}

把这一段删掉，修改成：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
valid_referers none blocked *.epinv.com epinv.com *.qq.com *.baidu.com;
if ($invalid_referer) {
rewrite ^/ http://www.epinv.com/epinv.png;
#return 404;
}
expires 30d;
}

第一行： location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

其中“gif|jpg|jpeg|png|bmp|swf”设置防盗链文件类型，自行修改，每个后缀用“|”符号分开！

第三行：valid_referers none blocked *.epinv.com epinv.com *.qq.com *.baidu.com;

就是白名单，允许文件链出的域名白名单，自行修改成您的域名！ *.epinv.com这个指的是子域名，域名与域名之间使用空格隔开！baidu.com是搜索引擎，做qq.com的白名单是因为可能有用户用邮箱订阅你的站点，如果不设置为白名单，用户在邮箱就无法看见你的图了，同理，如果还有其他订阅方式、搜索引擎都最好添加一下。

第五行：rewrite ^/ http://www.epinv.com/epinv.png;

这个图片是盗链返回的图片，也就是替换盗链网站所有盗链的图片。这个图片要放在没有设置防盗链的网站上，因为防盗链的作用，这个图片如果也放在防盗链网站上就会被当作防盗链显示不出来了，盗链者的网站所盗链图片会显示X符号。

这样设置差不多就可以起到防盗链作用了，上面说了，这样并不是彻底地实现真正意义上的防盗链！

我们来看第三行：valid_referers none blocked *.epinv.com epinv.com *.qq.com *.baidu.com;

valid_referers 里多了“none blocked”

我们把“none blocked”删掉，改成

valid_referers *.epinv.com epinv.com *.qq.com *.baidu.com;

nginx彻底地实现真正意义上的防盗链完整的代码应该是这样的：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{  valid_referers *.epinv.com epinv.com *.qq.com *.baidu.com;   
 if ($invalid_referer) {   rewrite ^/ http://www.epinv.com/epinv.png;   
  #return 404;  }  expires      30d;
}

这样您在浏览器直接输入图片地址就不会再显示图片出来了，也不可能会再右键另存什么的。

第五行：rewrite ^/ http://www.epinv.com/epinv.png;

这个是给图片防盗链设置的防盗链返回图片，如果我们是文件需要防盗链下载，把第五行：

rewrite ^/ http://www.epinv.com/epinv.png;

改成一个链接，可以是您主站的链接，比如把第五行改成自己的主页：

rewrite ^/ http://www.epinv.com;

这样，当别人输入文件下载地址，由于防盗链下载的作用就会跳转到您设置的这个链接！当然直接返回403也是可以的。

其他说明

请确保server段中只有一个location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$，否则可能导致代码无效，如有这个代码段请合并或删除。
切记：如果要跳转到图片，记得替换的图片地址要使用没有防盗链的网站图片，否则由于替换的图片其实也处于防盗链情况下，会造成仍旧无法显示设置的图片。

测试一下配置是否OK，命令如下：

/usr/local/nginx/sbin/nginx -t

返回以下结果表示正常：

the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
configuration file /usr/local/nginx/conf/nginx.conf test is successful

然后服务器重启，如果是LNMP的执行如下命令重启LNMP即可：

/root/lnmp restart

只针对图片目录的防止盗链方式

location /images/ {
  alias /data/images/;
  valid_referers none blocked server_names *.5icool.org 5icool.org;
  if ($invalid_referer) {return 403;}
  }

三、使用第三方模块ngx_http_accesskey_module实现Nginx防盗链

实现方法如下：

1.下载NginxHttpAccessKeyModule模块文件：Nginx-accesskey-2.0.3.tar.gz；

2.解压此文件后，找到nginx-accesskey-2.0.3下的config文件。编辑此文件：替换其中的"$HTTP_ACCESSKEY_MODULE"为"ngx_http_accesskey_module"；

3.用一下参数重新编译nginx：

./configure --add-module=path/to/nginx-accesskey

4. 修改nginx的conf文件，添加以下几行：

location /download {
  accesskey             on;
  accesskey_hashmethod  md5;
  accesskey_arg         "key";
  accesskey_signature   "mypass$remote_addr";
  }

其中：

accesskey为模块开关；
accesskey_hashmethod为加密方式MD5或者SHA-1；
accesskey_arg为url中的关键字参数；
accesskey_signature为加密值，此处为mypass和访问IP构成的字符串。

访问测试脚本download.php：

<?
  $ipkey= md5("mypass".$_SERVER['REMOTE_ADDR']);
  $output_add_key="<a href=http://www.5icool.org/download/G3200507120520LM.rar?key=".$ipkey.">download_add_key</a><br />";
  $output_org_url="<a href=http://www.5icool.org/download/G3200507120520LM.rar>download_org_path</a><br />";
  echo $output_add_key;
  echo $output_org_url;
  ?>

访问第一个download_add_key链接可以正常下载，第二个链接download_org_path会返回403 Forbidden错误。

资料来源：http://www.it300.com/article-15345.html

HTML5本地裁剪图片

Wed, 15 Jul 2015 15:55:24 CST

先上效果图：

我们首先需要创建一个 index.html文件，里面写上一些简单的 html和 css代码：

  <!DOCTYPE html>
<html>
<head>
    <title>HTML5 Crop Image</title>
</head>
<style type="text/css">
body{text-align:center;}
#label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
#get_image{position:absolute;}
#edit_pic{position:absolute;display:none;background:#000;}
#cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
#show_edit{margin: 0 auto;display:inline-block;}
#show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }
</style>
<body>
<input type="file" name="file" id="post_file">
<button id="save_button">SAVE</button>


<div id="label">
    <canvas id="get_image"></canvas>
    <p>
        <canvas id="cover_box"></canvas>
        <canvas id="edit_pic"></canvas>
    </p>
</div>




<p>
    <span id="show_edit"></span>
    <span id="show_pic"><img src=""></span>
</p>


<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

以上的三个 <canvas>标签都是用来处理跟图片相关的内容的，详细的处理会在后续的js代码中给出。而 id为 show_edit 和 id为 show_pic这两个是为了图片的预览和查看最后的图片生成结果。做完html和css的布局之后，我们就可以进入js代码，实现本节课的图片裁剪功能。

实现图片裁剪的init函数：

  var postFile = { 
        init: function() {
        var t = this;
        t.regional = document.getElementById('label');
        t.getImage = document.getElementById('get_image');
        t.editPic = document.getElementById('edit_pic');
        t.editBox = document.getElementById('cover_box');
        t.px = 0;    //background image x
        t.py = 0;    //background image y
        t.sx = 15;    //crop area x
        t.sy = 15;    //crop area y
        t.sHeight = 150;    //crop area height
        t.sWidth = 150    //crop area width
        document.getElementById('post_file').addEventListener("change", t.handleFiles, false);
    },

}

我们将所有的函数和变量都是封装在 postFile这个对象里面的，上面的 init方法主要是设置一些初始值

  t.px = 0;    
t.py = 0;    
t.sx = 15;   
t.sy = 15;   
t.sHeight = 150;    
t.sWidth = 150

以上的 t.px t.py分别表示在实时预览区域的背景图片的坐标； t.sx， t.sy， t.sHeight， t.sWidth分别表示图片的横纵坐标和宽高。

并且我们通过 document.getElementById获取了多个稍后需要操作的元素，注意到：

  document.getElementById('post_file').addEventListener("change", t.handleFiles, false);

我们通过监听 id为 post_file的 input表单的 change事件来处理用户上传的文件，在这我们交给了 handleFiles函数来处理，所以下面我们就来实现 handleFiles函数。

实现handleFiles，获取文件，读取文件并生成url

   handleFiles: function() {
        var fileList = this.files[0];
        var oFReader = new FileReader();
        oFReader.readAsDataURL(fileList);
        oFReader.onload = function (oFREvent) { 
            postFile.paintImage(oFREvent.target.result);
        };
    },

上面这几行代码就可以基本实现 handleFiles的处理功能，我们在这里就使用了HTML5的File API，首先通过 new FileReader()来实例化一个 FileReader对象 oFReader，再调用其 readAsDataURL()方法将文件的内容读取出来并处理成base64编码的格式。

如果你对 var fileList = this.files[0];有疑问，不妨在在这里打印出来看看：

  console.log(this.files);

你将会看到类似于这样的打印输出：

最后，当文件读取完毕并完成加载的时候，我们通过 postFile.paintImage(oFREvent.target.result)处理我们读取到的图片，说白了就是将读取到的图片数据重新绘画到浏览器上。

关于 oFREvent究竟是什么东西，你可以通过 console.log(oFREvent)来查看。你还可以查看这里的链接来获取更多的FileReader的知识：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

实现paintImage函数

   paintImage: function(url) {
        var t = this;
        var createCanvas = t.getImage.getContext("2d");
        var img = new Image();
        img.src = url;
        img.onload = function(){

            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;

            } else {
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var pHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;

            createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);
            t.imgUrl = t.getImage.toDataURL();
            t.cutImage(); 
            t.drag();
        };
    },

以上最重要的就是根据容器的大小使用canvas绘制图片。在上一步使用File API的FileReader已经得到了需要上传图片的地址了( oFREvent.target.result这个值)，接下来需要使用canvas把这个图片绘制出来。我们首先使用到 getImage.getContext来获取 <canvas id="get_image"></canvas>的2d内容，简单理解就是图像内容，然后利用 new Image()来得到一个 <img>标签，设置 src属性的值，如果你 console.log(img),得到的大概是这样的结果：

  <img src="images/background.png" >

在 img.onload函数里，我们的主要目的是为了将图片按照原大小等比例地重画出来，所以才有if条件判断，最后我们通过 createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);这一行代码来实现真正的绘画图片，效果大概是这样的：

这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层( id为 label的div)，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。

如果你对drawImage()有任何疑问，点击下面的链接进行详细的了解：

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContex...

到这里，前期的一小半工作其实已经完成了，我们按照上面的思路，接下来就把 cutImage和 drag这两个方法实现就可以了。

实现cutImage方法

在上一张图片中，我们其实很清楚地看到了两个明暗不一的层，这是因为我们根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的 clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比，这样的目的一个是为了更好地看到对比，一个就是为了用户体验：

  cutImage: function() {
    var t = this;

    //绘制遮罩层：
    t.editBox.height = t.imgHeight;
    t.editBox.width = t.imgWidth;
    t.editBox.style.display = 'block';
    t.editBox.style.left = t.px;
    t.editBox.style.top = t.py;

    var cover = t.editBox.getContext("2d");
    cover.fillStyle = "rgba(0, 0, 0, 0.5)";
    cover.fillRect (0,0, t.imgWidth, t.imgHeight);
    cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);

    //预览图片

    document.getElementById('show_edit').style.background = 'url(' + t.imgUrl + ')' + -t.sx + 'px ' + -t.sy + 'px no-repeat';
    document.getElementById('show_edit').style.height = t.sHeight + 'px';
    document.getElementById('show_edit').style.width = t.sWidth + 'px';
},

以上的 cutImage方法主要是负责两个事情，一个是制造遮罩层，一个是利用css的 background属性将选中的裁剪区域实时预览。

但是需要注意的是，这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。

编写drag方法

在很多web应用中，使用截图上传头像功能时我们希望能裁剪到满意的图片，所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了，所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片

先来一张预览图片：

     
 drag: function() {
        var t = this;
        var draging = false;
        var startX = 0;
        var startY = 0;

        document.getElementById('cover_box').onmousemove = function(e) {
            var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
            var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

            if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
                this.style.cursor = 'move';

                this.onmousedown = function(){
                    draging = true;

                    t.ex = t.sx;
                    t.ey = t.sy;

                    startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                    startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

                }
                window.onmouseup = function() {
                    draging = false;
                }

                if (draging) {

                    if ( t.ex + (pageX - startX) < 0 ) {
                        t.sx = 0;
                    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                        t.sx = t.imgWidth - t.sWidth;
                    } else {
                        t.sx = t.ex + (pageX - startX);
                    };

                    if (t.ey + (pageY - startY) < 0) {
                        t.sy = 0;
                    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                        t.sy = t.imgHeight - t.sHeight;
                    } else {
                        t.sy = t.ey + (pageY - startY);
                    }

                    t.cutImage();
                }
            } else{
                this.style.cursor = 'auto';
            }
        };
    }

这个方法里要理解一下几个主要的点：

  var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

我们通过上面两行代码来获取 鼠标距离背景图片的距离， e.pageX代表鼠标到浏览器左边缘的距离， t.regional.offsetLeft + this.offsetLeft可以计算出图片到浏览器的左边边缘的距离。上边的距离同理可得。

     
 if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )

在理解了 鼠标距离背景图片的距离距离之后，这个应该很容易理解：就是判断鼠标是否在图片的区域内部。

     
t.ex = t.sx; 
t.ey = t.sy;

startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

这两段代码也是要拿出来说说的，头两行是为了记录上一次截图时候的坐标（没有上一次就是初始化的时候的坐标）；后两行记录鼠标按下时候的坐标。你都可以通过 console.log()来分别查看这几个值。

     
if (draging) {


    if ( t.ex + (pageX - startX) < 0 ) {
        t.sx = 0;
    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
        t.sx = t.imgWidth - t.sWidth;
    } else {
        t.sx = t.ex + (pageX - startX);
    };

    if (t.ey + (pageY - startY) < 0) {
        t.sy = 0;
    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
        t.sy = t.imgHeight - t.sHeight;
    } else {
        t.sy = t.ey + (pageY - startY);
    }

    t.cutImage();
}

上面这一行代码就是说：如果实在拖动的情况下，我们需要根据坐标的变化来实时更新 t.sx和 t.sy的值,并且实时调用 cutImage方法实现预览。

移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)

最后，将裁剪的图片进行保存

从一开始，我们就有一个save按钮在页面上，我们的目的就是在用户点击save按钮的时候，将裁剪出来的图片保存到预览右边的方框内，于是，我们在 init方法里面添加下面的代码：

     
document.getElementById('save_button').onclick = function() {
    t.editPic.height = t.sHeight;
    t.editPic.width = t.sWidth;
    var ctx = t.editPic.getContext('2d');
    var images = new Image();
    images.src = t.imgUrl;

    images.onload = function(){
        ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); 
        document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.editPic.toDataURL();
    }

}

跟实现 painImage方法类似，首先监听save按钮的点击事件，然后我们将选中区域的图片利用 drawImage方法绘制出来，最后利用 toDataURL方法转换成base64编码格式并将该值赋予 show_pic下 img的 src属性，这样就完成了图片的裁剪保存。效果如图：

调用init方法

最后别忘了在开始之前调用 init方法，在js文件的最后一行加上：

  postFile.init();

最后的代码布局应该时这样的：

  var postFile = {

    init: function() {
        //codes
        },

    handleFiles: function() {
        //codes
        },

    //...methods
}
postFile.init();

Happy Hacking

网页大图片应用技巧浅析

Wed, 11 Mar 2015 18:17:39 CST

用图像创造场景感，增强用户的真实体验，近些年来，图片作为背景填充整个屏幕的设计越来越广泛，曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像，但是现在几乎任何类型的网站都有可能采用这种大图片作为背景，特别是企业品牌宣传、产品介绍等等。

在设计网页过程中，需要用到大量的图片，而且找到的图片大多风格迥异、无品牌感，那么如何找到合适而又能正确地应用图片呢？

如何正确应用图片

整理了一些经验总结供大家参考：

1 .提炼关键词寻找图片

首先需要提炼产品特性关键词，通过关键词的形式寻找合适的图片。

上图是google云盘官网banner背景为一张在飞机向外看的图片，不难发现用这种比拟手法来表现云盘的口号“随时随地使用”，在任何时候、任何地点都可以使用文件。换位思考，假如我们来设计google云盘官网，首先提炼出关键词：随时随地、自动同步、超大空间等等，用最能突出特点和有代表性的关键词来寻找合适的图片。

上图是IBM旗下的MobileFirst产品，其主要为用户移动应用从创建到维护推出的一体化解决方案为广大用户提供更便利服务，那么根据项目提炼出关键词：手机、用户，该网站用了一张人拿着手机进行使用的图片，目的是为了突出项目的业务特点。

上图分别为苹果官网、研究无线电技术企业——高通的网站中运用的图片同样也是通过产品特点提炼的关键词来完成图片的选用。

2. 图片品牌化

什么是图片品牌化？通过关键词寻找到的图片进行深度加工处理，使之在项目中运用到的图片都是一整套的、风格统一的，比如可以在图片的色调、色彩饱和度与特色风格上做调整等等，下面举几个案例。

Google Drive官网摘取出来的图片，这些图片不难发现无论在色调、色彩饱和度上是一致的，特点是低饱和度、颜色深沉和图片噪点，颜色上新颖有特色、风格上具有明显的品牌统一性。

上图为SAP公司官网的系列图片，作为全球最大的B2B企业为各行各业、不同规模的其他企业提供解决方案，正如它运用不同行业场景的图片一样：色彩丰富、但色调又不过于鲜艳，它们所有用到的图片都有这些特点。

美国高通网站的品牌宣传图片让人印象深刻，品牌特点独树一炽，颜色上运用冷暖搭配，加以渐变效果巧妙地叠加于图片上，虽然颜色种类不多，但能在风格、品牌上具有强烈的统一性，让人对品牌辨识度有更加深刻的记忆性。

项目实践

去年做了几个腾讯云的项目改版，尝试新的风格探索，排版上采用了大图片为背景。设计过程中考虑到产品的长远发展，通过研究后发现图片统一风格在产品品牌推广上有着非常重要的作用，通过几经打磨快速整理了实现方案。腾讯云线上新版本的页面图片已经实现了统一风格。

总结

大图片作为背景的设计风格，这种设计方式虽然非常强有力地抓住用户的注意力，能准确应用图片而达到更大的体验效果是非常重要的，如果去掌握，了解项目背景，利用关键词的方式寻找更合适的图片，此外还需关注用户对产品的印象程度，那么图片的品牌化就显得格外重要，把产品所用的图片设计为一整套统一的风格出来的效果是不可估量的。

用gifsicle优化GIF动图

Tue, 28 Jul 2015 09:10:18 CST

最近我写了一些关于如何将各种形式的多媒体格式相互转换的文章，特别是GIF动图方面的，比如如何将小视频转换成GIF动图或将GIF动图转换成视频，有很多像ImageMagick，ffmpeg这样的工具帮助我们完成这样的任务，但是这两个工具输出的GIF动图有一个问题，就是没有对图片进行优化，至少输出的GIF动图的体积有些大。因为大部分的GIF动图都是要放在网页上，最终下载到用户的浏览器里，所以，优化这些GIF图片的体积是十分必要的，这里我们就需要用到另外一个非常有用的GIF图片修改工具： gifsicle，它有一个内置的方法能够优化GIF动图的体积。

在开始介绍对GIF图片的优化方法前，你需要知道的一点是，gifsicle不仅仅是GIF图片优化工具。gifsicle还可以调整GIF图片的大小，合并多个GIF动图等等任何你能想到的对GIF图片的操作。

gifsicle 对GIF图片有三种优化选项：

-O1 只保存每张图像上变化的部分。这是缺省模式。
-O2 进一步用透明度压缩图片。
-O3 尝试各种优化方法(通常速度会慢一些，有时会产生更好的效果)。

优化GIF动图的命令行写法是这样的：

gifsicle -O3 animation.gif -o animation-optimized.gif

如果你有耐心和时间，推荐你尝试一下 -O3，它有可能会给你输出体积更小的GIF动图。在有些图片上，它有可能压缩超过20%的体积，根据你提供的GIF动图的图片构成，它有可能压缩更大的体积。

如何用JavaScript获取图片的真实尺寸大小

Mon, 22 Sep 2014 09:50:17 CST

网页页面上的图片尺寸似乎都千篇一律。我们最常见到的带有多图的文章页面中，图的大小通常是和页面的宽度一致，这样看起来，页面就是一个直筒形，这样的布局看多了就会觉得很单调。之所以形成这样的局面，我想很大程度上是因为老式浏览器的限制。但随着现代浏览器(火狐/谷歌/IE11)的普及，浏览器对页面设计的限制越来越少，Web程序员的想象能力能够得到极大的发挥。

比如，冷知识：你知道每个视窗都有的 [x] 是怎么来的吗？这篇文章中，很多图片超出了文本宽度的限制，给人一种参差错落的感觉，同时，让大图片以其真实的尺寸展示，给人以更震撼的感觉。

但从技术上，我们可以轻松的用文本的最大宽度限制图片，让它们都保持一个宽度，而不按文本的宽度时，我们就需要每个图片的自己的尺寸。我们可以在服务端编辑时声明图片的原始尺寸。而一种更灵活的方式是通过在页面上放一段js来动态的获取图片的原始大小尺寸，动态改变图片的显示大小。这样即能兼容老的也文本最大宽度的方式，还可以在需要的时候让图片呈现出其原始的大小。

如何用JavaScript在浏览器端获取图片的原始尺寸大小？

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Webkit浏览器(谷歌浏览器等)是在图片的loaded事件之后才能获取高度和宽度值。所以，你不能使用timeout函数延时等待，最好的方法是使用图片的onload事件。

为了避免CSS对图片大小尺寸的影响，上面的代码将图片拷贝到内存中进行计算。

如果你的页面是老式页面，你可以按需把这段代码嵌入页面底部，它不需要你修改原有页面。

参考 stackoverflow

技高一筹？最新的Google图片识别技术能够“认出”大部分物品

Wed, 17 Sep 2014 21:47:50 CST

近日，谷歌通过官方博客，介绍了图像识别领域取得的一些重大进展。这个识别技术最早是在ImageNet计算机视觉挑战比赛（ILSVRC）上展示。ImageNet视觉识别挑战每年举办一次，旨在发现更好的图像技术，尤其是物体识别和锁定这两方面。目前主要的参赛者来自于学术机构和实验室。

在今年的比赛里面，隶属于Google的GoogLeNet团队刷新了“分类和侦测”记录，其精度比去年的记录提升了两倍。目前他们已经把这个项目公开，希望能够邀请更多人来参与其中，借此来加速项目的发展。

这个挑战遵循三个步骤：分类、分类并锁定以及侦测。分类主要是测试所选用的算法是否可以正确的给图片中的物体贴上相应的标签。分类并锁定主要是测试算法在图像识别和锁定潜在物体上的能力。侦测和第二个步骤比较类似，但是这个环节会使用更加苛刻的评估标准，所使用的图像包含了很多非常细小的物体。在侦测环节中，性能优越的图像识别技术是可以在复杂场景中精准锁定和识别物体的。

Google的物体识别图像技术涉及到神经网络技术和深度学习技术。该系统在无需庞大计算资源支撑的背景下，能够对识别物体的标准进行优化和微调，并最终识别出物体。从谷歌发布的照片中我们可以看出，目前这项技术可以识别出我们常见的物体，比如宠物猫、鸡蛋、香蕉、橘子、电视机、显示器、书架等。

这个技术目前还处于早期研发阶段，随着这个技术的进步与成熟，我们将可以用上更好的图像识别技术。这个技术也可以直接对接到Google旗下的一些产品和服务，例如图片搜索、YouTube、自动驾驶技术以及有必要使用图像识别技术的领域。

将画布(canvas)图像保存成本地图片的方法

Tue, 24 Jun 2014 11:30:11 CST

之前我曾介绍过如何将HTML5 画布(canvas)内容转变成图片形式，方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够，如何能将转变后的图片保存到本地呢？

其实，这个方法也是非常简单的，几乎不用额外的编程知识。但我们可以更完美些，下面我将使用 canvas2image.js, base64.js这两个脚本实现更强大的canvas->图片->本地的过程。

在下面的方框内你可以用鼠标绘制任意的图案，试一下吧，然后点击“保存…”按钮，浏览器将会提示你保存下载图片。或者点击”转换成…”，然后右键点击画布，可以看到浏览器右键菜单里有“保存图片..”一项。

你的浏览器不支持画布技术，请使用谷歌浏览器/火狐浏览器或最新的IE9/10/11。

现在你可以右键点击画布，下载这张图片了。

使用HTML5画布技术，你可以在浏览器客户端用JavaScript绘制出各种美丽酷炫的图案，这些图案是不能直接保存的，本身也不是图片形式。
幸运的是，画布(canvas)对象有一个非常有用的方法: toDataURL()。这个方法能把画布里的图案转变成base64编码格式的png，然后返回 Data URL数据。

var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

而且，如果你给 toDataURL()传入mine类型的参数，你还可以将画布转变成其它格式的图片。

var strDataURI = oCanvas.toDataURL("image/jpeg");
// returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."

现在，有了 Data URL数据后，我们可将这些数据直接填充到 <img> 元素里，或者我们可以直接从浏览器里下载它们。

上面我提到的两个js包也就是封装了一些方便的方法：

/*
 * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
 */

var oCanvas = document.getElementById("thecanvas");

Canvas2Image.saveAsPNG(oCanvas);  // 这将会提示用户保存PNG图片

Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片

Canvas2Image.saveAsBMP(oCanvas);  // 这将会提示用户保存BMP图片


// 返回一个包含PNG图片的<img>元素
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   

// 返回一个包含JPG图片的<img>元素
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
                                                       
// 返回一个包含BMP图片的<img>元素
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 


// 这些函数都可以接受高度和宽度的参数
// 可以用来调整图片大小

// 把画布保存成100x100的png格式
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

你也许注意到了saveAsBMP这个函数，实际上没有浏览器直接支持转化成BMP格式，但我们可以借用getImageData()方法实现对它的支持，这个方法提供给我们从画布里直接读取原始像素的功能。

有了这些数据，我们可以构造出BMP格式图片(这种格式非常的简单)。

对于大个的图片，转化成BMP格式会需要几秒钟的时间，但小图片就非常的快了，不会有延迟的感觉。

生活贴士：30个急救常识

Fri, 04 Oct 2013 08:42:09 CST

1．眼睛进沙子

眼睛是最娇嫩的器官，容不得任何异物。如不及时清除异物，眨眼时会感到疼痛，还会引起炎症、溃烂甚至失明。异物入眼时，最忌讳使劲揉眼睛，或用干的纸巾或毛巾擦拭眼睛。正确的做法是睁开眼睛，让同伴帮忙翻开眼皮，仔细检查眼白（球结膜）、下眼睑和角膜。如异物在眼皮或眼白部位，可用纸巾蘸少许纯水轻轻擦去异物（在家时，最好用棉签沾少许抗生素类眼药水擦去异物）；如异物在上眼睑内、角膜处，或嵌入较深，则必须及时到医院处理。

2．鱼骨卡喉

鱼骨卡喉后，应立即停止进食，张大嘴发“啊”的声音，让家属借助光线或手电筒，看清鱼骨所在部位，再用镊子夹出。若未发现鱼骨，则鱼骨可能卡在更深的喉咽部，应去医院就诊。鱼骨取出后，在短时间内仍然会有咽喉部异物感，这是局部黏膜擦伤的缘故，不必介意。不少人喜欢采用吞咽大的干饭团的方法来对付鱼骨卡喉。该方法对小的鱼骨可能有效，但对稍大一些的鱼骨则无效，有时反而会因挤压而刺得更深。还有些人认为，一旦鱼骨卡喉，可少量多次吞服食用醋使鱼骨溶解。其实，食醋在咽喉部停留的时间很短，根本不可能溶解鱼骨。

3．飞虫钻进耳朵

小飞虫突然钻进耳道后，千万不要用手指或其他东西去掏它，以免小飞虫越钻越深，万一钻破鼓膜，可引起听力下降。正确的做法是到黑暗的地方，用手电光照着耳道，利用昆虫的趋光性，用光引出飞虫。也可以在耳道内滴几滴烹调油，使飞虫的翅膀浸湿而无法张开，再用耳勺将虫掏出耳道。若上述方法不奏效，应立即去医院就诊。

4．吃东西被噎

如果患者还能讲话或咳嗽，表明气道没有被完全阻塞，尽量让他自己咳出较好；如果患者意识清醒，但无法自己咳出噎住的食物，可用海姆利克操作法，即顺着患者的上腹部向上迅速施压，靠产生的冲击气流将食物挤出气道；如果患者已呼之不应，应立刻扳开他的嘴，用示指贴着其口角一侧，伸入到口腔深部向外做钩扫动作，直至清除食物为止。若以上尝试均不奏效，应立即送医院急诊。

5．鼻出血

鼻出血时仰头，非但止不住鼻血，反而会导致鼻血被吸入口腔和呼吸道。正确的做法是用手指捏住两侧鼻翼4～8分钟，或用浸了冰水的棉球填塞鼻腔压迫止血。如果这些方法仍不能止血，应立即去医院就诊。

6．醉酒

轻度醉酒者，可以让其喝浓茶利尿，加速酒精的排泄。严重醉酒者，可让其喝醋，并用手指压迫其舌根催吐，以减少酒精的吸收。经上述处理效果不明显，应送医院处理。

7．中暑

轻中度中暑者，应将其迅速转移到阴凉通风处静卧休息，脱掉或解开衣服，用冷毛巾擦身，以迅速降低体温。可让中暑者喝一些凉盐水、清凉含盐饮料。若患者出现神志不清、抽搐，应立即送医院。

8．晒伤

夏天外出时，应做好防护工作，比如搽防晒霜、撑遮阳伞等。当皮肤被烈日晒红并出现红肿、疼痛时，可用冷毛巾敷于患处，并适当涂一些滋润霜。若皮肤上已有水疱，千万不要挑破，应请医生处理，以免继发感染。

9．蜂蜇伤

外出郊游一旦被蜜蜂蜇伤，应小心地将残留的毒刺拔出，轻轻挤捏伤口，挤出毒液，涂一点氨水或苏打水。若是被黄蜂蜇伤，应涂醋酸水，以中和毒液。局部冷敷可减轻肿痛。若出现恶心、头晕等异常反应，应立即去医院就诊。

10．游泳时，小腿抽筋

在水中发生小腿抽筋时，应立即上岸，伸直腿坐下，用手抓住大足趾向后拉，并按摩小腿肌肉。若不能立即上岸，应保持冷静，屏住气，在水中做上述动作。

11．不慎咬碎体温表并吞服了水银

体温表内的水银不慎被吞服后，汞会与体内含巯基的酶和蛋白质结合，影响其活性，导致重金属中毒。尽管体温表内的汞含量不多，但服用后也会引起口腔炎、急性胃肠炎，表现为口腔糜烂、溃疡，腹痛、恶心、呕吐、腹泻等。漱口后喝点蛋清或牛奶，不仅能清除口腔中的残留汞，还能使蛋清或牛奶中的蛋白质与吞服的汞结合，起到保护胃黏膜、减少汞吸收的作用。

12．外伤出血

① 较小或较表浅的伤口，应先用冷开水或洁净的自来水冲洗，但不要去除已凝结的血块。②伤口处有玻璃片、小刀等异物插入时，千万不要去触动、压迫和拔出，可将两侧创缘挤拢，用消毒纱布、绷带包扎后，立即去医院处理。③碰撞、击打的损伤，有皮下出血、肿痛，可在伤处覆盖消毒纱布或干净毛巾，用冰袋冷敷半小时，再加压包扎，以减轻疼痛和肿胀。伤势严重者，应去医院。④伤口有出血，可用干净毛巾或消毒纱布覆盖伤处，压迫10～20分钟止血，然后用绷带加压包扎，以不再出血为度，视情况去医院处理。

13．刀割伤

①如伤口不大，出血不多，伤口也较干净，伤指仍能作伸屈活动，可用医用碘消毒伤口及其周围皮肤，待干后，再用消毒纱布或创可贴覆盖包扎伤口。②若伤口大而深，应压迫止血，同时立即去医院治疗。③如果手指不幸被切断，应立即将伤指上举，然后用干净的纱布直接加压包扎伤口止血。若血仍外流不止，也可在指根处紧缠止血带（可用一般的清洁绳代替）止血，并将断指用无菌布料包好，放入干净的塑料袋中。除非断指污染特别严重，一般不要自己冲洗，也不要用任何液体浸泡断指，立即去医院救治。

14．烫伤

一旦发生烫伤，应立即用冷水冲洗或冷敷烫伤部位，持续15分钟左右，以缓解疼痛，减轻烫伤程度。不要擅自在伤口处涂药，更不能用涂酱油、植物油等土办法处理伤口。若烫伤处有水疱，不要挑破，可用干净纱布覆盖，去医院处理。

15．骨折

确定有骨折后，一定要对伤肢（指）作固定再送医院，否则骨折断端异常活动，会加重损伤。可因地制宜用木板、木棍、树枝、竹竿、杂志等作为固定用的临时夹板。若无上述材料，可将上肢固定在躯干上，下肢固定在对侧的健肢上。

16．气胸

有些人，特别是老年慢阻肺患者，在用力咳嗽、剧烈运动或大笑后，会发生气胸，出现胸痛、深吸气时加剧，并放射到肩背部，严重时，还会出现呼吸困难、血压下降等紧急情况。遇到这种情况，禁忌拍背和搬动患者，以免加重气胸。应让患者取半卧位，如家中备有氧气，应立即吸氧，同时叫救护车。

17．癫痫发作

在救护车到来之前，可让患者的头侧向一边，以防止呕吐物窒息。随后，找一把金属调羹或牙刷等不易咬碎的东西塞进他的上下牙之间，防止舌咬伤。对于成年人，最好在硬东西上裹一层毛巾或手帕，以免咬掉牙齿。

18．猫狗咬伤

一些人被动物抓咬后，身上只留有牙印或爪痕，认为没伤口就不必处理，这种做法其实是很危险的。因为牙印或爪痕可能造成肉眼看不到的皮肤损伤，狂犬病病毒也有可能从伤口侵入。
注射疫苗应及早、足量。患者必须于咬伤当天，咬伤后第3天、第7天、第14天、第30天各肌肉注射一支疫苗。一定要注射在上臂三角肌或大腿内侧，不能注射在臀部，以免影响疫苗效果。全程注射完毕10日后，应抽取静脉血作抗体检测。如果抗体滴度达到或超过3单位/毫升的标准，即代表获得了免疫效果，如低于标准，应适当增加接种针数，以确保达到防病效果。

19．误服灭鼠药

灭鼠药毒性成分不同，误服后的临床表现各异，如胃部不适、呕吐、腹泻、抽搐等，严重的可出现昏迷。喝水稀释、催吐等方法皆难奏效，送医院急诊洗胃或对症处理才是上策。

20．踝扭伤

踝关节扭伤后，不要继续行走，也不要揉搓、转动受伤关节，以免进一步加重损伤。应立即用冷毛巾或冰块敷患处，有利消肿、止痛、缓解肌肉痉挛。24小时后方可改为热敷。如果怀疑有内出血，最好用弹性绷带加压包扎，但不要过紧，以免妨碍包扎部位以下的血液循环。如果怀疑有骨折，最好用夹板或就近找木棍固定受伤的踝关节，并尽快去医院就诊。

21．呼吸停止（人工呼吸）

首先，让伤病员仰卧，将其头后仰，确保呼吸道畅通。若其口内有血块、呕吐物、假牙等异物时，应尽快取出。随后作人工呼吸：抢救者先深吸一口气，然后捏住患者的鼻子，口对口像吹气球样为其送气，注意不要漏气。每隔5秒吹一次气，反复进行。遇到嘴张不开或口腔有严重外伤者时，可从其鼻孔送气作人工呼吸。

22．心跳停止（胸外按压）

先让患者躺在硬板床或平整的地上，解开其上衣，抢救者将一只手的掌根置于其胸骨下三分之一的位置，另一只手重叠压在手背上。抢救者两臂保持垂直，以上身的重量连续向下按压，频率为每分钟70次左右。按压时，用力要适中，以每次按压使胸骨下陷3～5厘米为度。注意，手掌始终不要脱离按压部位。

23．心跳呼吸全无（心肺复苏）

呼吸和心跳停止后，大脑很快会出现缺氧，4 分钟内将有一半的脑细胞受损。超过5分钟再施行心肺复苏，只有1/4的人可能救活。
实施心肺复苏时，首先用拳头有节奏地用力叩击患者前胸左乳头内侧的心脏部位2～3次，拳头抬起时,离胸部20～30厘米，以掌握叩击的力量。若脉搏仍未恢复搏动，应立即连续做4次口对口人工呼吸，接着再做胸外心脏按压。一人施行心肺复苏时，每做15次心脏按压，再做2次人工呼吸。两人合作进行心肺复苏时，先连做4 次人工呼吸，随后，一人连续做5次心脏按压后停下，另一人做一次人工呼吸。

24．煤气中毒

当发现有煤气泄漏时，正确的做法是立即关闭煤气，开窗透气。抢救者在进入溢满煤气的房间前，应先吸足一口气，然后用湿毛巾或手帕捂住口鼻，以防自己中毒。在煤气没有散尽前，不要开灯、按电铃、打电话或使用打火机、火柴等，以免引发爆炸。然后，将中毒者移到通风的地方，松开中毒者的衣领、裤带。观察其意识、心跳和呼吸情况。如已没有心跳和呼吸，立刻进行人工呼吸和胸外按压；如还有心跳、呼吸，应立即拨打急救电话，送医院进行高压氧治疗，以免留下后遗症。

25．溺水

救护溺水者时，必须用救生圈、球或木板等，除专职救生员外，即使会游泳的人，也不要徒手接近溺水者。溺水者获救后，应立即检查其呼吸、心跳。如呼吸停止，应马上做人工呼吸，先口对口连续吹入4口气，在5秒钟内观察其有无恢复自主呼吸，如无反应，应接着做人工呼吸，直至其恢复自主呼吸。如溺水者呼吸、心跳全无，应立即实施心肺复苏。如溺水者喝入大量的水，可在其意识清醒时，用膝盖抵住其背部，一手托住上腹部，另一手扒开其口让其吐水，或救护者单腿跪地，让溺水者脸朝下伏于膝盖上吐水。

26．气道异物

手捏喉咙，面容窘迫、恐惧等是气道异物的典型症状。
自救：
①用力咳嗽法。先吸一口气，然后用足力气咳嗽，有时就可把异物从气道内咳出。
②腹部手拳冲击法。将右手拇指关节突出点顶住上腹部，相当于剑突与脐之间腹中线部
位，左手紧握右手，然后用力向内作4～6次连续快速冲击。
互救：
抢救者站在患者侧后位，一手放置于患者胸部，另一手掌根部对准患者肩胛区脊柱上，用力给予连续4～6次急促拍击。
婴幼儿急救：让患儿骑跨并俯卧于急救者前臂上，头要低于躯干，并将其胳膊放在自己大腿上，用另一手掌根部用力叩击患儿的肩胛区4～6次。

27．颈椎损伤

如果怀疑伤员颈椎有损伤，应平抬伤员至担架上，专人牵引、固定其头
部，并上颈托。一时无颈托时，应在伤员的颈部两侧各放一只沙袋或衣物，以防头部扭转或屈曲导致颈椎损伤加重。

28．脊柱骨折

应由3～4人在同一侧同时托住伤员的头、肩、臀和下肢，把伤员平托起来，平卧在木板上，并用绷带加以固定。伤者最好取俯卧位，并在胸腹部放一软枕。严禁采用“搬头搬脚”的抬抱方式移动或搬运伤者，也禁用普通的软担架搬运。

29．头部撞伤

若伤员伤势较重，已昏迷，抢救者应立即清除其口腔内的呕吐物和血块，将其头转向一侧，牵拉出舌头，以防窒息。血液沿鼻腔和耳道流出时，切勿用棉球、纱布或其他物品堵塞。
需要提醒的是，有时候，人不慎摔倒，枕部着地，表面看来局部无任何皮损，但颅底却已发生骨折。伤者发生颅底骨折后，很快会因颅内出血而出现呼吸困难、恶心呕吐、昏迷等严重症状。因此，当头部被击，伴恶心、呕吐、耳鼻腔出血时，应立即就医。

30．触电

当发现有人触电时，尽快找到电闸，切断电源是当务之急。如果暂时找不到电源，可就近找一样绝缘的东西，如木棍或塑料管子，挑开触电者与电源的接触，然后检查触电者的反应。如果发现其已经没有了心跳和呼吸，应立即就地对其进行人工呼吸和胸外按压，同时让别人拨打急救电话。

淘宝商品1折抢购 | 更多清新美图

你可能还喜欢：

记得在页面的最下方给微奇生活打5颗星噢~~

图片服务架构学习之ZIMG

Sun, 15 Sep 2013 13:00:26 CST

zimg是一套国人针对图片处理服务器而设计开发的开源程序，目的是解决图片服务中如下三个问题：

大流量：对于一些中小型网站来说，流量问题就是成本问题，图片相对于文本来说流量增加了一个数量级，省下的每一个字节都是白花花的银子。所以凡是涉及到图片的互联网应用，都应该统筹规划，降低流量节约开支。
高并发：高并发的问题在用户量较低时几乎不会出现，但是一旦用户攀升，或者遇到热点事件，比如网站被人上传了一张爆炸性的新闻图片，短时间内将会涌入大量的浏览请求，如果架构设计得不好，又没有紧急应对方案，很可能导致大量的等待、更多的页面刷新和更多请求的死循环。总的来说，就是要把图片服务的性能做得足够好。
海量存储：在介绍Facebook图片存储的文章里提到，当时Facebook用户上传图片15亿张，总容量超过了1.5PB，这样的数量级是一般企业无法承受的。虽然很难做出一个可以跟Facebook比肩的应用，但是从架构设计的角度来说，良好的拓展方案还是要有的。需要提前设计出最合适的海量图片数据存储方案和操作方便的拓容方案，以应对将来不断增长的业务需求。

以上三个问题，其实也是相互制约和钳制的，比如要想降低流量，就需要大量的计算，导致请求处理时间延长，系统单位时间内的处理能力下降；再比如为了存储更多的图片，必然要在查找上消耗资源，同样也会降低处理能力。所以，图片服务虽然看起来业务简单，实际做起来也不是一件小事。下面将从架构设计、代码逻辑和性能测试等方面进行介绍。

总体思路

想要在展现图片这件事情上有最好的表现，首先需要从整体业务中将图片服务部分分离出来。使用单独的域名和建立独立的图片服务器有很多好处，比如：

CDN分流。如果你有注意的话，热门网站的图片地址都有特殊的域名，比如微博的是ww1.sinaimg.cn，人人的是fmn.xnpic.com等等，域名不同可以在CDN解析的层面就做到非常明显的优化效果。
浏览器并发连接数限制。一般来说，浏览器加载HTML资源时会建立很多的连接，并行地下载资源。不同的浏览器对同一主机的并发连接数限制是不同的，比如IE8是10个，Firefox是30个。如果把图片服务器独立出来，就不会占用掉对主站连接数的名额，一定程度上提升了网站的性能。
浏览器缓存。现在的浏览器都具有缓存功能，但是由于cookie的存在，大部分浏览器不会缓存带有cookie的请求，导致的结果是大量的图片请求无法命中，只能重新下载。独立域名的图片服务器，可以很大程度上缓解此问题。

图片服务器被独立出来之后，会面临两个选择，主流的方案是前端采用Nginx，中间是PHP或者自己开发的模块，后端是物理存储；比较特别一些的，比如Facebook，他们把图片的请求处理和存储合并成一体，叫做haystack，这样做的好处是，haystack只会处理与图片相关的请求，剥离了普通http服务器繁杂的功能，更加轻量高效，同时也使部署和运维难度降低。

zimg采用的是与Facebook相似的策略，将图片处理的大权收归自己所有，绝大部分事情都由自己处理，除非特别必要，最小程度地引入第三方模块。

架构设计

为了极致的性能表现，zimg全部采用C语言开发，总体上分为三个层次，前端http处理层，中间图片处理层和后端的存储层。下图为zimg架构设计图：

http处理层引入基于libevent的libevhtp库，专门处理基本http请求。
图片处理层采用imagemagick库。
存储层采用memcached缓存加直接读写硬盘的方案，后期可能会引入TFS4等。

为了避免数据库带来的性能瓶颈，zimg不引入结构化数据库，图片的查找全部采用哈希来解决。事实上图片服务器的设计，是一个在I/O与CPU运算之间的博弈过程，最好的策略当然是继续拆：CPU敏感的http和图片处理层部署于运算能力更强的机器上，内存敏感的cache层部署于内存更大的机器上，I/O敏感的物理存储层则放在配备SSD的机器上，但并不是所有人都能负担得起这么奢侈的配置。zimg折中成本和业务需求，目前只需要部署在一台服务器上。由于不同服务器硬件不同，I/O和CPU运算速度差异很大，很难一棒子定死。zimg所选择的思路是，尽量减少I/O，将压力放在CPU上，事实证明这样的思路基本没错，在硬盘性能很差的机器上效果更加明显；即使以后SSD全面普及，CPU的运算能力也会相应提升，总体来说zimg的方案也不会太失衡。

代码层面

虽然zimg在二进制实体上没有分模块，上面已经提到了原因，现阶段面向中小型的服务，单机部署即可，但是代码上是分离的。

main.c是程序的入口，主要功能是处理启动参数，部分参数功能如下：

-p [port] 监听端口号，默认4869
-t [thread_num] 线程数，默认4，请调整为具体服务器的CPU核心数
-k [max_keepalive_num] 最高保持连接数，默认1，不启用长连接，0为启用
-l 启用log，会带来很大的性能损失，自行斟酌是否开启
-M [memcached_ip] 启用缓存的连接IP
-m [memcached_port] 启用缓存的连接端口
-b [backlog_num] 每个线程的最大连接数，默认1024，酌情设置

zhttpd.c是解析http请求的部分，分为GET和POST两大部分，GET请求会根据请求的URL参数去寻找图片并转给图片处理层处理，最后将结果返回给用户；POST接收上传请求然后将图片存入计算好的路径中。为了实现zimg的总体设计愿景，zhttpd承担了很大部分的工作，也有一些关键点，下面捡重点的说一下：

在zimg中图片的唯一Key值就是该图片的MD5，这样既可以隐藏路径，又能减少前端（指zimg前面的部分，可能是你的应用服务器）和zimg本身的存储压力，是避免引入结构化存储部分的关键，所以所有GET请求都是基于MD5拼接而成的。假如你的网站某个地方需要展示一张图片，这个图片原图的大小是1000*1000，但是你想要展示的地方只有300*300，你会怎么做呢？一般还是依靠CSS来进行控制，但是这样的话就会造成很多流量的浪费。为此，zimg提供了图片裁剪功能，你所需要做的就是在图片URL后面加上w=300&h=300（width和height）即可。

在图片上传部分，如果我们的图片服务器前端采用Nginx，上传功能用PHP实现，需要写的代码很少，但是性能很差。首先PHP接收到Nginx传过来的请求后，会根据http协议（RFC1867）分离出其中的二进制文件，存储在一个临时目录里，等我们在PHP代码里使用$_FILES["upfile"][tmp_name]获取到文件后计算MD5再存储到指定目录，在这个过程中有一次读文件一次写文件是多余的，其实最好的情况是我们拿到http请求中的二进制文件（最好在内存里），直接计算MD5然后存储。于是自己去阅读了PHP的源代码，自己实现了POST文件的解析，让http层直接和存储层连在了一起，提高了上传图片的性能。除了POST请求这个例子，zimg代码中有多处都体现了这种“减少磁盘I/O，尽量在内存中读写”和“避免内存复制”的思想，一点点的积累，最终将会带来优秀的表现。

zimg.c是调用imagemagick处理图片的部分，现阶段zimg服务于存储量在TB级别的单机图片服务器，所以存储路径采用2级子目录的方案。由于Linux同目录下的子目录数最好不要超过2000个，再加上MD5的值本身就是32位十六进制数，zimg就采取了一种非常取巧的方式：根据MD5的前六位进行哈希，1-3位转换为十六进制数后除以4，范围正好落在1024以内，以这个数作为第一级子目录；4-6位同样处理，作为第二级子目录；二级子目录下是以MD5命名的文件夹，每个MD5文件夹内存储图片的原图和其他根据需要存储的版本，假设一个图片平均占用空间200KB，一台zimg服务器支持的总容量就可以计算出来了：

1024 * 1024 * 1024 * 200KB = 200TB

除了路径规划，zimg另一大功能就是压缩图片。从用户角度来说，zimg返回来的图片只要看起来跟原图差不多就行了，如果确实需要原图，也可以通过将所有参数置空的方式来获得。基于这样的条件，zimg.c对于所有转换的图片都进行了压缩，压缩之后肉眼几乎无法分辨，但是体积将减少67.05%。具体的处理方式为：

图片裁剪时使用LanczosFilter滤镜；
以75%的压缩率进行压缩；
去除图片的Exif信息；
转换为JPEG格式。

经过这样的处理之后可以很大程度的减少流量，实现设计目标。

zcache.c是引入memcached缓存的部分，引入缓存是很重要的，尤其是图片量级上升之后。在zimg中缓存被作为一个很重要的功能，几乎所有zimg.c中的查找部分都会先去检查缓存是否存在。比如：我想要a（代表某MD5）图片裁剪为100*100之后再灰白化的版本，那么过程是先去找a&w=100&h=100&g=1的缓存是否存在，不存在的话去找这个文件是否存在（这个请求所对应的文件名为 a/100*100pg），还不存在就去找这个分辨率的彩色图缓存是否存在，若依然不存在就去找彩色图文件是否存在（对应的文件名为 a/100*100p），若还是没有，那就去查询原图的缓，原图缓存依然未命中的话，只能打开原图文件了，然后开始裁剪，灰白化，然后返回给用户并存入缓存中。
可以看出，上面过程中如果某个环节命中缓存，就会相应地减少I/O或图片处理的运算次数。众所周知内存和硬盘的读写速度差距是巨大的，那么这样的设计对于热点图片抗压将会十分重要。

除了上述核心代码以外就是一些支持性的代码了，比如log部分，md5计算部分，util部分等。

参考链接：

http://zimg.buaa.us/arch_design.html

http://www.laruence.com/2009/09/26/1103.html

使用渐进式JPEG来提升用户体验

Wed, 17 Jul 2013 21:34:54 CST

今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG（标准型）和Progressive JPEG（渐进式）。两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。

Baseline JPEG

这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive JPEG。

Progressive JPEG

和Baseline一遍扫描不同，Progressive JPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。

渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验。（瀑布留的网站建议还是使用标准型的）

另外渐进式的图片的大小并不会和基本的图片大小相差很多，有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存，不过对于现在的电脑来说这点图片的计算并不算什么。

说了这边多下面就改讲讲怎么讲图片保存为或者转化为Progressive JPEG了。

1、PhotoShop

在photoshop中有“存储为web所用格式”，打开后选择“连续”就是渐进式JPEG。

2、Linux

检测是否为progressive jpeg ： identify -verbose filename.jpg | grep Interlace（如果输出 None 说明不是progressive jpeg；如果输出 Plane 说明是 progressive jpeg。）

将basic jpeg转换成progressive jpeg：> convert infile.jpg -interlace Plane outfile.jpg

3、PHP

使用 imageinterlace和 imagejpeg函数我们可以轻松解决转换问题。

<?php
    $im = imagecreatefromjpeg('pic.jpg');
    imageinterlace($im, 1);
    imagejpeg($im, './php_interlaced.jpg', 100);
    imagedestroy($im);
?>

4、Python

import PIL
from exceptions import IOError

img = PIL.Image.open("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.jpeg"
try:
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

5、jpegtran

jpegtran -copy none -progressive <inputfile> <outputfile>

6、C#

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) { 
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg"); 
    EncoderParameters parameters = new EncoderParameters(3);
    parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
    parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
    parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive); 
    source.Save(@"D:\temp\saved.jpg", codec, parameters);
}

web资源优化之图片加载的时机

Fri, 19 Dec 2014 16:04:51 CST

前言

图片资源是 WEB项目中很重要的组成部分，也是交互设计中一个很重要的体现，往往一张图能胜过千言万语，所谓“一图胜白言”就是这个道理。然后大量的图片也会给服务器带来很大的压力，据统计：图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片，那么问题就来了。如何最大化优化图片资源，图片优化的手段有那些？本章就首先谈谈通过图片的加载时机来优化WEB性能。

即时加载机制

即时加载是最常见的加载方式了，我们一般都是通过给 img标签指定具体的src值，那么等页面渲染的时候，遇到该标签的话，就会下载该指定的URL图片，并且渲染出来。常用的形式如下：

  <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
    <img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
    <img src="http://www.kpbz.net/uploads/allimg/091103/1233HD334-7.jpg" alt=""/>
    <img src="http://pic3.bbzhi.com/xitongbizhi/gaoduibidujingmeigaoqingkuan/computer_kuan_193023_18.jpg" alt=""/>
</body>
</html>

如果在现代浏览器运行上面的代码你会发现以下几点：

大部分浏览器都会并发下载图片，图片的下载没有阻塞。
src的值如果相同，也只会下载一次，也就是说相同的图片，不会多次下载。
图片的下载和渲染会阻塞整个页面的渲染。
图片越大，下载的时间也就越长。

通过上面的几点的阐述，我们可以即时加载的机制运用的场景是：图片量少，页面少于3屏比较适合这种技术，向一般的企业宣传网站比较适合采取这种选型。

预先加载机制

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

和上面介绍的一样，预先加载的原理是预知用户将发生行为，提前加载后用户所需的图片。还不够理解嘛，那假设你是一个爱好动漫的动漫迷，那也应该经常看相应的漫画吧。以下面的漫画为例。

一般，一页的漫画有好几屏，等页面把漫画加载好了，我们就慢慢地品味、鉴赏漫画，慢慢底往下拉动滚动条，看完了当前页，我们按下链接跳到下一页面，重复如此。

我们有没有想过这样的问题：当当前页面加载好了的时候，我们慢慢欣赏漫画的这段时间，能不能用来加载后一页或者两页的漫画呢。当我们看完当前页，进入下一页的时候，由于前面已经加载完毕，页面瞬间加载完毕，这种赶紧，是不是很爽呢。这就运用到了前面前面所说的预先加载技术。

对于预先加载技术的实现，大家可以参考下面帮助文档中第一个链接来根据自己运用的场景来实现。

延迟加载机制

图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。

图片延迟加载的原理：页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow)，计算出可视区域，当图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。

当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器，那么也可以在页面中设置一个小容器，在小容器中也同样可以实现图片的延迟加载。

像淘宝、天猫等电商就大量采用了该技术，因为对它们来说，要展示的图片太多了，即时加载又非常耗时间，而且用户不一定会看完所有的图片。采用延迟的加载基本上就能解决图片过多的问题。

延迟加载的机制实现可以参考 雨夜带刀《图片延迟加载的实现》的文章。如果你使用Jquery的话，它有一个插件也是来解决这方面的问题，github地址为： https://github.com/tuupola/jquery_lazyload/，就本人感觉而言，使用非常简单，文档详细，所以极力推荐给大家用。

PS:由于本文只对核心原理做介绍，并不会过多涉及到代码设计这块。

帮助文档

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

图片延迟加载的实现

Web性能优化之图片优化

Evernote 收购项目 Skitch 推出 iPad 版

Fri, 23 Dec 2011 11:33:29 CST

今年 8 月获得红杉资本 5000 万美元融资领投的 Evernote 收购了 Mac 上最受欢迎的图片分享应用 Skitch，并很快推出了 Android、iPhone 平台版本。昨天，Evernote 宣布，Skitch for iPad 版推出，可免费在 App Store 下载到（下载链接点击这里）。

Skitch 是什么？

Skitch 是一款图片绘制增强并分享的服务，可以新建空白画布，或在现有的照片、网页、截图、地图上涂鸦绘画。之后，可将生成的图片与好友分享，包括 Email、Facebook、Twitter、AirPlay 等平台，且（理所当然地）可以同步到 Evernote 中。它简单易用，适用于快速传递或储存图像信息以及图片社交。

iPad 版有什么特性？

选择 iPad 中的已有照片，或通过摄像头拍摄新照片进行绘制；
自动识别最近通过 Home+Power 键生成的截图；
内置 Web 浏览器，直接截取 Web 页面；
内置地图（Skitch Map）；
新建空白画布；
分享到社交网站；
同步到 Evernote；

提供哪些绘图工具？

手指：用于对某个对象的移动、缩放等操作；
铅笔：最常用的绘画工具；
箭头：高亮标记出某个要强调的对象；
文本：添加文本注释；
形状：圆、矩形、线条等；
剪裁：取大图中的某一块区域；
颜色和粗细：针对画笔的选项；
删除：删除某个对象；

Skitch 是我个人常用的一站式图片编辑分享工具，对于快速传递信息和记录灵感很有帮助（但不要指望它在娱乐和图片增强领域走太远，像美图秀秀或 Camera360 那样）。iPad 版期待已久，毕竟较大的触摸屏上绘图体验会更好。可惜目前的版本主要分享到国外社交网站，如果能加入对国内（新浪微博等）的支持就更好了。

YouTube 演示视频： 点击这里

Skitch 官方网站： http://www.evernote.com/skitch/

您可能也喜欢：
笔记软件EverNote更新记录 (@xbeta)	[EverNote3]一切关乎网路，但还不够快 (异尘行者) (@xbeta)	【版本更新】Evernote for Windows 新增摄像头捕捉功能	Evernote 官方简体中文版网站上线	Delicious 导入 Evernote 的最简单方法
无觅

手机拍照和图片分享：改变甚至击倒柯达？

Tue, 24 Jan 2012 13:00:58 CST

伊士曼柯达公司，似乎就要倒下了。这家世界上最大的影像产品及相关服务的生产和供应商已经开始为申请破产保护做准备，尽管公司还在出售专利和重组业务来避免这种情况的发生，但总体看来，这位巨人或者倒下或者做出重大改变是无法避免的。那么，究竟是谁让柯达变成这样？去年前11个月，数码相机的销售量较去年同期下降17%，但其他厂商依然“健在”。在单反领域，柯达无法和佳能以及尼康这样的领头羊比拼，那是行业内部的竞争，我们也不做讨论，我们来看看柯达的卡片机和胶卷相机是被谁打败。

图：手机拍照和分享功能正在挤压胶卷的生存空间

毫无疑问，智能手机或功能手机抢占数码相机市场是一个原因，除此之外还有什么在挤压数码相机和胶片相机的空间？图片分享似乎正在成为其中一个因素，移动互联网正在扮演着改变传统产业格局的重要角色。

带着手机拍照逐渐满足用户需求

关于手机能否取代相机的讨论已经有一段时间了。不用考虑的太深远，也不用过多的数据，想想你自己的习惯吧。如果你是个开发者，你在参加各种沙龙讨论的时候，是不是越来越习惯掏出手机拍下一张数据珍贵的PPT。如果你是个普通的用户，是不是也开始习惯在游玩的时候用手机留下一个简单的记忆？

当然，这一点依托于手机拍照软硬件的提高，从最初的11万像素、30万像素到现在的卡尔蔡司镜头、800万和氙气灯。NPD的报告显示，其受访者当中使用智能手机进行拍照的比例由2010年的17%增长到2011年的27%，而传统相机拍照的比例则由52%下降到44%。iSuppli公司公布的数据显示，傻瓜式数码相机(DSC)还能畅销大约三年，然后出货量开始迅速下滑，最终被手机所取代。

图：照片分享网站Flickr上传设备数据

美国科技博客ReadWriteWeb作家John Paul Titlow就援引照片分享网站Flickr为例，显示上传到该网站的图片更多的是使用iPhone拍摄的，这一比例远远超过了尼康和佳能等相机。

也许取代单反这样的专业级相机还有很多不可能，但是对于满足日常的拍照需求，手机不断升级的摄像头和成像质量已经开始逐渐满足。而且手机厂商还在不断对终端硬件进行升级，苹果公司一直在申请各种专利，其中包括一些与拍照有关的，比如远距离拍照等等，这些都将继续改变和提高手机的成像能力。

拍照不需要冲洗而需要分享展示

手机拍照的优点绝不仅仅是便携和随时查看这些。

有分析称：柯达错误的认为，人们在拍摄完照片后还会继续将其打印出来。但我们都能直观的看到，这个情况改变的越来越明显。在胶片相机时代，人们拍照的主要目的是留下回忆。照片通常会保留很久。但你不得不承认，分享正在成为人们拍照的更强烈需求。这种分享已经不仅仅是在朋友来时拿出一本相册，用户要求随时随地并随心的向周围展示自己所看见的一切。

图：Twitter分享图片数量2011年增长421%

2011年，Facebook的照片上传总量达到了大约700亿张，一些人还预计该数字接近1000亿张。2011年Twitter用户在使用图片分享功能上也出现显著增长。社交搜索引擎Topsy提供的数据显示，Twitter上分享的图片数量在2011年增长了421%。仅在去年12月份，Twitter上分享的图片数量就达到了5840万张。

Facebook、Twitter这些社交网络推动了用户对于照片分享的积极，而iPhone和用户对于移动互联网的理解和接纳又快速促进Instagram等大量的图片或者照片分享应用的兴起。这里面，首先要说到的就是iPhone，还记得那个著名的微博段子吧，iPhone用户三大爱好，拍照、游戏、发微博：一方面，它最开始为用户提供接近卡片机的成像能力。另一方面，它也最开始让用户接触和理解移动互联网时代分享的概念。

现在来看，照片分享更多的是用于分享或者说显摆，而不是简单的回忆。大家看完之后也会在网站或者微博上留下个人的“意见”或者是转发给更多的人。其他的手机也一样，虽然也许用户体验不同，但都为用户提供了更加直接的拍照并分享的手段，这比相机的优势明显的太多。在同等成像能力或者差距不大的情况下，用户的选择显而易见。

总的来看，业内的强大对手打了柯达一拳，然后手机带来的移动互联网和拍照分享又给了摇摇晃晃的柯达一脚。虽然这不是直观的去改变传统产业一角，但也可以从中看到移动互联网对于人们生活的改变。对于开发者来说，除了各种特效应用和图片分享，能否从中找到更多的方向和模式？比如图片与游戏的结合？

via CSDN。

Tech2IPO新服务： HT实验室 | 创业者服务 | 投资人服务

2011年度最变态的迷宫难题

Wed, 30 Nov 2011 14:22:34 CST

下面大家将会看到的是一个极其简单而又极其复杂的“迷宫”，这无疑是我在本年度见到的最变态的谜题：从左边入口处的 2011 进去，在迷宫里转悠，最后变成 2012 从右边出来。你可以在迷宫里转圈，可以重复之前走过的路，但不能往回退着走。

你能成功走出来吗？

放弃吧，答案是

2011 +7 ÷2 +7 ÷2 +7 -5 ×3 ÷2 +7 ÷2 +7 ×3 -5 ÷2 +7 ÷2 +7 -5 ×3 -5 ×3 ÷2 +7 -5 ×3 ÷2 +7 -5 = 2012

这个变态的谜题来自 Holiday Puzzles 2011 ，作者是 Erich Friedman 。
提前祝大家新年快乐。

JavaScript图片预加载应该注意的几点

Mon, 16 Jan 2012 15:03:07 CST

下面的代码是前段时间无聊的时候在论坛闲逛看到的一篇关于图片预加载的文章，其实写的不错，代码如下：

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载<span id="more-844"></span>
img.src = url;
 
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback(img);
return; // 直接返回，不用再处理onload事件
}
 
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback(img);
};
 
};

在网上搜索了一下相关文章，大体上都是这个思路。

这个方法功能是ok的，但是有一些隐患。

1 创建了一个临时匿名函数来作为图片的onload事件处理函数，形成了闭包。

相信大家都看到过ie下的内存泄漏模式的文章，其中有一个模式就是循环引用，而闭包就有保存外部运行环境的能力（依赖于作用域链的实现），所以img.onload这个函数内部又保存了对img的引用，这样就形成了循环引用，导致内存泄漏。（这种模式的内存泄漏只存在低版本的ie6中，打过补丁的ie6以及高版本的ie都解决了循环引用导致的内存泄漏问题）。

2 只考虑了静态图片的加载，忽略了gif等动态图片，这些动态图片可能会多次触发onload。

要解决上面两个问题很简单，其实很简单，代码如下：

img.onload = function () { //图片下载完毕时异步调用callback函数。
img.onload = null;
callback(img);
};

这样既能解决内存泄漏的问题，又能避免动态图片的事件多次触发问题。

在一些相关博文中，也有人注意到了要把img.onload 设置为null，只不过时机不对，大部分文章都是在callback运行以后，才将img.onload设置为null，这样虽然能解决循环引用的问题，但是对于动态图片来说，如果callback运行比较耗时的话，还是有多次触发的隐患的。

隐患经过上面的修改后，就消除了，但是这个代码还有优化的余地：

if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback(img);
return; // 直接返回，不用再处理onload事件
}

关于这段代码，看相关博文里的叙述，原因如下：

经过对多个浏览器版本的测试，发现ie、opera下，当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们试图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引起图片的onload事件，因此上边的代码在它们里边不能得以实现效果。

确实，在ie，opera下，对于缓存图片的初始状态，与firefox和safari，chrome下是不一样的（有兴趣的话，可以在不同浏览器下，测试一下在给img的src赋值缓存图片的url之前，img的状态），但是对onload事件的触发，却是一致的，不管是什么浏览器。产生这个问题的根本原因在于，img的src赋值与 onload事件的绑定，顺序不对（在ie和opera下，先赋值src，再赋值onload，因为是缓存图片，就错过了onload事件的触发）。应该先绑定onload事件，然后再给src赋值，代码如下：

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.onload = function(){
img.onload = null;
callback(img);
}
img.src = url;
}

这样内存泄漏，动态图片的加载问题都得到了解决，而且也以统一的方式，实现了callback的调用。

您可能也喜欢：
發掘你平常沒有注意的美麗角落 – Patrik Lindell (@mydesy)	10件住在宇宙需要注意的事情 (@mydesy)	JS照片墙代码实例	20个将JavaScript推到极致的网站	10个超级实用的JavaScript开发工具
无觅

制作华丽的全景图 - Panorama Maker Pro 6.0.0.94中文绿色版

Tue, 16 Apr 2013 01:18:00 CST

ArcSoft Panorama Maker 是一款高质量的 专业拼图程序，可方便快捷地将一系列重叠拍摄的图片自动拼接成一幅精美的全景图片。

Panorama Maker 支持多种 RAW 格式，可以与最新的数码相机密切合作。除此之外，它还为专业用户提供了贴心的手动微调选项，能够调整与编辑最后生成的图片，包括修改拼接点、拼接位置以及图片的亮度、对比度等。

ArcSoft Panorama Maker 6 支持五种专业的全景图拼接方式：自动、横向、360°、平铺、纵向等拼接模式，即 Auto、Horizontal、360、Tile 及 Vertical，每一种模式下都可以 手动调整匹配点和融合区域，打造完美全景图，并支持 3D 预览，包括 PageFlip、Line Interleave、Checkerboard、Anaglyph 等 3D 预览效果，可保存为 *.MPO 3D 图片格式。

使用说明：已经做成绿色版，使用前先运行 !)PMKPorable.exe 完成初始化安装，主程序为 PMK.exe，软件为多国语言版，自动显示简体中文，当前版本 ArcSoft Panorama Maker 6.0.0.94，经测试可以保存完整图片。

本站还介绍过另一款全景图制作工具 Zoner Panorama Maker，可以试用下，另外也推荐 SoleilNeon 的全景图像制作教程。

Panorama Maker 6 还支持从视频文件创建全景图，它自动将影音片段分离为静态图片帧，你可以从中选择要合成的图片，并拼接为全景美图，支持读取 MPG、MPEG、AVI、MOV、MP4、M2TS 和 MTS 等格式的视频。

图片自动排序和无缝拼接
支持手动对齐拼接点与手动调整拼接位置
添加边框、标题与版权信息至拼接后的图片，用以打印与共享
提供微调控键，调整拼接图片的亮度与对比度并进行裁剪与导正操作
支持多种 RAW 格式
在水平、垂直与 360°全景图模式下，支持不限制图片数量的拼接操作
支持横幅和分页打印图片

ArcSoft Panorama Maker 6 新增功能：

Perfect panoramas automatically
More RAW formats are supported
OpenCL Optimization Enabled
3D Full Screen Preview in four modes: PageFlip, Line Interleave, Checkerboard, Anaglyph
Supports ATI Eyefinity Technology
Save as 3D Picture Format (MPO)

Panorama Maker 6 Create perfect panorama with your photos and videos: Stitch photos and videos into panoramas - view it in 3D!, Powerful one-click enhancement tools and built-in online Print Service, Various export options including 3D MPO, etc.

Panorama Maker Pro 下载信息

官方网站： www.arcsoft.com
解压密码：www.portablesoft.org
压缩包MD5: 1B1C69639AC8A1124A3D55C381E63558

开始下载 ArcSoft Panorama Maker 6.0.0.94 中文绿色版
ArcSoftPanoramaMaker_6.0.0.94_PortableSoft.rar | 28.9 MB
来自精品绿色便携软件 | 进入软件下载页面 | 历史版本

开始下载 ArcSoft Panorama Maker 5.0.0.35 中文绿色版
ArcSoft.Panorama.Maker_PortableSoft.7z | 18.5 MB
来自精品绿色便携软件 | 进入软件下载页面

网页设计中图片格式的选择技巧

Tue, 16 Apr 2013 01:29:45 CST

网页设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。
以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：

相信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是，选择 GIF 后的输出结果看起来变得很糟，于是 PNG （24）似乎突然间风行了起来，不论图档尺寸是不是因此多了好几倍。

JPEG
由于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规定为 8.3 的格式，因此 JPEG 的附档名被缩写为 .JPG。JPEG可以说是人们最熟悉的图档格式了，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩（lossy compression）的图档格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降低图档的档案大小。
就如这些使用 JPEG 的设备一样，JPEG 非常适合作为储存像素色彩丰富的图片、例如照片等等，这些图片即使有些微的失真也不容易轻易的察觉：而反过来说 JPEG 并不适合用来储存线条图、图标或文字等等有清晰边缘的图片
多次重复进行 JPEG 的图档的储存将会永久性地破坏图片中的细节。

GIF
Gif 在许多特性与表现上都与 JPEG 有着相对的特性。GIF 使用无损压缩格式（Lossless Compression），但却限制了色彩表现能力、能够有效地节省档案尺寸。GIF 只拥有 8 位的颜色深度信息，所谓的 8 位是指 2 的 8 次方也就是 256 色，当你的图片中出现的色彩在 256 色以内时，使用 GIF 可以得到相当好的输出质量、同时兼顾了档案大小。因此 GIF 非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出。
另外 GIF 同时还支持透明背景、以及动画图档格式，并且几乎不用担心支持性的问题：几乎 100％的浏览器都支持它。

由于 JPEG 与 GIF 有着如此不同的特性，因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档。
当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条时，选择 JPEG 可以得到最好的输出结果，像是照片就是最好的例子：

（左图：Photoshop 输出 JPEG 默认值：品质：高，压缩质量 60％、优化输出。右图：Photoshop 输出 GIF 默认值：256色、扩散性混色）

当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时，GIF 是很完美的选择，档案小、画质又精美。

（上图：Photoshop 输出 GIF：64色、扩散性混色。下图：Photoshop 输出 JPEG 默认值：品质：高，压缩质量 60％、优化输出）

PNG
PNG 最初的开发目的是为了作为 GIF 的替代方案的，作为做新开发的影像传输文件格式，PNG 同样使用了无损压缩格式，事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的。
PNG 分为 PNG-8 以及 PNG-24 两种格式，PNG-8 的特性很接近 GIF ，支持 256 色以及透明背景的特性。而 PNG-24 则支持了多达 160 万个色彩。

虽然 PNG 不支持动画，但是 PNG-24 支持了Alpha 透明效果，这可以说是 PNG-24 最令人眼睛一亮的地方了。也就是说使用 PNG 输出图档时，可以有效的支持不同的透明度效果了。这对网页设计师来说无疑是一个好消息，像这张图片其实是使用了三张 PNG-24 的图片在网页中排版出来的效果：

在大部分的情况下，设计师必须根据图片需求来选择不同的图档格式，并且对其做适当的调整。虽然 PNG-24 看起来很完美，但是相应的当然就是档案大小的增加。另外还有就是浏览器支持度的问题，虽然现在几乎大部分的浏览器都支持了 PNG-24 格式，但不幸的是 IE6 是不支持透明 PNG 图档的，现在依然有相当的使用者在使用 IE6 或更早的版本，虽然比例会越来越少，但是设计师多少必须将其考虑其内，是否考虑使用 GIF 替代，或是在程序端透过 script 的方式来支持透明 PNG 格式。

原文： dclick.fourdesire.com/

======== 关于优设网========
“优设网uisdc.com”是一个分享网页设计、无线端设计以及PS教程的干货网站。

特色推荐：
设计讲座：定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音（YY频道： 15335158）分享实战经验。
设计微博：我们拥有粉丝量25万的人气微博 @优秀网页设计 ，欢迎大家关注及时获取设计资源。
设计导航：史上最赞最全面的设计师网址导航： http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的“福利”吗？
添加优秀网页设计 微信号：【youshege】优设哥的全拼
您还可以扫描下方二维码快速添加：

新一代的互联网图片格式：WebP

Sat, 18 May 2013 17:15:34 CST

今年的的Google I/O 大会中再次提到了WebP，在此补充下相关的知识。WebP是Google推出的一种同时提供了有损压缩与无损压缩的图形档格式。目前互联网上传输的数据有65%都是图片，WebP就是出于减少数据量、加速网络传输的目的而开发的。为了改善JPEG的图片压缩技术，Google在购买On2 Technologies后使用了一种基于 VP8编码的图片压缩器，利用预测编码技术，发展出来了WebP格式，并以BSD授权条款发布。同时WebP还采用了一种基于RIFF的非常轻量级的容器。这种容器只会给每张图片增加20字节，但能让图片作者保存他们想要存储的元数据。

WebP最初在2010年发布，目标是在最小的压缩损失下，提供网络传输用的开放图片格式，最直接的竞争者就是已经流通多年的图片文件格式- JPEG。WebP希望能够达到和JPEG同水平的图片质量，但是更小的文件，以减少图片档的传送时间。

根据Google自己的测试，在有损压缩的状况下，WebP比同样画质的JPEG少了25% ～ 34%的文件大小。而在无损压缩的情形中，比起用libpng产生的PNG图片，WebP少了34%的文件大小，也比用pngout再处理过的PNG图片少了26%的文件大小。Google还建立了一个在线图片库，任何人都可以前去浏览转换之后的WebP图片和JPEG原图质量的比较。其中WebP图片现在是被封装在PNG容器中的，这样一般的浏览器就都可以正常访问。如果需要将现有图片转换成WebP，可以使用 Google提供的工具。

目前只有Google Chrome和Opera浏览器原生支持WebP格式，而Google Chrome自12版开始支持WebP的渐进式解码功能。此外所有可以原生播放WebM图像的浏览器，也可以通过javascript来显示WebP图像。开源图片浏览工具Ez看图也可以支持查看WebP图像。

如何在你的网站上使用WebP图片，让电脑可直接查看WebP图片？

WebP的优势显而易见，但缺少主流浏览器的支持，使得它目前仍然无法推广。大多数浏览器自身无法解码WebP格式，但可以交给我们来实现！借助Flash Alchemy技术，我们完全可以实现高效快速的解码。具体实现方法为：

下载三个文件：WebP.js，WebP.swf和WebP.htc（下载地址），并将其传至服务器上：

在<body></body>之间插入如下代码，插件将会捕捉页面中使用WebP格式的 img元素，并用 Flash 进行替换，即可使用WebP了。

<script type=”text/javascript” src=”WebP.js”></script>

目前版本的图像的解码及显示都在Flash中完成，因此在CSS里设置的背景图片无效。

当然，作为JPEG格式的替换，只有对较大的图像使用才有意义，否则过多的解码将消耗大量的资源。

参考链接： https://developers.google.com/speed/webp/?hl=zh-CN

雷锋读图：两百款Android手机上的淘宝

Fri, 02 Nov 2012 09:11:06 CST

随着移动互联网的发展、智能手机的普及，日常生活中，那些曾依托于电脑与传统互联网的生活已经慢慢的转嫁到移动终端上。包括网购、转账、订票、旅游查询还有社交活动，都能通过移动互联网得以满足。

淘宝就曾宣布，通过淘宝手机客户端查询商品、查看物流的日用户超过200万，而Android客户端就占了其中的44%，每日有将近百万的用户在使用淘宝Android客户端。但是在Android碎片化严重的今天，并不是每一个用户都能享受到同样的网购体验。

在由Testin测试的200款Android手机中，淘宝手机客户端的适配兼容性达到100%。事实证明，对测试方面投入足够的资源，面对碎片化严重的Android，仍有适配所有机型的可能性。目前还有什么版本的Android系统仍未能安装淘宝手机客户端么？

200台参与测试的手机中，HTC A315C启动淘宝足足使用了9.99秒，这点时间够让一个非网购“中毒”用户考虑放弃购买计划了。看来购买HTC A315C有助于节省网购开销，预防产生剁手的念头。

在内存占用、CPU损耗方面三星的手机都表现出了不俗的优势，或许，当用户在对手机购买方面仍没有自己的主见，选择一个可靠的牌子还是一个不错的选择。

Warlial @雷锋网

404-根据相关的法律法规和政策，“晓龙”搜索结果未予显示

小tip: 使用CSS将图片转换成黑白的

Sun, 19 Aug 2012 20:41:19 CST

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=2547

//zxx: 最近很积极地折腾手机页面的些东西，加上其他一些人生重要的事，所以木有更新。

可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的( filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。

CSS3 greyscale 滤镜实现

如下测试代码：

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;
}

HTML代码：

<img src="mm1.jpg" />
<img src="mm1.jpg" class="gray" />

如果你手上的浏览器是Chrome18+, 您可以狠狠地点击这里： CSS3 greyscale 滤镜与照片黑白

可以看到类似文章一开始展示的黑白对比效果图。

其他些浏览器，如FireFox很快就会跟上实现。当然，要实现（比方说）FireFox 4浏览器上照片变黑白的效果，也是可以的。可以使用SVG的灰度滤镜效果。

SVG滤镜实现

我们新建一个空白文本文件，比如说： gray.txt. 拷贝进去如下的XML代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

然后，修改后缀 .txt → .svg. 然后就可以调用了~~

如下CSS调用代码：

filter: url(gray.svg#grayscale);

然后，效果就出来了。如果你手上的浏览器是FireFox4+，您可以狠狠地点击这里： SVG滤镜实现照片黑白demo

别忘了IE浏览器

IE下实现上面已经提过，就是：

filter: gray;

至少IE7~9都是支持的。最近较懒，IE6懒得去测，支持与否不知。经验来看，应该是支持的。

我需要一个一统江山的方法

一统江山（完全兼容），如果单纯想通过CSS，也是可以的，你所要做的就是：天天拿个鱼竿去黄浦江钓鱼，年复一年，日复一日……然后，两年后，只要两年，把上面两个demo页面F5一下，就可以了！很简单吧！

如果嫌上面的做法过于伦敦，且你也不是一根筋，到是有个一统江山的方法，不过不是CSS的干货，一个貌似有点名气的 Greyscale.js。

用法很简单，引用JavaScript文件，如下：

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

然后，一句话：

grayscale(document.getElementById("thisImage"));

或DOM元素集：

grayscale(document.getElementsByTagName("img"));

如果你喜欢使用jQuery，还可以使用：

grayscale($("#thisImage"));

很简单吧。

实现原理：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的 getImageData方法，然后对每个像素点进行灰度转换~~

因此，在现代浏览器下，对于该方法，图片的灰度处理有两个局限性：
1. 速度。300*300这张一般般大小的图片变灰就要数秒之久；
2. 跨域。安全性机制，无法转换跨域的图片为黑白色。

您可以狠狠地点击这里： Greyscale.js照片变灰兼容性实现demo

截图跟上面的一致，略。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
http://www.zhangxinxu.com/wordpress/?p=2547

（本篇完）

有话要说，点击这里发表评论。

道别盗版，ACDSee 免费版正式来临

Tue, 14 Aug 2012 19:12:31 CST

ACDSee 一直在图片管理上占有很大的优势，但价格不菲的它让很多人望而却步，不是用盗版就是使用 picasa或者美图秀秀代替。随着越来越多优秀的免费图片管理工具的出现，ACDSee也开始不再淡定了，终于推出免费版的ACDSee.

其实很多人使用ACDSee 也是用于查看图片和管理图片而已，对于大部分高级的编辑功能，显然大部分国内也不怎么用。现在既然ACDSee 发布了免费的版本，依然对ACDSee 有需求的可以尝试此版本。

ACDSee 免费版虽然不及收费版的功能强大，但简单的功能都包括了，如支持主流格式的图片查看，图片放大缩小功能，图片旋转功能，图片格式转换功能……ACDSee 免费版虽然是免费的，但也需要进行简单的注册，通过邮箱验证获取激活码即可。

经笔者试用，功能稍微有点弱。但完成普通的图片查看是木有问题。体积只有12.3MB，中规中矩。但这个体积对于picasa或者美图秀秀来说，着实没什么优势，建议ACDSee稍微增加些简单的编辑功能进去。

官方下载： http://www.acdsee.com/en/products/acdsee-free

订阅本站： http://feed.x-berry.com/
本文链接： http://www.x-berry.com/acdsee-free
本站文章除注明转载外，均为本站原创编译。转载请注明本文链接！

FastStone Capture绿色便携版：极品屏幕截图工具

Mon, 23 Apr 2012 11:48:06 CST

FastStone Capture 是一款极好用的图像浏览、编辑和截屏工具，支持 BMP、JPG、JPEG、GIF、PNG、TIFF、WMF、ICO 和 TGA 在内的主流图片格式，其独有的光滑和毛刺处理技术让图片更加清晰，提供缩放、旋转、减切、颜色调整功能。

FastStone Capture 7.1 已经支持 固定区域截图和 重复上次截取功能，也增强了滚动窗口截图性能，支持到各大浏览器的最新版本。现提供便携版：FSCapture.exe 为 飞越时空汉化版，FSCapture_en.exe 和 FSRecorder_en.exe 为英文原版文件，绿色便携，配置自动保存。

作为一款极其优秀好用的屏幕截图软件，FastStone Capture 具有体积小巧、功能强大、操作简便等优点，其方便的 浮动工具条和便捷的 快捷键堪称完美结合，截图后的 保存选项也特别丰富和方便，同时支持图片转换 PDF，满足各种需求，不过有一点不太满意，截图后需要在新窗口中编辑图片。

另一款我用的较多的截图工具是 TNT Screen Capture， PicPick 也很不错，它的 固定区域截图模式很好用，再强大一些的截图软件可以看看 Ashampoo Snap 或是 SnagIt。

FastStone Capture 7.1 更新说明：

    *  屏幕录制器：添加暂停/恢复支持；
    *  屏幕录制器：可在 Windows Vista/7/8 系统下直接录制扬声器；
    *  屏幕录制器：Improved performance to reduce the number of lost frames；
    *  增强打印对话框，现在可以同时打印页眉页脚；
    *  增强滚动窗口截图功能；
    *  增强与 Windows 8 的兼容性。

FastStone Capture is a powerful, lightweight, yet full-featured screen capture tool that allows you to easily capture and annotate anything on the screen including windows, objects, menus, full screen, rectangular/freehand regions and even scrolling windows/web pages.

FastStone Capture 下载信息

官方网站： www.faststone.org
解压密码：www.portablesoft.org
压缩包MD5： 3C9968836A7D6E6154681AB3CD16AF6A

开始下载 FastStone Capture 7.1 汉化/英文绿色便携版
FastStone.Capture_7.1_PortableSoft.rar | 3.45 MB
来自精品绿色便携软件 | 点击这里进入下载页面

你可能喜欢

PADMAG@新浪微博近期精选(103011)

Sun, 30 Oct 2011 17:48:26 CST

【插画】《The hope of the bear》，来自英国插画师Tincat，官网说明里写道，“我从小最喜欢的动物就是熊，这个场景展现了一头熊希望玩具泰迪熊能和它玩耍”，官方网站：http://t.cn/Sh09l1。

PADMAG的新浪微博（@视觉艺术）：http://weibo.com/padmag，点击阅读全文可见更多内容。

【摄影】《Night’s Steam》，来自法国摄影师Gr間oire Brossard。

【摄影】《Ballerinas》，来自澳大利亚女摄影师Caitlin Jane McColl，她的Flickr：http://t.cn/S7PW6J。

【创意】10月5日，巴黎时装周Louis Vuitton 2012春季时装发布会开场，整体纯白色调，T台中心是一个白布包裹的巨型圆筒，布筒升起后露出一个众多模特坐着的巨大旋转木马，http://t.cn/S7P8cC。

【视频/创意】Jordan Melo 8运动鞋2011年10月在纽约哈得逊河上举行的灯光发布会“NYC Flight Event”，官网：http://t.cn/ShosPb。您也可以直接前往优酷网观看：http://v.youku.com/v_show/id_XMzE1NzY4MjMy.html。

【创意】2005年英国的一幅控烟广告，文案：If you won’t give up smoking for your lungs, heart or throat, maybe you’ll do it for your penis.（如果你不会为你的肺、心脏或咽喉戒烟，也许你会为你的小鸡鸡戒烟。）旁边小字阐述了吸烟对生殖系统的影响，创意来自伦敦AMV BBDO。

【产品设计】PXL吊灯，来自瑞典家居品牌Svenssons & Lammhult，直径32厘米，高39.5厘米，材质是铝和钢，售价高达8295瑞典克朗（约8119RMB），另有台灯款。

【摄影/艺术】英国《每日电讯报》10月26日的Pictures of the day：约1000名模特裸体漂浮在死海水面上，这是热衷拍摄大型裸体摄影的美国摄影师Spencer Tunick的最新作品。

【包装设计】多年来北极熊一直出现在可口可乐的广告中，美国可口可乐公司即将推出特别包装，改变标志性的红色，换成白底红字，希望通过行动拯救自己品牌的吉祥物，该特别包装将上架持续4个月，原文地址：http://t.cn/ShbW0v。

【插画】来自法国插画师Edrice Waliyar的一幅作品，名为《The Peach and the Plumber》桃子公主和马里奥，作品站点：http://t.cn/SPa44J。

【产品设计】来自FlipSideFlipFlops的一款创意拖鞋，“Follow me”，多色可选，售价17.95美元，他们的Etsy店铺：http://t.cn/SPHy2r。

【摄影】美国女摄影师Laura Galley的一幅作品，名为《Travellers Of Light And Space》，她的Flickr：http://t.cn/SPHeys。

【设计】《Sneaker Tectonics》（运动鞋构造学），肌理是玻璃、钢铁、混凝土和木材，来自英国设计师Chris LaBrooy，官方网站：http://t.cn/7PfUB，应该是3D制作的，并非实际项目。

Tumblr上的一张图。

【摄影】澳大利亚布里斯班附近的一家农场，两只小海龟(?)和一只大草莓相遇。海龟们只有十几天大，而该地区是澳洲黄金海岸最大的草莓种植区，摄影师Jamie Hanson。

【设计/插画】巴西设计师Elder Lukas Doraciotto对电影《Black Swan》（黑天鹅）的海报再设计，作品站点：http://t.cn/Sh7VNU。

[来自iPc.me] 现实写照组图 – 两个人，两种选择，都是过了一辈子。你选了过程还是结果？

Tue, 18 Oct 2011 14:53:04 CST

人的一生应该怎样度过？我们一生到底在追求什么？我们的一生，是为了一个美好的结果，还是为了一个美好的过程？或许你我都该认真思考……

[ 我要围观楼主.... ]

[ 请大家更新订阅地址 http://feed.ipc.me ]

iPc.me 猜你可能还会喜欢：

Polina Rabtseva摄影作品

Thu, 20 Oct 2011 14:44:08 CST

Polina Rabtseva，白俄罗斯女摄影师，现居明斯克，官方网站：http://p0lly.com/

点击阅读全文可见她的更多作品。[via]

Lachlan Bailey摄影新作：Anais Anais

Wed, 26 Oct 2011 10:09:22 CST

Lachlan Bailey，澳大利亚摄影师，现居纽约，为包括中国版《Vogue》在内的众多杂志拍摄图片，广告拍摄客户包括路易威登等，官方网站：http://www.lachlanbailey.com

这系列作品名为《Anais Anais》，模特Anais Pouliot，为英国《Twin》杂志Issue V所拍摄，点击阅读全文可见该系列的另几张。[via]

鲍雁洲日本街头摄影作品

Thu, 27 Oct 2011 23:57:12 CST

鲍雁洲（Darth Pau），中国摄影师，现居日本，作品站点：http://emossical.tuchong.com/

他的相册《Snap Shot》已有上千张作品，大多是街头摄影，包括中国和日本，颇具风格并能长期坚持不懈，值得一看，点击阅读全文可见其中的部分作品，感谢来自图虫网的官方投递。

David Terrazas摄影作品

Sat, 08 Oct 2011 14:20:13 CST

David Terrazas，西班牙摄影师，出生于1980年，现工作和生活在曼谷和马德里两地，官方网站：http://www.davidterrazasphotography.com/

点击阅读全文可见他的更多作品。[via]

伯克利大学学生开发图片验证码Picatcha终结文字验证码CAPTCHA

Sat, 22 Oct 2011 11:09:11 CST

不知道朋友们会不会遇到，反正我会经常看不清楚一些安全验证码中的字母。Picatcha则打算用图片验证来击败过时而且难以分辨的CAPTCHA。

比如说某网站采用了Picatcha的解决方案，那么你在注册时就会看到选择图片验证。一般情况是呈现给你8张图片，让你选出其中“带有一本书或者以上的所有图片”或者“一张CD或者以上的所有图片”等等。通用的分析是选择图片的过程往往会让人赏心悦目，因而会鼓励用户的注册行为，而不是像文字那样吓退用户。

另外创始人Satish Polisetti还表示图片识别对于人来说非常容易，但是对于机器来说却非常难，因此图片识别相较于文字组合识别来说会更加安全。此外他还给出了一组数据：一个70行的代码或者任何OCR软件就可以很容易的攻破文字验证码，另外采用文字验证码也会使得超过18%的用户放弃继续注册你的网站。

据悉，Pictcha是伯克利大学学生Satish和Dhawal Mujumdar的毕业项目。他们在学校里做好了所有的基础工作毕业后就成立了公司。目前该网站还处于私测阶段，已经有超过20个网站正在进行测试。

Via Launch.is

除非注明，本站文章均为原创或编译，转载请注明：文章来自36氪

李冰冰《生化危机5》“艾达·王”发型造型照

Wed, 19 Oct 2011 11:32:24 CST

和文·迪塞尔一样，米拉·乔诺维奇（Milla Jovovich）也喜欢为自己制作的电影亲自上阵做宣传，这方面像Facebook、Twitter的确为他们帮了不少忙。继在Twitter上公布李冰冰将加盟《生化危机5：报应》（Resident Evil: Retribution）扮演“艾达·王”（Ada Wong）之后，今天她又在自己的微博上公布了李冰冰试装照片（暂时只有发型）。

您可能也喜欢：
图说Android碎片化：这玩意到底有多严重？	Android手机管理软件客户端耗电量对比	云测网络：京东Android客户端表现尚可，部分机型使用存在风险	Android不会因碎片化而消亡	Android开发真苦逼因碎片化购400款手机
无觅