DevelopmentEventPronama-chan

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

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

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

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

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

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

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

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

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

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

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

sample.js
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 対応部分は動作しませんでしたが、修正していません。

sample.js
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);
    }
}

リンク

タグ

関連する記事