前两天接到个新的需求：用户在上传照片时需要进行美化下。
实现处理效果如上图所示，图片上传部分就不贴出来了。
主要运用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);
})();
扫一扫
3051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
