React + TypeScriptでスマホカメラの画像を取得するフォームを作る

最近はカメラ画像を取得することもできるらしい。ポイントは、inputのtypeをfileにしてacceptをimage/*:capture=cameraにするところです。

撮影した画像のプレビューを表示するにはimgタグを使います。File APIを使って画像を読み込んで使います。ソースで書くとこんな感じ。

import * as React from 'react';

export default class IndexPage extends React.Component<{}, {}> {

    private img: HTMLImageElement;

    private handleSubmit(e: React.SyntheticEvent) {
        e.preventDefault();
    }

    private handleChange(e: React.FormEvent) {
        var r = new FileReader();
        r.onload = _ => {
            this.img.src = r.result;
        };
        r.readAsDataURL((e.target as HTMLInputElement).files[0]);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <input type='file' accept='image/*;capture=camera' onChange={this.handleChange.bind(this)} />
                <hr />
                <img ref={x => this.img = x} width={200}/>
            </form>
        );
    }
}