Javascript 从<；获取画布对象；IMG>；要素

一行上的问题：

是否有一个

toDataURL

方法在元素上工作

大多数人似乎对如何从画布上获取IMG感兴趣，但我需要的恰恰相反。
为什么？我需要在IMG上使用

toDataURL（）

方法

这就是我希望在现实中存在的伪代码：

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

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

更多细节，但没有必要进一步阅读
我正在使用视频标签获取相机流，当用户单击按钮时，我将画布复制到IMG。
但是，由于我不想在拍照时显示整个图片（我希望它在不同的设备上保持一致，无论相机分辨率如何，保持16:9的纵横比），因此我只使用

对象匹配：cover

所以，现在我有了一个“部分”图像，但如果我在画布上做了一个toDataURL，它会给出整个图片，而不管“对象匹配”值如何。

如果不清楚，没有问题：）我只需要一个处理元素的“toDataURL”方法：）

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）；
返回画布；
};
const img=document.getElementById（'myImage'）；
img.onload=（）=>{
const canvas=img.getCanvasFromImage（）；
const dataURL=canvas.toDataURL（）；
log（dataURL）；
}
也感谢您的链接。实际上，我想创建一个纯函数，因为我不知道如何使用原型：）让我试试，我会接受答案是的，它可以工作，我理解你的所有代码。但现在我有一个不同的问题：看起来宽度/高度是错误的。纵横比是完美的，但它只捕获左上角，几乎就像JS报告的高度/宽度与屏幕上的“真实”像素之间存在比例因子一样。我正在调查此事，我将报告我的调查结果findings@ZioBit你可以试试哦，天哪。我刚打开一罐虫子。谢谢你的回答。我将学习CSS中的所有点、dpi和像素。