从 <IMG> 元素获取 canvas 对象

Question

单行问题：

元素是否有 toDataURL 方法？

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

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

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

是否已经有方法或变通方法（例如创建一个空 canvas、将 IMG 复制到顶部等）来执行 getCanvasFromImage？我找不到一个。

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

从 <IMG> 元素获取 canvas 对象

Get a canvas object from an <IMG> element

html

javascript

canvas

image

todataurl