title: How to save a rotated canvas element to a file
body: <p>I am trying to rotate a large image and save it as a file. I've tried several methods that fail due to the large image size. (OpenCV, Paint Shop Pro, etc).</p>
  
  <p>So, I am trying to do this with javascript. I can draw the image onto a rotated canvas (this works), but when I try to save the canvas to a file, the rotation is lost. It makes sense that this happens, but would like to understand how to capture/extract the rotated state of the canvas before saving?</p>
  
  <p>The client code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              function initPage() {
                  var imageObj = new Image();
                  imageObj.onload = function() {
                      // Draw onto rotated canvas
                      var canvas = document.getElementById('mapCanvas');
                      context = canvas.getContext('2d');
                      context.drawImage(imageObj, 0, 0);
  
                      // Save image as png
                      var dt = canvas.toDataURL('image/png');
                      $.ajax({
                        type: "POST",
                        url: "savePNG.php?file=FN617_ROT",
                        data: { 
                           imgBase64: dt
                        }
                      }).done(function(o) {
                        console.log('saved'); 
                      });
  
                  };  
                  imageObj.src = 'FN617.png';
              }
          &lt;/script&gt;
  
          &lt;style&gt;
              body {
                  margin: 0;
                  padding: 0;
              }
              #mapCanvas {
                  transform-origin:center center;
                  transform: rotate(-32.5deg);
              }
          &lt;/style&gt;       
      &lt;/head&gt;
  
      &lt;body onload="initPage();"&gt;
          &lt;canvas id="mapCanvas" width="9600" height="7200"&gt;&lt;/canvas&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>The server code:</p>
  
  <pre><code>&lt;?php
      $base64 = str_replace('data:image/png;base64,', '', $_REQUEST['imgBase64']);
      $data = base64_decode($base64);
      file_put_contents(dirname(__FILE__)."/". $_GET['file'].".png", $data);
  ?&gt;
  </code></pre>