AlloyPhoto 图像处理,兼容手机端、allouimage.js

这里写图片描述
这里写图片描述

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

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

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

css

<style>
::-webkit-scrollbar-track-piece {
    background-color:#f5f5f5;
    border-left:1px solid #d2d2d2;
}
::-webkit-scrollbar {
    width:13px;
    height:13px;
}
::-webkit-scrollbar-thumb {
    background-color:#c2c2c2;
    background-clip:padding-box;
    border:1px solid #979797;
    min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
    border:1px solid #636363;
    background-color:#929292;
}

html,body{    
    height:100%;
    padding:0;
    margin:0;    
    text-shadow:0 1px 3px rgba(0, 0, 0, 0.75);
    color:#fff;
    font-family:Microsoft Yahei,"宋体";
    overflow:hidden;
}
li{
    list-style:none;
}
h3{
    font-weight:normal;
    text-align:center;
    height:30px;
    line-height:30px;
    font-size:16px;
}
.header{
    border-bottom:1px solid #575C62;
    text-align:center;
    margin:0;
    height:40px;
    line-height:40px;
    background:#26292d;
}
.wrapper{
    border-top:1px solid #282B2F;
    height:100%;
    /*
    display:box;
    display:-webkit-box;
    display:-moz-box;
    box-orient:horizontal;
    -webkit-box-orient:horizontal;
    */
}


#infoMsg{
    position:absolute;
    top:170px;
    left:450px;
    z-index:9;
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
    background:#333;
    border-radius:4px;
    opacity:0.7;
    display:none;
    color:#ccc;
}

.picWrapper{
    position:relative;
    width:100%;
    height:500px;
}
.pic{
    position:absolute;
    left:0;
    top:0;
    border:0px;
    2box-shadow:6px 6px 3px #333;
    2-webkit-box-shadow:6px 6px 3px #333;
}
.command{
    background:#27282b;
    background:-webkit-gradient(linear,left top,left bottom,from(#26292d),color-stop(50%,#27282b),to(#26292d));
    height:50px;
    border-top:1px solid #565555;
    border-bottom:1px solid #565555;
    position:fixed;
    bottom:0;
    width:100%;
    z-index:10;
}
.demoImg{
    float:left;
    margin:0px;
    padding-left: 0px;
}
.demoImg li{
    list-style:none;
    display:inline-block;
    margin-left:10px;
    vertical-align:middle;
    text-align:center;
}
.d_item{
    width:50px;
    height:50px;
    line-height: 50px;
    overflow:hidden;
    position:relative;
}
.d_item img{
    width:80px;
    height:auto;
    border:3px solid rgb(45,45,45);
}
.lab{
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    font-size:12px;
}
/*
 * botton'
 * */
a.button{
    text-decoration:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px; 
    border-radius:5px;
    background: #E0B324;

    background: -moz-linear-gradient(0% 45% 90deg,#E0B324, #FAD121, #FFE678 100%);

    background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#FFE678), to(#E0B324), color-stop(.2,#FAD121));

    color:#312f30;
    float:left;
    font-family:arial,helvetica,sans-serif;
    font-size:17px;
    font-weight:bold;
    padding:10px 20px;
    text-shadow:1px 1px 0 #ebd663;
}

a.button:hover{
    background: #D4A922;
    background: -moz-linear-gradient(40% 51% 90deg,#D4A922, #EBC41F, #EDD670 100%);
    background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#EDD670), to(#D4A922), color-stop(.2,#EBC41F));
}
#open{
    display:none;
}
.d_item{
    cursor:pointer;
}

</style>

html

<body>
    <div class="header">AlloyPhoto 简约版 1.0</div>
    <div class="wrapper">        
        <div class="right">
            <div id="picWrapper" class="picWrapper">
                <img src="" class="pic" id="pic" alt="" draggable="false" style="left: 0px; top: 0px;">
                <div id="infoMsg" style="left: 326.5px; top: 417.5px; display: none;">
                    处理中
                </div>
            </div>
        </div>
    </div>
    <div class="command" id="h_scroll_demo">        
        <ul class="demoImg" style="width: 1100px;border-radius: 0;">
            <li><a class="button" >打开图片</a></li> 
            <li class="d_item"><div class="lab">原图</div></li>
            <li class="d_item"><div class="lab">美肤效果</div></li>
            <li class="d_item"><div class="lab">素描效果</div></li>
            <li class="d_item"><div class="lab">自然增强</div></li>
            <li class="d_item"><div class="lab">紫调效果</div></li>
            <li class="d_item"><div class="lab">柔焦效果</div></li>
            <li class="d_item"><div class="lab">复古效果</div></li>
            <li class="d_item"><div class="lab">黑白效果</div></li>
            <li class="d_item"><div class="lab">仿lomo</div></li>
            <li class="d_item"><div class="lab">亮白增强</div></li>
            <li class="d_item"><div class="lab">灰白效果</div></li>
            <li class="d_item"><div class="lab">灰色效果</div></li>
            <li class="d_item"><div class="lab">暖秋效果</div></li>
            <li class="d_item"><div class="lab">木雕效果</div></li>
            <li class="d_item"><div class="lab">粗糙效果</div></li>            
        </ul>    

    </div>
    <input type="file" name="open" id="open" class="open">

</body>

设置菜单栏可以横向滚动

Z.Scroll('#h_scroll_demo',{hScroll:true,hScrollbar : false});

;(function($){
    var scrollCache = {},index = 1;
    Z.Scroll = function(selector,opts){
        var scroll,scrollId,$el = $(selector),
            options = {
               hScroll : false,
               bounce : false,
               lockDirection : true,
               useTransform: true,
               useTransition: false,
               checkDOMChanges: false,
               onBeforeScrollStart: function (e) {
                    var target = e.target;
                    while (target.nodeType != 1) target = target.parentNode;
                    if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                        e.preventDefault();
                }
            };
        scrollId = $el.data('_jscroll_');
        //滚动组件使用频繁,缓存起来节省开销
        if(scrollId && scrollCache[scrollId]){
            scroll = scrollCache[scrollId];
            $.extend(scroll.scroller.options,opts)
            scroll.scroller.refresh();
            return scroll;
        }else{
            scrollId = '_jscroll_'+index++;
            $el.data('_jscroll_',scrollId);
            $.extend(options,opts);
            scroller = new iScroll($el[0],options);
            return scrollCache[scrollId] = {
                scroller : scroller,
                destroy : function(){
                    scroller.destroy();
                    delete scrollCache[scrollId];
                }
            };
        };
    }
})(Z.$);

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

(function(){
    var Main = {
        img: null,
        addEvent: function(selector, eventType, func){
            var proName = "";

            switch(true){
                case /^\./.test(selector) :
                    proName = "className";
                    selector = selector.replace(".", "");
                    break;
                case /^\#/.test(selector) :
                    proName = "id";
                    selector = selector.replace("#", "");
                    break;
                default: 
                    proName = "tagName";
            }

            document.body.addEventListener(eventType,function(e){
                    function check(node){
                        if(! node.parentNode) return;

                        if(node[proName] == selector){
                            func.call(node, e);
                        };
                        check(node.parentNode);
                    }
                    check(e.target);
            }, false);
        },
        eventAtt: function(){
            var _this = this;

            var clickFlag = 0, dx, dy, left, top;
            this.addEvent(".pic", "mousedown", function(e){
            /*
                dx = e.offsetX ? e.offsetX : e.layerX;
                dy = e.offsetY ? e.offsetY : e.layerY;
                */

                dx = e.clientX;
                dy = e.clientY;

                left = parseInt(pic.style.left);
                top = parseInt(pic.style.top);

                clickFlag = 1;
            });
            this.addEvent(".picWrapper", "mouseup", function(e){
                clickFlag = 0;
            });

            document.getElementById("picWrapper").onmousemove = function(e){
                /*
                    var x = e.offsetX ? e.offsetX : e.layerX;
                    var y = e.offsetY ? e.offsetY : e.layerY;
                    */
                    var x = e.clientX;
                    var y = e.clientY;

                if(clickFlag){
                    var pic = document.getElementById("pic");

                    /*
                    var x = e.offsetX ? e.offsetX : e.layerX;
                    var y = e.offsetY ? e.offsetY : e.layerY;
                    */
                     var x = e.clientX;
                    var y = e.clientY;

                    var rLeft = left + (x - dx);
                    var rTop = top + (y - dy);
                    if(rLeft < 0) rLeft = 0;
                    if(rTop < 0) rTop = 0;

                    pic.style.left = rLeft + "px";
                    pic.style.top = rTop + "px";
                }
            };

            this.addEvent(".button", "click", function(e){
                document.getElementById("open").click();
            });

            this.addEvent(".open", "change", function(e){
                _this.openFile(e.target.files[0]);
            });

            this.addEvent(".lab", "click", function(e){
                var text = this.childNodes[0].nodeValue.replace("效果","");
                var img = document.getElementById("pic");
                var AP = _this.img.clone();
                if(text == "原图") AP.replace(img);
                else{
                    msgEle.style.display = "block";

                    setTimeout(function(){
                        var t = + new Date();
                        AP.ps(text).replace(img).complete(function(){
                            console.log(text + ":" + (+ new Date() - t) / 1000 + "s");
                            msgEle.style.display = "none";
                        });
                    }, 2);
                }
            });

            document.body.addEventListener("drop", function(e){
                e.preventDefault();
                var fileList = e.dataTransfer.files;
                _this.openFile(fileList[0]);
            },false);

            window.onresize = function(){
                _this.initView();
            };

        },

        init: function(){
            this.initView();
            this.eventAtt();

            var _this = this;
            var pic = document.getElementById("pic");            
            pic.onload = function(){
                _this.img = AlloyImage(this); 
                _this.initView();
            };
        },

        initView: function(){
                var func = function(){                    
                    var w_width = parseInt(document.body.clientWidth) - 250;
                    var w_height = document.body.clientHeight;
                    var p_width = this.width;
                    var p_height = this.height;

                    var left = (parseInt(w_width) - parseInt(p_width)) / 2;
                    var top = (parseInt(w_height) - parseInt(p_height)) / 2;
                    top = top < 0 ? 0 : top;
                    left = left < 0 ? 0 : left;
                    this.style.left = left + "px";
                    this.style.top = top + "px";                    
                    msgEle.style.left = (parseInt(w_width)) + "px";
                    msgEle.style.top = (parseInt(w_height) - 100) / 2 + "px";
                };
                func.call(document.getElementById("pic"));

                var height = document.body.clientHeight;
                //var left = document.querySelector(".left");
                var leftHeight = height - 143;
                //left.style.height = leftHeight + "px";
        },

        openFile: function(fileUrl){//打开图像文件

            var reader = new FileReader();
            var _this = this;
            reader.readAsDataURL(fileUrl);
            reader.onload = function(){
                var pic = document.getElementById("pic");
                pic.src = this.result;
                pic.onload = function(){                    
                    _this.initView();
                    _this.img = AlloyImage(this);
                };
            };

        }

    };

    var msgEle;

    window.addEventListener("DOMContentLoaded", function(){
        msgEle = document.getElementById("infoMsg");

        //$AI.useWorker("js/combined/alloyimage.js");
        Main.init();


        var cw =  parseInt(document.body.clientWidth);
        document.getElementById("pic").style.width=cw+"px";

    }, false);



})();

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值