title: Get a canvas object from an <IMG> element
body: <p>The question on a single line:<br><br>
  Is there a <code>toDataURL</code> method working on a &lt;IMG&gt; element?</p>
  <p>Most of the people seem to be interested in how to get an IMG from a CANVAS, but I need the opposite.<br>
  Why? I need to use the <code>toDataURL()</code> method on the IMG.</p>
  <p>So, this is the pseudo code that I wish existed in reality:<br></p>
  <pre><code>var img     = document.getElementById('myImage');
  var canvas  = img.getCanvasFromImage();
  var dataURL = canvas.toDataURL();
  </code></pre>
  <p>Is there already a method, or a workaround (e.g. creating an empty canvas, copying the IMG on top, etc.) to do the <strong>getCanvasFromImage</strong>? I couldn't find one.<br>
  <br>
  Some more details <b>WHY</b>, but there is no need to read further. <br>I am using the VIDEO tag to get the camera stream, and when the user clicks a button, I copy the CANVAS to the IMG.<br>
  But since I do not want to show the whole picture while taking a photo (I want it to be consistent over different devices, regardless of the camera resolution, keeping a 16:9 aspect ratio), I only show a portion of the image using <code>object-fit: cover;</code> .<br>
  So, now I have a &quot;partial&quot; image, but if I do a toDataURL on the canvas I have, it gives me the WHOLE picture, regardless of the &quot;object-fit&quot; value.<br>
  If this is not clear, no problem :) I only need a &quot;toDataURL&quot; method working on a &lt;IMG&gt; element :)</p>