JSFiddle - React, Tailwind, and code Playground

by nag reddy

HTML

<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}")
        isRotate = true
        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]
    reader.readAsDataURL file