CodePen

HTML

            
              <p>Would really love to figure out how to 1) crop into a square 2) THEN resize image. This resizes great, but will either squish or not be square.</p>

<p>
  <a target="_blank" href="http://cl.ly/M72U/not-square.jpg">Image to snag for testing</a>
</p>  

<p>
  <input id="file" type="file">
</p>

All three of these are undesireable:<br>

<div class="avatar-wrap">
<img src="" id="avatar-1">
</div>

<div class="avatar-wrap">
<img src="" id="avatar-2">
</div>

<div class="avatar-wrap">
<img src="" id="avatar-3">
</div>
            
          
!
via HTML Inspector

CSS

            
              body {
  padding: 20px;
}

.avatar-wrap {
  width: 80px;
  height: 80px;
  border: 2px solid black;
  margin: 20px;
  float: left;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var Resample = (function (canvas) {

 // (C) WebReflection Mit Style License

 function Resample(img, width, height, onresample) {
  var

   load = typeof img == "string",
   i = load || img;
   
  // if string, a new Image is needed
  if (load) {
   i = new Image;
   i.onload = onload;
   i.onerror = onerror;
  }
  
  i._onresample = onresample;
  i._width = width;
  i._height = height;
  load ? (i.src = img) : onload.call(img);
 }
 
 function onerror() {
  throw ("not found: " + this.src);
 }
 
 function onload() {
  var
   img = this,
   width = img._width,
   height = img._height,
   onresample = img._onresample
  ;
  // if width and height are both specified
  // the resample uses these pixels
  // if width is specified but not the height
  // the resample respects proportions
  // accordingly with orginal size
  // same is if there is a height, but no width
  var minValue = Math.min(img.height, img.width);
  width == null && (width = round(img.width * height / img.height));
  height == null && (height = round(img.height * width / img.width));

  delete img._onresample;
  delete img._width;
  delete img._height;
   
  // when we reassign a canvas size
  // this clears automatically
  // the size should be exactly the same
  // of the final image
  // so that toDataURL ctx method
  // will return the whole canvas as png
  // without empty spaces or lines
  canvas.width = width;
  canvas.height = height;
  // drawImage has different overloads
  // in this case we need the following one ...
  context.drawImage(
   // original image
   img,
   // starting x point
   0,
   // starting y point
   0,
   // image width
   minValue,
   // image height
   minValue,
   // destination x point
   0,
   // destination y point
   0,
   // destination width
   width,
   // destination height
   height
  );
  // retrieve the canvas content as
  // base4 encoded PNG image
  // and pass the result to the callback
  onresample(canvas.toDataURL("image/png"));
 }
 
 var context = canvas.getContext("2d"),
  // local scope shortcut
  round = Math.round
 ;
 
 return Resample;
 
}(
 this.document.createElement("canvas"))
);

$("#file").on("change", function(event) {
  var file = event.target.files[0];
  
  if (file.type.match('image.*')) {
    
    fileTracker = new FileReader;
    fileTracker.onload = function() {
      Resample(
       this.result,
       80,
       80,
       doneResizeOne
     );
     Resample(
       this.result,
       null,
       80,
       doneResizeTwo
     );
     Resample(
       this.result,
       80,
       null,
       doneResizeThree
     );
    }
    fileTracker.readAsDataURL(file);
    
  }
});

function doneResizeOne(data) {
  $("#avatar-1").attr("src", data); 
}
function doneResizeTwo(data) {
  $("#avatar-2").attr("src", data); 
}
function doneResizeThree(data) {
  $("#avatar-3").attr("src", data); 
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................