AlloyPhoto 图像处理，兼容手机端、allouimage.js - 图1
    AlloyPhoto 图像处理，兼容手机端、allouimage.js - 图2

    前两天接到个新的需求：用户在上传照片时需要进行美化下。
    实现处理效果如上图所示，图片上传部分就不贴出来了。
    主要运用alloyimage这个图像处理引擎（是由腾讯Web前端AlloyTeam推出的一个开源项目http://alloyteam.github.io/AlloyPhoto/）

    使用到的js有zepto.js、iscroll.js、allouimage.js
    zepto.js：由于是手机端项目所以使用zepto代替jquery
    iscroll.js：在底部我有一个横向的滚动菜单，使用它来进行横向滚动
    allouimage.js：图像处理

    同事催的急也就没有写代码注释，本来说后面空了补起来，现在看来算是说空话了

    css

    1. <style>
    2. ::-webkit-scrollbar-track-piece {
    3.     background-color:#f5f5f5;
    4.     border-left:1px solid #d2d2d2;
    5. }
    6. ::-webkit-scrollbar {
    7.     width:13px;
    8.     height:13px;
    9. }
    10. ::-webkit-scrollbar-thumb {
    11.     background-color:#c2c2c2;
    12.     background-clip:padding-box;
    13.     border:1px solid #979797;
    14.     min-height:28px;
    15. }
    16. ::-webkit-scrollbar-thumb:hover {
    17.     border:1px solid #636363;
    18.     background-color:#929292;
    19. }
    21. html,body{    
    22.     height:100%;
    23.     padding:0;
    24.     margin:0;    
    25.     text-shadow:0 1px 3px rgba(0, 0, 0, 0.75);
    26.     color:#fff;
    27.     font-family:Microsoft Yahei,"宋体";
    28.     overflow:hidden;
    29. }
    30. li{
    31.     list-style:none;
    32. }
    33. h3{
    34.     font-weight:normal;
    35.     text-align:center;
    36.     height:30px;
    37.     line-height:30px;
    38.     font-size:16px;
    39. }
    40. .header{
    41.     border-bottom:1px solid #575C62;
    42.     text-align:center;
    43.     margin:0;
    44.     height:40px;
    45.     line-height:40px;
    46.     background:#26292d;
    47. }
    48. .wrapper{
    49.     border-top:1px solid #282B2F;
    50.     height:100%;
    51.     /*
    52.     display:box;
    53.     display:-webkit-box;
    54.     display:-moz-box;
    55.     box-orient:horizontal;
    56.     -webkit-box-orient:horizontal;
    57.     */
    58. }
    61. #infoMsg{
    62.     position:absolute;
    63.     top:170px;
    64.     left:450px;
    65.     z-index:9;
    66.     width:100px;
    67.     height:100px;
    68.     text-align:center;
    69.     line-height:100px;
    70.     background:#333;
    71.     border-radius:4px;
    72.     opacity:0.7;
    73.     display:none;
    74.     color:#ccc;
    75. }
    77. .picWrapper{
    78.     position:relative;
    79.     width:100%;
    80.     height:500px;
    81. }
    82. .pic{
    83.     position:absolute;
    84.     left:0;
    85.     top:0;
    86.     border:0px;
    87.     2box-shadow:6px 6px 3px #333;
    88.     2-webkit-box-shadow:6px 6px 3px #333;
    89. }
    90. .command{
    91.     background:#27282b;
    92.     background:-webkit-gradient(linear,left top,left bottom,from(#26292d),color-stop(50%,#27282b),to(#26292d));
    93.     height:50px;
    94.     border-top:1px solid #565555;
    95.     border-bottom:1px solid #565555;
    96.     position:fixed;
    97.     bottom:0;
    98.     width:100%;
    99.     z-index:10;
    100. }
    101. .demoImg{
    102.     float:left;
    103.     margin:0px;
    104.     padding-left: 0px;
    105. }
    106. .demoImg li{
    107.     list-style:none;
    108.     display:inline-block;
    109.     margin-left:10px;
    110.     vertical-align:middle;
    111.     text-align:center;
    112. }
    113. .d_item{
    114.     width:50px;
    115.     height:50px;
    116.     line-height: 50px;
    117.     overflow:hidden;
    118.     position:relative;
    119. }
    120. .d_item img{
    121.     width:80px;
    122.     height:auto;
    123.     border:3px solid rgb(45,45,45);
    124. }
    125. .lab{
    126.     position:absolute;
    127.     bottom:0;
    128.     width:100%;
    129.     text-align:center;
    130.     font-size:12px;
    131. }
    132. /*
    133.  * botton'
    134.  * */
    135. a.button{
    136.     text-decoration:none;
    137.     -moz-border-radius:5px;
    138.     -webkit-border-radius:5px; 
    139.     border-radius:5px;
    140.     background: #E0B324;
    142.     background: -moz-linear-gradient(0% 45% 90deg,#E0B324, #FAD121, #FFE678 100%);
    144.     background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#FFE678), to(#E0B324), color-stop(.2,#FAD121));
    146.     color:#312f30;
    147.     float:left;
    148.     font-family:arial,helvetica,sans-serif;
    149.     font-size:17px;
    150.     font-weight:bold;
    151.     padding:10px 20px;
    152.     text-shadow:1px 1px 0 #ebd663;
    153. }
    155. a.button:hover{
    156.     background: #D4A922;
    157.     background: -moz-linear-gradient(40% 51% 90deg,#D4A922, #EBC41F, #EDD670 100%);
    158.     background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#EDD670), to(#D4A922), color-stop(.2,#EBC41F));
    159. }
    160. #open{
    161.     display:none;
    162. }
    163. .d_item{
    164.     cursor:pointer;
    165. }
    167. </style>

    html

    1. <body>
    2.     <div class="header">AlloyPhoto 简约版 1.0</div>
    3.     <div class="wrapper">        
    4.         <div class="right">
    5.             <div id="picWrapper" class="picWrapper">
    6.                 <img src="" class="pic" id="pic" alt="" draggable="false" style="left: 0px; top: 0px;">
    7.                 <div id="infoMsg" style="left: 326.5px; top: 417.5px; display: none;">
    8.                     处理中
    9.                 </div>
    10.             </div>
    11.         </div>
    12.     </div>
    13.     <div class="command" id="h_scroll_demo">        
    14.         <ul class="demoImg" style="width: 1100px;border-radius: 0;">
    15.             <li><a class="button" >打开图片</a></li> 
    16.             <li class="d_item"><div class="lab">原图</div></li>
    17.             <li class="d_item"><div class="lab">美肤效果</div></li>
    18.             <li class="d_item"><div class="lab">素描效果</div></li>
    19.             <li class="d_item"><div class="lab">自然增强</div></li>
    20.             <li class="d_item"><div class="lab">紫调效果</div></li>
    21.             <li class="d_item"><div class="lab">柔焦效果</div></li>
    22.             <li class="d_item"><div class="lab">复古效果</div></li>
    23.             <li class="d_item"><div class="lab">黑白效果</div></li>
    24.             <li class="d_item"><div class="lab">仿lomo</div></li>
    25.             <li class="d_item"><div class="lab">亮白增强</div></li>
    26.             <li class="d_item"><div class="lab">灰白效果</div></li>
    27.             <li class="d_item"><div class="lab">灰色效果</div></li>
    28.             <li class="d_item"><div class="lab">暖秋效果</div></li>
    29.             <li class="d_item"><div class="lab">木雕效果</div></li>
    30.             <li class="d_item"><div class="lab">粗糙效果</div></li>            
    31.         </ul>    
    33.     </div>
    34.     <input type="file" name="open" id="open" class="open">
    36. </body>

    设置菜单栏可以横向滚动

    1. Z.Scroll('#h_scroll_demo',{hScroll:true,hScrollbar : false});
    3. ;(function($){
    4.     var scrollCache = {},index = 1;
    5.     Z.Scroll = function(selector,opts){
    6.         var scroll,scrollId,$el = $(selector),
    7.             options = {
    8.                hScroll : false,
    9.                bounce : false,
    10.                lockDirection : true,
    11.                useTransform: true,
    12.                useTransition: false,
    13.                checkDOMChanges: false,
    14.                onBeforeScrollStart: function (e) {
    15.                     var target = e.target;
    16.                     while (target.nodeType != 1) target = target.parentNode;
    17.                     if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
    18.                         e.preventDefault();
    19.                 }
    20.             };
    21.         scrollId = $el.data('_jscroll_');
    22.         //滚动组件使用频繁，缓存起来节省开销
    23.         if(scrollId && scrollCache[scrollId]){
    24.             scroll = scrollCache[scrollId];
    25.             $.extend(scroll.scroller.options,opts)
    26.             scroll.scroller.refresh();
    27.             return scroll;
    28.         }else{
    29.             scrollId = '_jscroll_'+index++;
    30.             $el.data('_jscroll_',scrollId);
    31.             $.extend(options,opts);
    32.             scroller = new iScroll($el[0],options);
    33.             return scrollCache[scrollId] = {
    34.                 scroller : scroller,
    35.                 destroy : function(){
    36.                     scroller.destroy();
    37.                     delete scrollCache[scrollId];
    38.                 }
    39.             };
    40.         };
    41.     }
    42. })(Z.$);

    给菜单栏中对应的菜单绑定相应的事件

    1. (function(){
    2.     var Main = {
    3.         img: null,
    4.         addEvent: function(selector, eventType, func){
    5.             var proName = "";
    7.             switch(true){
    8.                 case /^\./.test(selector) :
    9.                     proName = "className";
    10.                     selector = selector.replace(".", "");
    11.                     break;
    12.                 case /^\#/.test(selector) :
    13.                     proName = "id";
    14.                     selector = selector.replace("#", "");
    15.                     break;
    16.                 default: 
    17.                     proName = "tagName";
    18.             }
    20.             document.body.addEventListener(eventType,function(e){
    21.                     function check(node){
    22.                         if(! node.parentNode) return;
    24.                         if(node[proName] == selector){
    25.                             func.call(node, e);
    26.                         };
    27.                         check(node.parentNode);
    28.                     }
    29.                     check(e.target);
    30.             }, false);
    31.         },
    32.         eventAtt: function(){
    33.             var _this = this;
    35.             var clickFlag = 0, dx, dy, left, top;
    36.             this.addEvent(".pic", "mousedown", function(e){
    37.             /*
    38.                 dx = e.offsetX ? e.offsetX : e.layerX;
    39.                 dy = e.offsetY ? e.offsetY : e.layerY;
    40.                 */
    42.                 dx = e.clientX;
    43.                 dy = e.clientY;
    45.                 left = parseInt(pic.style.left);
    46.                 top = parseInt(pic.style.top);
    48.                 clickFlag = 1;
    49.             });
    50.             this.addEvent(".picWrapper", "mouseup", function(e){
    51.                 clickFlag = 0;
    52.             });
    54.             document.getElementById("picWrapper").onmousemove = function(e){
    55.                 /*
    56.                     var x = e.offsetX ? e.offsetX : e.layerX;
    57.                     var y = e.offsetY ? e.offsetY : e.layerY;
    58.                     */
    59.                     var x = e.clientX;
    60.                     var y = e.clientY;
    62.                 if(clickFlag){
    63.                     var pic = document.getElementById("pic");
    65.                     /*
    66.                     var x = e.offsetX ? e.offsetX : e.layerX;
    67.                     var y = e.offsetY ? e.offsetY : e.layerY;
    68.                     */
    69.                      var x = e.clientX;
    70.                     var y = e.clientY;
    72.                     var rLeft = left + (x - dx);
    73.                     var rTop = top + (y - dy);
    74.                     if(rLeft < 0) rLeft = 0;
    75.                     if(rTop < 0) rTop = 0;
    77.                     pic.style.left = rLeft + "px";
    78.                     pic.style.top = rTop + "px";
    79.                 }
    80.             };
    82.             this.addEvent(".button", "click", function(e){
    83.                 document.getElementById("open").click();
    84.             });
    86.             this.addEvent(".open", "change", function(e){
    87.                 _this.openFile(e.target.files[0]);
    88.             });
    90.             this.addEvent(".lab", "click", function(e){
    91.                 var text = this.childNodes[0].nodeValue.replace("效果","");
    92.                 var img = document.getElementById("pic");
    93.                 var AP = _this.img.clone();
    94.                 if(text == "原图") AP.replace(img);
    95.                 else{
    96.                     msgEle.style.display = "block";
    98.                     setTimeout(function(){
    99.                         var t = + new Date();
    100.                         AP.ps(text).replace(img).complete(function(){
    101.                             console.log(text + "：" + (+ new Date() - t) / 1000 + "s");
    102.                             msgEle.style.display = "none";
    103.                         });
    104.                     }, 2);
    105.                 }
    106.             });
    108.             document.body.addEventListener("drop", function(e){
    109.                 e.preventDefault();
    110.                 var fileList = e.dataTransfer.files;
    111.                 _this.openFile(fileList[0]);
    112.             },false);
    114.             window.onresize = function(){
    115.                 _this.initView();
    116.             };
    118.         },
    120.         init: function(){
    121.             this.initView();
    122.             this.eventAtt();
    124.             var _this = this;
    125.             var pic = document.getElementById("pic");            
    126.             pic.onload = function(){
    127.                 _this.img = AlloyImage(this); 
    128.                 _this.initView();
    129.             };
    130.         },
    132.         initView: function(){
    133.                 var func = function(){                    
    134.                     var w_width = parseInt(document.body.clientWidth) - 250;
    135.                     var w_height = document.body.clientHeight;
    136.                     var p_width = this.width;
    137.                     var p_height = this.height;
    139.                     var left = (parseInt(w_width) - parseInt(p_width)) / 2;
    140.                     var top = (parseInt(w_height) - parseInt(p_height)) / 2;
    141.                     top = top < 0 ? 0 : top;
    142.                     left = left < 0 ? 0 : left;
    143.                     this.style.left = left + "px";
    144.                     this.style.top = top + "px";                    
    145.                     msgEle.style.left = (parseInt(w_width)) + "px";
    146.                     msgEle.style.top = (parseInt(w_height) - 100) / 2 + "px";
    147.                 };
    148.                 func.call(document.getElementById("pic"));
    150.                 var height = document.body.clientHeight;
    151.                 //var left = document.querySelector(".left");
    152.                 var leftHeight = height - 143;
    153.                 //left.style.height = leftHeight + "px";
    154.         },
    156.         openFile: function(fileUrl){//打开图像文件
    158.             var reader = new FileReader();
    159.             var _this = this;
    160.             reader.readAsDataURL(fileUrl);
    161.             reader.onload = function(){
    162.                 var pic = document.getElementById("pic");
    163.                 pic.src = this.result;
    164.                 pic.onload = function(){                    
    165.                     _this.initView();
    166.                     _this.img = AlloyImage(this);
    167.                 };
    168.             };
    170.         }
    172.     };
    174.     var msgEle;
    176.     window.addEventListener("DOMContentLoaded", function(){
    177.         msgEle = document.getElementById("infoMsg");
    179.         //$AI.useWorker("js/combined/alloyimage.js");
    180.         Main.init();
    183.         var cw =  parseInt(document.body.clientWidth);
    184.         document.getElementById("pic").style.width=cw+"px";
    186.     }, false);
    190. })();

    源码 http://download.csdn.net/detail/u012793146/8856819