LOFTER-网易轻博

接手这个团队之初时lofter的签名是发现并解决问题，

到现在为止一年了，解决了多少问题，又还有多少问题没解决？同时又带来了多少问题？

虽然重构了流程，独立的把前端资源从项目中摘出来单独处理，并且补充建立了前端的测试环境，还解决了资源的合并压缩等，以及反向调试等功能；

虽然创建了自动化测试系统，对业务做了足够的保证，同时还单独摘出截图功能做了对比；

虽然创建了大量的复用代码碎片；

但是还有太多的事情没有解决，在这儿记录一下，当做今年的目标：

1：加强本地开发环境，从vm代码开始开发和调试

2：创建代码碎片管理的系统，兼容各种写法的代码片段

3：升级发布功能，增加收集器功能

4：调整cms代码框架，把所有代码按照全局-->频道-->项目的层级来划分并归类

5：大力普及html5，css3，并在项目中更多的试用

6：通过pv，uv，cdn日志等数据来优化前端框架

7：打造技术空间，创造技术团队氛围

大家都知道canvas很好很强大，入门资料可以看mozilla developer center的Canvas教程，在这里就不多说了。

这里只是希望利用canvas的图像处理功能来创建ios图标风格的图片，就像下面这样：

接下来就开始吧：

1. 准备原始图片
   
   将它绘制到canvas里的方法也很简单，首先在html中得有一个canvas标签：
   <canvas id="mycanvas" width="437" height="400"></canvas>
   然后是javascript代码：
   var context = document.getElementById("mycanvas").getContext("2d");
   var img = new Image(); 
   img.onload = function(){
       context.drawImage(img, 0, 0);
   }; 
   img.src='http://www.lofter.com/blog/shellchine/new/text/chihuo.png';
   
2. 为图片裁剪圆边，简单的思路就是在canvas中画个圆角矩形clip一下，但问题是canvas没有给我们提供原生的圆角矩形函数，只好自己动手，丰衣足食了，先是定义一个圆角矩形绘制方法，然后用它来对canvas裁剪一下边界：
   CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
       if (w < 2 * r) r = w / 2;
       if (h < 2 * r) r = h / 2;
       this.beginPath();
       this.moveTo(x+r, y);
       this.arcTo(x+w, y,   x+w, y+h, r);
       this.arcTo(x+w, y+h, x,   y+h, r);
       this.arcTo(x,   y+h, x,   y,   r);
       this.arcTo(x,   y,   x+w, y,   r);
       this.closePath();
       return this;
   };
   context.roundRect(0, 0, 437, 400, 40).clip();
   得到的效果如下：
   
   
3. 接下来为图片添加高亮效果，基本思路是使用蒙板图片叠加。说起来很简单，但这个图片叠加里是有很多讲究的，用不好的话就是差之毫厘，谬以千里了。
   首先我们得了解canvas为我们提供了哪些图片叠加方法，以下表格列出了目前canvas中可用的globalCompositeOperation，可将你的canvas context对象设置globalCompositeOperation属性为以下的任何一个值(默认为source-over)。图中蓝色矩形表示原有内容(destination)，红色圆形表示新图形(source)：
   

   source-over: 默认设置，新图形会覆盖在原有内容之上

   

   destination-over: 在原有内容之下绘制新图形

   

   source-in: 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的

   

   destination-in: 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的

   

   source-out: 只有新图形中与原有内容不重叠的部分会被绘制出来

   

   destination-out: 原有内容中与新图形不重叠的部分会被保留

   

   source-atop: 新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上

   

   destination-atop: 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形

   

   lighter: 两图形中重叠部分作加色处理

   

   darker: 两图形中重叠的部分作减色处理
   (注：新的canvas标准已无此定义).

   

   xor: 重叠的部分会变成透明

   

   copy: 只有新图形会被保留，其它都被清除掉

   

   现在我们再拿出要叠加到原始图片的蒙板图，是个半透明的灰度图(这张图是用imagemagick生成的，ps当然也可以，有闲再写下怎么用canvas来画)，如下：
   
   对照前面的列表看来，在canvas默认提供的图片叠加方法，可能符合我们要求的也只有默认的source-over了，虽然觉得不是想要的，还是硬着头皮试试吧：
   
   
4. 试完了，果然发现，这真的不是我们想要的~~~
   看来canvas默认提供的图片叠加效果是没戏了。幸好canvas同时还提供了图片像素级操作的接口，我们可以用它来实现更复杂的图片叠加算法，如Multiply, Screen, Bumpmap, Divide, Plus, Minus, ModulusAdd, ModulusSubtract, Difference, Exclusion, Lighten, Darken 等等。在这里，我们只需要实现Screen算法。
   实现算法前，首先看看我们要用到像素级的操作方法，包括：
   
   • createImageData(w,h)：可以新建一个w*h尺寸的新的ImageData，不过也可以使用参数(anotherImageData)来创建【firefox5开始支持】。
   • getImageData(x,y,w,h)：表示起点x,y,尺寸w,h。可以获取canvas.context中在参数范围内的ImageData。
   • putImageData(ImageData, dx, dy [, DirtyX] [, DirtyX] [, DirtyWidth] [, DirtyHeight])：imageData包含了图像的width,height, 还有一个CanvasPixelArray。dx, dy表示绘图起始位置。相对于canvas区域左上角。后面四个可选参数：表示可见区范围。相对于起绘点，即上面的参数dx,dy表示的点。缺省为0,0,ImageData.width,ImageData.height。
   然后再了解一下什么是Screen算法，简单地说，这是一种像素级别的图形运算，就是将原图和新图的像素值(0-255)进行数学计算后得到最终图像的像素值，以Screen为例，就是Final = 1-(1-Src)*(1-Dest)
   实现函数如下：
   function imageData(url, fn){
       var canvas = document.createElement("canvas");
       var ctx = canvas.getContext("2d");
       var img = new Image();
       img.onload = function(){
           var ht = img.height;
           var width = img.width;
           canvas.width = width;
           canvas.height = ht;
           ctx.drawImage(img, 0, 0);
           if(typeof fn == 'function'){
               fn(ctx.getImageData(0,0,width, ht));
           }
       };
       img.src = url;
   }
   
   imageData('chihuo_r.png', function(data1){
       imageData('ios-over.png', function(data2){
           var pix1 = data1.data;
           var pix2 = data2.data;
           for (var i = 0,n = pix1.length; i < n; i+=4) {
               var alpha = pix2[i+3]/255;
               for(var j = i; j < i+3; j++){
                   pix1[j] = 255*(1-(1-pix1[j]/255)*(1-pix2[j]*alpha/255));
               }
           }
           var context = document.getElementById("mycanvas").getContext("2d");
           context.putImageData(data1,0,0);
       });
   });
   这次得到的效果正是文章开头所示的样子了。
   

这个例子只是canvas图像处理功能的牛刀小试，事实上，利用canvas提供的像素级操作方法，我们便可以封装出大量的图像处理滤镜，实现photoshop的许多酷炫的特效，这是后话，暂且不表。