<img src="http://rem.io/rem.jpg" crossOrigin>

​

<script>

function circlify(source, width) {

  var canvas = document.createElement('canvas'),

      ctx = canvas.getContext('2d');

  var short = source.width < source.height ? source.width : source.height,

      x = (source.width - short) / 2,

      y = (source.height - short) / 2;

  canvas.width = canvas.height = width;  

   ctx.drawImage(source, x, y, short, short, 0, 0, width, width);

​

  // now cut out a circle using global composite op

  ctx.globalCompositeOperation = 'destination-in';

  ctx.beginPath();

  ctx.arc(width/2, width/2, width/2, 0, Math.PI * 2, true);

  ctx.closePath();

  ctx.fill();

  return ctx;

}

​

window.onload = function () {

  var img = document.querySelector('img');

  var smallImg = new Image();

  smallImg.src = circlify(img, 100).canvas.toDataURL('image/png');

  img.parentNode.replaceChild(smallImg, img);

};

</script>