图片上传对比度饱和度调整js代码是一款从本地上传图片到服务端，然后通过滤器算法来处理图片，为图片设置不同的亮度，对比度和饱和度。
js代码
<scripttype="text/javascript"src="src/Chobi.min.js"></script>
<scripttype="text/javascript">
//customfilter
functionmyFilter(){
varheight=imgObj.imageData.height;
//orange
for(vari=0;i<imgObj.imageData.width;i++){
for(varj=0;j<Math.floor(height/3);j++){
varpixel=imgObj.getColorAt(i,j);
pixel.red=(255+pixel.red)/2;
pixel.green=(165+pixel.green)/2;
pixel.blue/=2;
imgObj.setColorAt(i,j,pixel);
}
}
//white
for(vari=0;i<imgObj.imageData.width;i++){
for(varj=Math.floor(height/3);j<Math.floor(2*(height/3));j++){
varpixel=imgObj.getColorAt(i,j);
pixel.red=(255+pixel.red)/2;
pixel.green=(255+pixel.green)/2;
pixel.blue=(255+pixel.blue)/2;
imgObj.setColorAt(i,j,pixel);
}
}
//green
for(vari=0;i<imgObj.imageData.width;i++){
for(varj=Math.floor(2*(height/3));j<Math.floor(height);j++){
varpixel=imgObj.getColorAt(i,j);
pixel.red=(0+pixel.red)/2;
pixel.green=(255+pixel.green)/2;
pixel.blue=(0+pixel.blue)/2;
imgObj.setColorAt(i,j,pixel);
}
}
imgObj.loadImageToCanvas();
}varimgObj=null;//globalChobiobject
functionloadImage(elem){
//youshouldprobablycheckiffileisimageornotbeforepassingit
imgObj=newChobi(elem);
imgObj.ready(function(){
this.canvas=document.getElementById("canvas");
this.loadImageToCanvas();//showfilterstousers
document.getElementById("filters").style.display="block";
});
}functiondownloadImage(){
if(imgObj==null){
document.getElementById("error").style.display="block";
setTimeout(function(){
document.getElementById("error").style.display="none";
},4000);
return;
}
imgObj.download('demo-image');
}
//0->Blackandwhite
//10->Blackandwhite2
//1->sepia
//2->negative
//3->vintage
//4->crossprocess
//5->Brightnessincrease
//6->Brightnessdecrease
//7->Contrastincrease
//8->Contrastdecrease
//9->NoiseEffect
//11->Crayoneffect
//12->Cartoonify
//13->Vignette
//filterchainingisalsopossible,likeimgObj.brightness(-5).sepia().negative();
functionfilter(id){
if(imgObj==null){
alert("Chooseanimagefirst!");
return;
}
if(id==0){
imgObj.blackAndWhite();
}
elseif(id==1){
imgObj.sepia();
}
elseif(id==2){
imgObj.negative();
}
elseif(id==3){
imgObj.vintage();
}
elseif(id==4){
imgObj.crossProcess();
}
elseif(id==5){
imgObj.brightness(1);
}
elseif(id==6){
imgObj.brightness(-1);
}
elseif(id==7){
imgObj.contrast(1);
}
elseif(id==8){
imgObj.contrast(-1);
}
elseif(id==9){
imgObj.noise();
}
elseif(id==10){
imgObj.blackAndWhite2();
}
elseif(id==11){
imgObj.crayon();
}
elseif(id==12){
imgObj.cartoon();
}
elseif(id==13){
imgObj.vignette();
}
imgObj.loadImageToCanvas();
}
</script>
下载
|
|
置顶卡
变色卡