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

来源：互联网发布：大自然木地板知乎编辑：程序博客网时间：2024/04/29 12:54

这里写图片描述

前两天接到个新的需求：用户在上传照片时需要进行美化下。
实现处理效果如上图所示，图片上传部分就不贴出来了。
主要运用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

0 0