glitch-canvas

Github から glitch-canvas.min.js を読み込み

 

HTML

<img class="glitch_image" src="./images/glitch_image.jpg">

 

JS

image = new Image();
image.src = $('.glitch_image').attr('src');
glitch({
	seed : 40,
	quality : 40,
	amount : 30,
	iterations : 10
}).fromImage( image ).toDataURL().then( function ( dataURL ) {
	$('.glitch_image').attr('src',dataURL);
});

基本はこんな感じ

 

$('.thumb_box').each( function(i) {
	$('figure' ,this).addClass('thumb_'+i);
	image = new Image();
	image.src = $('figure img' ,this).attr('src');
	rand_seed = 2 + Math.floor( Math.random() * 8 );
	rand_quality = 1 + Math.floor( Math.random() * 5 );
	rand_amount = 1 + Math.floor( Math.random() * 5 );
	rand_iterations = 2 + Math.floor( Math.random() * 2 );
	glitch({
		seed : rand_seed,
		quality : rand_quality,
		amount : rand_amount,
		iterations : rand_iterations
	}).fromImage( image ).toDataURL().then( function ( dataURL ) {
		$('.thumb_'+ i +' .glitch_image').attr('src',dataURL);
	});
});

each + ランダムはこんな感じで。もう少しいい書き方がありそうですが…