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

Question

单行问题：

是否有一种toDataURL方法可以作用于 <IMG> 元素？

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

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

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

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

更多详细信息，但无需进一步阅读。
我使用 VIDEO 标签来获取相机流，当用户单击按钮时，我将 CANVAS 复制到 IMG。
但由于我不想在拍照时显示整个图片（我希望它在不同设备上保持一致，无论相机分辨率如何，保持 16:9 的长宽比），所以我只使用object-fit: cover;。
所以，现在我有一个“部分”图像，但如果我在画布上执行 toDataURL，它会给我整个图片，无论“对象适合”值如何。
如果不清楚，没问题:)我只需要一个作用于 <IMG> 元素的“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" />

它有效，但请阅读此内容。更好的方法是创建纯函数并传递图像作为参数：

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;
}