#プロ生ちゃんクソT選手権 開催！？ お絵かき JavaScript ライブラリーを使って一瞬でサービスを作る方法
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> |
作成したジェネレーターでは、次のようにオプションを変えています。
| var myBoard = new DrawingBoard.Board('canvas', { | |
| enlargeYourContainer: true, // お絵描きできる部分の大きさを CSS で指定したサイズにする | |
| background: 'img/background.png', // 背景画像の設定 | |
| controls: [ // 表示するコントロールボタン | |
| 'Color', | |
| 'DrawingMode', | |
| 'Size', | |
| 'Navigation', | |
| 'Download' | |
| ] | |
| }); |
コントロールボタンは、色の指定・ペン・消しゴム・塗りつぶし・ペンの太さ・元に戻す（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); | |
| } | |
| } |