Javascript 动态修改YouTube自动生成的缩略图API v2.0

我知道我们可以为每个视频从4个自动生成的YouTube缩略图中进行选择。有时，由于原始视频的纵横比，这些缩略图包含黑色条。在将修改后的图像推送到客户端之前，是否有任何方法对其进行修改

这些缩略图用于在网站上列出视频搜索结果。而不是作为一个嵌入式播放器

理想情况下，我不希望将这些缩略图存储在服务器上

---

目前正在寻找这一可能，悬赏可用

有多种可能的解决方案，每种都有其优缺点。注意，这些都是基于CSS/Javascript的，因为YouTube API不报告视频方面、图像方面等等

1） 链接到的解决方案可以工作，将缩略图设置为元素的背景图像，将背景图像居中，然后显式设置元素的高度和宽度

<div style=”width: 120px; height:51px; background: url(https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg) center no-repeat; background-size:120px 67px;”></div>

在这种情况下，数字参数表示源图像的x位置、源的y位置、要查看的源的宽度、要查看的源的高度、要开始重画的画布的x位置、要开始重画的画布上的y位置、新图像的宽度，以及新图像的高度。如果您正确地编写了例程，就可以使用单个画布，只需调用一个编程方法就可以按照您想要的方式绘制每个缩略图

请记住，所有这些方法都要求您提前知道如何裁剪每个图像。实际上，没有一种方法可以从任何API调用中判断图像是否会有黑条。如果使用画布方法，可以使用getimageData（）函数分析每个图像并搜索黑条，然后根据结果进行裁剪/调整大小。但这确实是另一个问题

下面是一个示例，演示了我上面概述的不同方法

<div style=”width:120px;height:51px;overflow:hidden;”>
  <img src=”https://i1.ytimg.com/vi/qV4tiq-w2HM/mqdefault.jpg” style=”margin-top:-8px”/>
</div>

<img src="https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg" style=”position:absolute; width: 120px; top:0; clip:rect(8px,120px,59px,0px);”/>

var context = document.getElementById('myCanvas').getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg';
imageObj.onload = function() {
    context.drawImage(imageObj, 0, 23, 320, 120, 0, 51, 120, 51);
};