从 <IMG> 元素获取画布对象

Question

单行问题：

是否有toDataURL 方法作用于 元素？

大多数人似乎对如何从 CANVAS 获取 IMG 感兴趣，但我需要相反。
为什么？我需要在IMG上使用toDataURL()方法。

所以，这是我希望现实中存在的伪代码：

var img     = document.getElementById('myImage');
var canvas  = img.getCanvasFromImage();
var dataURL = canvas.toDataURL();

是否已经有方法或解决方法（例如创建一个空画布、复制顶部的 IMG 等）来执行 getCanvasFromImage？我找不到。

更多详细信息WHY，但无需进一步阅读。
我正在使用 VIDEO 标签获取相机流，当用户单击按钮时，我将 CANVAS 复制到 IMG。
但是由于我不想在拍照时显示整张照片（我希望它在不同的设备上保持一致，无论相机分辨率如何，保持 16:9 的纵横比），我只显示图像的一部分使用object-fit: cover; .
所以，现在我有一个“部分”图像，但如果我在我拥有的画布上执行一个 toDataURL，它会给我整个图片，而不管“object-fit”值如何。
如果不清楚，没问题 :) 我只需要在 元素上工作的“toDataURL”方法 :)

Answer 1

HTMLImageElement.prototype.getCanvasFromImage = function(){
  const canvas = document.createElement('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0, 0);
  return canvas;
};


const img = document.getElementById('myImage');
img.onload = () => {
  const canvas  = img.getCanvasFromImage();
  const dataURL = canvas.toDataURL();

  console.log(dataURL);
}

<img id="myImage" crossorigin="anonymous" src="https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg" />

它的工作，但请READ THIS。更好的方法是创建纯函数并将图像作为参数传递：

function getCanvasFromImage(image) {
   const canvas = document.createElement('canvas');
   canvas.width = image.width;
   canvas.height = image.height;
   const ctx = canvas.getContext('2d');
   ctx.drawImage(image, 0, 0);
   return canvas;
}