qrcode reader

HTML

<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/grid.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/version.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/detector.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/formatinf.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/errorlevel.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/bitmat.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/datablock.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/bmparser.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/datamask.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/rsdecoder.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/gf256poly.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/gf256.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/decoder.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/QRCode.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/findpat.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/alignpat.js"></script>
<script src="https://raw.github.com/LazarSoft/jsqrcode/master/src/databr.js"></script>
<input type="file" accept="image/*" id="imageFile" />
<div id="result">...loading...</div>
<div id="console">w/h6</div>
<img id="reader" />
<canvas id="qr-canvas" width="320" height="240"/>

CSS

#reader {
    width: 50%;
    height: 50%;
}

CoffeeScript

$ ->
  ctx = $("#qr-canvas").get(0).getContext "2d"
  $("#imageFile").on "change", ->
    reader = new FileReader()
    reader.onload = ->
      $("#reader").on "load", ->
        width = $(this).width()
        height = $(this).height()
        isRotate = false
        if width < height
          isRotate = true
          height = $(this).width()
          width = $(this).height()
        $("#console").text("width=#{width}, height=#{height}")
        
        if isRotate
          if width/height < 320/240
            ctx.drawImage(this,0,0,320,height/320*width)
          else
            ctx.drawImage(this,0,0,width/240*height,240)
        else
          if width/height > 320/240
            ctx.drawImage(this,0,0,320,height/320*width)
          else
            ctx.drawImage(this,0,0,width/240*height,240)
                
        qrcode.decode()
      $("#reader").attr "src",reader.result
      qrcode.callback = (data)->
        $("#result").text data
    # file = $("#imageFile").get(0).files[0]
    var img = new Image();
    img.onload = function () {
        copyCanvas(img);
    };
    img.src = "http://wargame.kr:8080/qr_code_puzzle/img/qr.png" + (new Date()).getTime();
    file = img;
    reader.readAsDataURL file