js代码

<script type="text/javascript" src="src/Chobi.min.js"></script>
<script type="text/javascript">
//custom filter
function myFilter(){
var height = imgObj.imageData.height;
		//orange
		for(var i=0;i<imgObj.imageData.width;i++){
			for(var j=0;j<Math.floor(height/3);j++){
				var pixel = 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(var i=0;i<imgObj.imageData.width;i++){
			for(var j=Math.floor(height/3);j<Math.floor(2*(height/3));j++){
				var pixel = 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(var i=0;i<imgObj.imageData.width;i++){
			for(var j=Math.floor(2*(height/3));j<Math.floor(height);j++){
				var pixel = 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();
	}

	var imgObj = null; //global Chobi object
	function loadImage(elem){
		//you should probably check if file is image or not before passing it
		imgObj = new Chobi(elem);
		imgObj.ready(function(){
			this.canvas = document.getElementById("canvas");
			this.loadImageToCanvas();

			//show filters to users
			document.getElementById("filters").style.display = "block";
		});
	}

	function downloadImage(){
		if(imgObj == null){
			document.getElementById("error").style.display="block";
			setTimeout(function(){
				document.getElementById("error").style.display="none";
			}, 4000);
			return;
		}
		imgObj.download('demo-image');
	}


	//0 -> Black and white
	//10 -> Black and white2
	//1 -> sepia
	//2 -> negative
	//3 -> vintage
	//4 -> crossprocess
	//5 -> Brightness increase
	//6 -> Brightness decrease
	//7 -> Contrast increase
	//8 -> Contrast decrease
	//9 -> Noise Effect
	//11 -> Crayon effect
	//12 -> Cartoonify
	//13 -> Vignette
	//filter chaining is also possible, like imgObj.brightness(-5).sepia().negative();
	function filter(id){
		if(imgObj == null){
			alert("Choose an image first!");
			return;
		}
		if(id==0){
			imgObj.blackAndWhite();
		}
		else if(id==1){
			imgObj.sepia();
		}
		else if(id==2){
			imgObj.negative();
		}
		else if(id==3){
			imgObj.vintage();
		}
		else if(id==4){
			imgObj.crossProcess();
		}
		else if(id==5){
			imgObj.brightness(1);
		}
		else if(id==6){
			imgObj.brightness(-1);
		}
		else if(id==7){
			imgObj.contrast(1);
		}
		else if(id==8){
			imgObj.contrast(-1);
		}
		else if(id==9){
			imgObj.noise();
		}
		else if(id==10){
			imgObj.blackAndWhite2();
		}
		else if(id==11){
			imgObj.crayon();
		}
		else if(id==12){
			imgObj.cartoon();
		}
		else if(id==13){
			imgObj.vignette();
		}


		imgObj.loadImageToCanvas();
	}
</script>