カラーチャンネル
RGB Channels

ソースコード

window.addEventListener('load', function(){
	const canvas=Array(3);
	const context=Array(3);
	for(let c=0;c < 3; c++){
		canvas[c]=document.getElementById('canvas'+c.toString());
		canvas[c].height = canvas[c].width*1.333;
		context[c]= canvas[c].getContext('2d');
	}
	const image = new Image();
	image.src = 'ip/original.jpg';
	image.addEventListener("load", function(){
		for(let c=0;c < 3; c++){
			context[c].drawImage(image,0,0);
			const x = context[c].getImageData(0,0,
					canvas[c].width,canvas[c].height);
			for (let i=0; i < x.data.length; i+=4) {
				if(c==0) x.data[i+1]=x.data[i+2]=0;
				else if(c==1) x.data[i]=x.data[i+2]=0;
				else x.data[i]=x.data[i+1]=0;
			}
			context[c].putImageData(x,0,0);
		}
	});
});

This site is powered by