寒い毎日に……。ちょっとだけホットになるコードをご紹介。

2018.02.12

はろー、TKです。

冬、真っ只中ですね。とても寒い日が続いています。長野オフィスでは、すでに膝上まで雪が積もっているそうです。
こう寒いと何かで暖をとりたくなりますよね。。。
そこで今回は、心も身体もホットになる!? コードをご紹介したいと思います。

はじめに
ホットになるコード
では、実行してみましょう
おわりに

はじめに

このコードは年末に色々と整理していた時に見つけた、いつ何の為に書いたのかわからないコードです。
若干のリファクタリングはしたものの、ほとんど掘り起こされた時の状態になっています。
自分で書いた短いコードでもコメントが無いとなかなか辛さを感じます。
コメントはとても大事ですね。

ホットになるコード

では、さっそくホットになるコードを見てみましょう。

(function(win, doc, $) {
	'use strict';

	function imageSet() {
		var canv = doc.getElementById('canv');
		var ctx = canv.getContext('2d');
		canv.width = 300;
		canv.height = 300;

		var img = new Image();
		img.src = canv.getAttribute('data-image');
		img.addEventListener('load', draw, false);

		function draw() {
			ctx.drawImage(img, 0, 0, 300, 300);
		};

		$('#btn').on('click', function() {
			var target = ctx;
			exportDiv(target);
		});
	};


	function exportDiv(target) {
		// 画像の各情報を取得
		var imageData = target.getImageData(0, 0, target.canvas.width, target.canvas.height);
		var pixel = imageData.data;
		var length = pixel.length;
		
		console.log(imageData);
		
		$('#code').text(JSON.stringify(pixel));
		
		console.log(imageData);

		var rgb = '', html = '';
		for (var i = 0; i < length; i += 4) {
			rgb = pixel[i + 0] + ',' + pixel[i + 1] + ',' + pixel[i + 2];
			if(pixel[i + 4] > 0) {
				html += '<div class="pixel" style="background: rgb('+ rgb +');"></div>';
			} else {
				html += '<div class="pixel"></div>';
			}
		}
		$('#exporter').html(html);
	};
	
	win.addEventListener('load', imageSet, false);
})(this, this.document, jQuery);
このコードですが画像をcanvasに描画して、ボタンが押されたタイミングで描画された色情報を取得し、取得した情報を元にbackground-colorを指定した縦1px：横1pxのdiv要素で画像をコピーするという、本当に何に使うんだという処理になっています。

単純な知的好奇心で書いたんだろうなと考えると、我ながらなかなかカワイイ奴ですよね。
なお、今回の設定だとcanvasサイズが縦300px：横300pxになっていますが、この値を更に大きくすると多くのブラウザはクラッシュしてしまうでしょう。

この設定でもクラッシュしてしまう環境もあると思うので、サブミットを押す時はクラッシュする覚悟でサブミットしてください。
では、実行してみましょう
念のためにもう一度お伝えしますが、サブミットを押す時はクラッシュする覚悟でサブミットしてください。

もしも、クラッシュしてもクレームはご勘弁ください。

これを期に新しいマシンに新調してしまうのも良いかもしれませんね。
See the Pen canvas2dom by K (@lpcwww) on CodePen.

どうですか？ あなたのパソコンだいぶホットになっていませんか？
おわりに
これからも探究心を忘れずに知的好奇心を満たす為だけのホットなクソコードを書き続けていきたいなと思いました。
         
                         LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る