2014-05-08 Development 更新 2014-05-13

C84 技術情報誌ぷれすと HTML5 + TypeScript でアイコンジェネレーター作成！

コミケ84 2013/8/12 西き 38b「Applest」の技術情報誌ぷれすと（表紙はプロ生ちゃん）に寄稿していた「HTML5 + TypeScript でアイコンジェネレーター作成！」を公開します。4ページしかない内容ですけど。

なぜこのタイミングかというと、誌面にコード場所の GitHub の URL を書いていたのだけど、今まで空のリポジトリがあるだけの状態だったのを、コミットしました！

記事 & コード

表示がきれいでないのでダウンロードしてみてください。元データも見当たらず、見本 PDF から抽出しました。

jz5/c84 GitHub

TypeScript でミニマムなアイコンジェネレーターのコードのつもりです。

gistfile1.ts

class Canvas {
    element: HTMLCanvasElement;
    private context: CanvasRenderingContext2D;

    constructor(element: HTMLCanvasElement) {
        this.element = element;
        this.context = element.getContext("2d");
    }

    drawImage(src: string) {
        var img = new Image();
        img.onload = () => {
            this.context.drawImage(img, 0, 0, this.element.width, this.element.height);
        };
        img.src = src;
    }

    drawBackground(backColor: any) {
        this.context.fillStyle = backColor;
        this.context.fillRect(0, 0, this.element.width, this.element.height);
    }

    convertToImage(type: string = "image/png"): HTMLImageElement {
        var img = new Image();
        img.src = this.element.toDataURL(type);
        return img;
    }
}

window.onload = () => {
    var c = new Canvas(<HTMLCanvasElement>document.getElementById("canvas"));
    c.drawBackground("#c0ffee");
    c.drawImage("images/character.png");

    var btn = <HTMLButtonElement>document.getElementById("pattern1");
    btn.onclick = () => {
        c.drawBackground("#c0ffee");
        c.drawImage("images/character.png");
    };

    var gen = <HTMLButtonElement>document.getElementById("gen");
    gen.onclick = () => {
        var result = c.convertToImage();
        var div = <HTMLDivElement>document.getElementById("result");
        if (div.childNodes.length > 0) {
            div.removeChild(div.childNodes[0]);
        }
        div.appendChild(result);
    };
};