#プロ生ちゃんクソT選手権 開催!? お絵かき JavaScript ライブラリーを使って一瞬でサービスを作る方法
Twitter 上で、#プロ生ちゃんクソT選手権 が、ゆるやかに開催されています。発端は @NKDTR さんのツイート。
クソTプロ生ちゃん pic.twitter.com/XXwZbTOhfb
— n (@NKDTR) September 4, 2015
素材 提供もされたので、Web ページでTシャツにお絵かきできるサービスを急きょ用意しました。描いたイラストは、ダウンロードして保存できます(Google Chrome・Firefox のみ動作を確認)。

完成した。 クソTプロ生ちゃんジェネレーター http://t.co/32WJp791lo #プロ生ちゃんクソT選手権
— JZ5 (@jz5) September 5, 2015
皆さんもツイートしてくださいね。
お絵かき JavaScript ライブラリー “drawingboard.js”
作成した クソTプロ生ちゃんジェネレーター は、簡単にお絵かきボードの 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); | |
} | |
} |