Javascript Image Loading

by Santiago J

HTML

<input type="file" id="file-input" accept="image/*" />
<div><img id="image" /></div>
<div><img id="other-image" /></div>

CoffeeScript

handleFileChange = (e) ->
  file = e.target.files[0]
  return unless file && file.type.match /image\/.*/
  fileReader = new FileReader()
  fileReader.onload = (e) ->
    img = document.querySelector("#image")
    img.src = e.target.result
  fileReader.readAsDataURL(file)
  return

document.querySelector("#file-input").onchange = handleFileChange;

tumburl = "https://38.media.tumblr.com/12de8c0a2a4537985bcf8b75c70a97c2/tumblr_no1gd1wWVp1sos57no1_540.gif"

pinkurl = "http://s3.amazonaws.com/maggo_dev/items/custom_images/000/000/057/square/pinkie-grin.png"

doCanvasThingsWithImage = (url) ->
  img = new Image()
  console.log img.crossOrigin
  img.crossOrigin = "anonymous"
  img.onload = (e) ->
    c = document.createElement("canvas").getContext("2d")
    c.drawImage(img, -100, -50)
    oimg = document.querySelector("#other-image")
    oimg.src = c.canvas.toDataURL()
  img.src = url

doCanvasThingsWithImage(tumburl)