#プロ生ちゃんクソT選手権開催！？　お絵かき JavaScript ライブラリーを使って一瞬でサービスを作る方法

2015/09/06Development, Event, Pronama-chanJavaScript

Twitter 上で、#プロ生ちゃんクソT選手権が、ゆるやかに開催されています。発端は @NKDTR さんのツイート。

クソTプロ生ちゃん pic.twitter.com/XXwZbTOhfb

— n (@NKDTR) September 4, 2015

素材提供もされたので、Web ページでＴシャツにお絵かきできるサービスを急きょ用意しました。描いたイラストは、ダウンロードして保存できます（Google Chrome・Firefox のみ動作を確認）。

完成した。　クソＴプロ生ちゃんジェネレーター http://t.co/32WJp791lo #プロ生ちゃんクソT選手権

— ＪＺ５ (@jz5) September 5, 2015

皆さんもツイートしてくださいね。

お絵かき JavaScript ライブラリー “drawingboard.js”

作成したクソＴプロ生ちゃんジェネレーターは、簡単にお絵かきボードの JavaScript ライブラリー「drawingboard.js」を利用しました。

次のコードで、基本的な機能がそろったお絵かき用のボードが作れます。

	<div id="canvas"></div>

	<style>
	#canvas {
	width: 400px;
	height: 600px;
	}
	</style>
	<script>
	var myBoard = new DrawingBoard.Board('canvas');
	</script>

view raw

canvas.html

hosted with ❤ by GitHub

作成したジェネレーターでは、次のようにオプションを変えています。

	var myBoard = new DrawingBoard.Board('canvas', {
	enlargeYourContainer: true, // お絵描きできる部分の大きさを CSS で指定したサイズにする
	background: 'img/background.png', // 背景画像の設定
	controls: [ // 表示するコントロールボタン
	'Color',
	'DrawingMode',
	'Size',
	'Navigation',
	'Download'
	]
	});

view raw

sample.js

hosted with ❤ by GitHub

コントロールボタンは、色の指定・ペン・消しゴム・塗りつぶし・ペンの太さ・元に戻す（Undo・Redo）・全消去・ダウンロードの機能があります。上記コードでは、すべて使うため表示順のみを指定していますが、より細かな設定も可能です。

ダウンロード動作の変更

ダウンロードボタンは、拡張子なしのファイルをダウンロード保存する動作となってしまうため、ここだけ処理を書き換えるコードを加えました（ライブラリーを直接編集はしていません）。利用したコードは、jsdo.it にある「Canvasの画像(スクリーンショット)をローカルダウンロードします。」。IE 対応部分は動作しませんでしたが、修正していません。

	DrawingBoard.Board.prototype.downloadImg = function () {
	var canvas = $("canvas").get(0);
	var base64 = canvas.toDataURL();
	var blob = Base64toBlob(base64);
	saveBlob(blob, "pronama-chan-tshirt.png");
	};

	function Base64toBlob(_base64) {
	var i;
	var tmp = _base64.split(',');
	var data = atob(tmp[1]);
	var mime = tmp[0].split(':')[1].split(';')[0];
	var arr = new Uint8Array(data.length);
	for (i = 0; i < data.length; i++) { arr[i] = data.charCodeAt(i); }
	var blob = new Blob([arr], { type: mime });
	return blob;
	}
	function saveBlob(_blob, _file) {
	if ( /@cc_on ! @/ false) {
	window.navigator.msSaveBlob(_blob, _file);
	}
	else {
	var url = (window.URL \|\| window.webkitURL);
	var data = url.createObjectURL(_blob);
	var e = document.createEvent("MouseEvents");
	e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
	a.href = data;
	a.download = _file;
	a.dispatchEvent(e);
	}
	}