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

Development,Event,Pronama-chanJavaScript

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

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

クソＴプロ生ちゃんジェネレーター
クソＴプロ生ちゃんジェネレーター

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

お絵かき 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);
}
}

view raw

sample.js

hosted with ❤ by GitHub

リンク

Development,Event,Pronama-chanJavaScript

Posted by jz5