title: Can I get image from canvas element and use it in img src tag?
body: <p>Is there possibility to convert the image present in a canvas element into an image representing by <code>img src</code>?</p>
  
  <p>I need that to crop an image after some transformation and save it. There are a view functions that I found on the internet like: <code>FileReader()</code> or <code>ToBlop()</code>, <code>toDataURL()</code>, <code>getImageData()</code>, but I have no idea how to implement and use them properly in JavaScript.</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;img src="http://picture.jpg" id="picture" style="display:none"/&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;canvas id="transform_image"&gt;&lt;/canvas&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;div id="image_for_crop"&gt;image from canvas&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>In JavaScript it should look something like this:</p>
  
  <pre><code>$(document).ready(function() {
      img = document.getElementById('picture');
      canvas = document.getElementById('transform_image');
  
      if(!canvas || !canvas.getContext){
          canvas.parentNode.removeChild(canvas);
      } else {
          img.style.position = 'absolute';
      }
      transformImg(90);
      ShowImg(imgFile);
  }
  
  function transformImg(degree) {
      if (document.getElementById('transform_image')) {
          var Context = canvas.getContext('2d');
          var cx = 0, cy = 0;
          var picture = $('#picture');
          var displayedImg = {
              width: picture.width(),
              height: picture.height()
          };   
          var cw = displayedImg.width, ch = displayedImg.height
          Context.rotate(degree * Math.PI / 180);
          Context.drawImage(img, cx, cy, cw, ch);
      }
  }
  
  function showImg(imgFile) {
      if (!imgFile.type.match(/image.*/))
      return;
  
      var img = document.createElement("img"); // creat img object
      img.id = "pic"; //I need set some id
      img.src = imgFile; // my picture representing by src
      document.getElementById('image_for_crop').appendChild(img); //my image for crop
  }
  </code></pre>
  
  <p>How can I change the canvas element into an <code>img src</code> image in this script? (There may be some bugs in this script.)</p>