@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

File APIで選択した画像をCanvasに描画する

html5

<input type="file">で指定したファイルを取得するのは、ev.target.filesで取得出来ます。複数選択することも可能なように出来るので、配列になっています。今回は1つだけです。
後はFileReaderを使って読み取って、Canvasに描画します。FileReaderのonloadでImageのsrc属性に取得したdataURLを設定する。ImageのonloadでcontextにdrawImageすればいいですね。

サンプルコードは次の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>画像表示</title>
</head>
<body>
  <div id="wrapper">
    <input type="file" name="file" id="file">
    <div>
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script type="text/javascript">
(function() {
    $(function() {
        var canvas = $('#canvas')[0],
            context = canvas.getContext('2d'),
            image = new Image();
        $('#file').change(function(ev) {
            var files = ev.target.files;
            $.each(files, function(index, item) {
                var reader = new FileReader();
                reader.onload = function(file) {
                    var dataUrl = file.target.result;
                    image.src = dataUrl;
                    image.onload = function() {
                        canvas.width = image.width;
                        canvas.height = image.height;
                        context.drawImage(image, 0, 0);
                    }
                }
                reader.readAsDataURL(item);
            });
        });
    });
})();
  </script>
</body>
</html>