     ctx = canvas.getContext '2d'
     ctx.drawImage img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height
 
-    pngURL = canvas.toDataURL 'image/png'
-    pngSize = Math.round (pngURL.length - BASE_64_PNG_HEAD.length) * BASE_64_EXPANSION
+    dataURL = canvas.toDataURL srcFile.type
+    @setState {dataURL}
 
-    jpegURL = canvas.toDataURL 'image/jpeg', @props.quality
-    jpegSize = Math.round (jpegURL.length - BASE_64_JPEG_HEAD.length) * BASE_64_EXPANSION
+    try
+      size = dataURL.split(';base64,')[1].length * BASE_64_EXPANSION
 
-    # NOTE: In Chrome at least, PNG is always pretty huge.
-    # I think it might not be doing any compression or something.
+      if size > @props.maxSize and canvas.width * canvas.height > @props.minArea
+        # Keep trying until it's small enough.
+        @reduceImage img, srcFile, _scale - @props.reductionPerPass
+      else
+        @setState working: false
 
-    [dataURL, format, size] = if pngSize < jpegSize
-      [pngURL, 'image/png', pngSize]
-    else
-      [jpegURL, 'image/jpeg', jpegSize]
+        img.title = srcFile.name
+        @props.onChange toBlob(dataURL), img
 
-    @setState {dataURL, format, size}
+    catch
+      @setState
+        dataURL: ''
+        working: false
 
-    if size > @props.maxSize and canvas.width * canvas.height > @props.minArea
-      # Keep trying until it's small enough.
-      @reduceImage img, _scale - @props.reductionPerPass
-    else
-      @setState working: false
-      @props.onChange toBlob(dataURL), img
+      alert 'Error reducing image. Try a smaller one.'

    ctx.drawImage srcImg, (srcImg.naturalWidth - canvas.width) / -2, (srcImg.naturalHeight - canvas.height) / -2

    croppedImg = new Image
    croppedImg.title = srcImg.title
    croppedImg.onload = =>
      @reduceImage croppedImg
    croppedImg.src = canvas.toDataURL()

  reduceImage: (img, _scale = 1) ->
    canvas = document.createElement 'canvas'
    canvas.width = img.naturalWidth * _scale
    canvas.height = img.naturalHeight * _scale

LoadingIndicator = require './loading-indicator'
toBlob = require 'data-uri-to-blob'

BASE_64_EXPANSION = 3 / 4

DEFAULT_STYLE =
  display: 'inline-block'
  minHeight: '1em'
  background: 'rgba(128, 128, 128, 0.2)'
  border: '1px solid rgba(128, 128, 128, 0.4)'
  borderRadius: 5
  position: 'relative'

module.exports = React.createClass
  displayName: 'ImageSelector'
