title: canvas cropping image to square after orientating in javascript
body: <p>I am using this function to orientate, resize and compress the user submitted image.
  In case of phone taken pictures are rectangular. I need to get a square image out of the original one cropping it after rotation. How to do it?</p>
  
  <pre><code>function resetOrientationResizeCompress(srcBase64, srcOrientation) {
  
      return new Promise(function (resolve) {
  
          var img = new Image();
  
          img.onload = function () {
              var width = img.width,
                  height = img.height,
                  canvas = document.createElement('canvas'),
                  ctx = canvas.getContext("2d");
  
              var MAX_WIDTH = 1000;
              var MAX_HEIGHT = 1000;
  
              // set proper canvas dimensions before transform &amp; export
              if ([5, 6, 7, 8].indexOf(srcOrientation) &gt; -1) {
                  if (width &gt; height) {
                      if (width &gt; MAX_WIDTH) {
                          height *= MAX_WIDTH / width;
                          width = MAX_WIDTH;
                      }
                  } else {
                      if (height &gt; MAX_HEIGHT) {
                          width *= MAX_HEIGHT / height;
                          height = MAX_HEIGHT;
                      }
                  }
                  canvas.width = height;
                  canvas.height = width;
              } else {
                  if (height &gt; MAX_HEIGHT) {
                      width *= MAX_HEIGHT / height;
                      height = MAX_HEIGHT;
                  }
                  canvas.width = width;
                  canvas.height = height;
              }
  
              // transform context before drawing image
              switch (srcOrientation) {
                  case 2:
                      ctx.transform(-1, 0, 0, 1, width, 0);
                      break;
                  case 3:
                      ctx.transform(-1, 0, 0, -1, width, height);
                      break;
                  case 4:
                      ctx.transform(1, 0, 0, -1, 0, height);
                      break;
                  case 5:
                      ctx.transform(0, 1, 1, 0, 0, 0);
                      break;
                  case 6:
                      ctx.transform(0, 1, -1, 0, height, 0);
                      break;
                  case 7:
                      ctx.transform(0, -1, -1, 0, height, width);
                      break;
                  case 8:
                      ctx.transform(0, -1, 1, 0, 0, width);
                      break;
                  default:
                      ctx.transform(1, 0, 0, 1, 0, 0);
              }
  
              // draw image
              ctx.drawImage(img, 0, 0, width, height);
  
              // export base64
              resolve(canvas.toDataURL("image/jpeg", 0.6));
          };
  
          img.src = srcBase64;
  
      })
  
  }
  </code></pre>
  
  <p>I was able to modify the function so that after orientation the image gets cropped to a square. I tried with images that had orientation 1 and 6. Could I be missing something here for more cases? Here's the code:</p>
  
  <pre><code>function resetOrientationResizeCompress(srcBase64, srcOrientation) {
  
      return new Promise(function (resolve) {
  
          var img = new Image();
  
          img.onload = function () {
              var width = img.width,
                  height = img.height,
                  canvas = document.createElement('canvas'),
                  ctx = canvas.getContext("2d"),
                  start_Y,
                  start_X;
  
              var MAX_WIDTH = 1000;
              var MAX_HEIGHT = 1000;
  
              //srcOrientation is defined
              if(srcOrientation){
  
                  // set proper canvas dimensions before transform &amp; export
                  if ([5, 6, 7, 8].indexOf(srcOrientation) &gt; -1) {
                      if (width &gt; height) {
                          if (width &gt; MAX_WIDTH) {
                              height *= MAX_WIDTH / width;
                              width = MAX_WIDTH;
                          }
                      } else {
                          if (height &gt; MAX_HEIGHT) {
                              width *= MAX_HEIGHT / height;
                              height = MAX_HEIGHT;
                          }
                      }
                      canvas.width = height;
                      canvas.height = width;
                  } else {
                      if (height &gt; MAX_HEIGHT) {
                          width *= MAX_HEIGHT / height;
                          height = MAX_HEIGHT;
                      }
                      canvas.width = width;
                      canvas.height = height;
                  }
  
              }
              //srcOrientation undefined
              else{
  
                  if (width &gt; height) {
                      if (width &gt; MAX_WIDTH) {
                          height *= MAX_WIDTH / width;
                          width = MAX_WIDTH;
                      }
                  } else {
                      if (height &gt; MAX_HEIGHT) {
                          width *= MAX_HEIGHT / height;
                          height = MAX_HEIGHT;
                      }
                  }
                  canvas.width = height;
                  canvas.height = width;
  
  
              }
  
  
              //crop image for different cases (vertical, horizontal, square image)
              if(canvas.width &lt; canvas.height){
  
                  console.log('vertical');
  
                  start_Y = (canvas.height - canvas.width)/2;
  
                  start_X = 0;
  
                  canvas.height = canvas.width;
  
              }
              else if(canvas.width &gt; canvas.height){
  
                  console.log('horizontal');
  
                  start_Y = (canvas.width - canvas.height)/2;
  
                  start_X = 0;
  
                  canvas.width = canvas.height;
  
              }
              else if(canvas.width == canvas.height){
  
                  console.log('square');
  
                  start_Y = 0;
  
                  start_X = 0;
              }
  
              // orientate image if orientation is defined
              if(srcOrientation){
  
                  // transform context before drawing image
                  switch (srcOrientation) {
                      case 2:
                          ctx.transform(-1, 0, 0, 1, width, 0);
                          break;
                      case 3:
                          ctx.transform(-1, 0, 0, -1, width, height);
                          break;
                      case 4:
                          ctx.transform(1, 0, 0, -1, 0, height);
                          break;
                      case 5:
                          ctx.transform(0, 1, 1, 0, 0, 0);
                          break;
                      case 6:
                          ctx.transform(0, 1, -1, 0, height, 0);
                          break;
                      case 7:
                          ctx.transform(0, -1, -1, 0, height, width);
                          break;
                      case 8:
                          ctx.transform(0, -1, 1, 0, 0, width);
                          break;
                      default:
                          ctx.transform(1, 0, 0, 1, 0, 0);
                  }
  
              }
  
              // draw image
              ctx.drawImage(img, -start_Y, start_X, width, height);
  
              // export base64
              resolve(canvas.toDataURL("image/jpeg", 0.6));
          };
  
          img.src = srcBase64;
  
      })
  
  }
  </code></pre>