Question

据我所知，我们可以为每个视频选择4个自动生成的YouTube缩略图。有时，由于原始视频的宽高比，这些缩略图包含黑条。在将修改后的图像推送到客户端之前有没有办法修改它？

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

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

目前正在考虑这种可能的solution，可用的赏金！

Answer 1

有多种可能的解决方案，每种解决方案都有其优缺点。请注意，这些都是基于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>

这种解决方案的最大缺点是你在页面上创建了很多空元素，只是为了获取背景图像，并且必须使用javascript将图像设置为背景（除非你的CSS是动态生成的）由服务器端进程）因为它们都是唯一的。如果需要调整缩略图本身的大小，还必须设置background-size属性。

2）另一种解决方案是将图像存在于正常的元素中，但将其包含在另一个具有显式大小的元素中，并将溢出设置为隐藏：

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

虽然这可以更容易实现自动化，因为它可以完全用css类完成，它仍然会受到大量额外标记的影响，并且不得不将图像向上移动到容器内部（因此您需要修剪顶部和底部）柱）。

3）如果您可以确保图像具有绝对位置（通常可以正常工作，具体取决于布局的构造方式），则可以使用CSS“剪辑”属性：

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

剪辑属性构造一个可见的矩形，由上边距，右边距，下边距和左边距表示。非常干净，明智，易于编程。然而，如果您的图像无法绝对定位，那么这是不可能的，因此这可能是不可取的。

4）一个选项几乎完成了'clip'属性的功能，但是更广泛适用的选项是使用画布并在缩放时重新绘制缩略图，将作物放置到位。像这样：

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

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

请注意，所有这些方法都要求您事先知道要裁剪每张图像的方式。从任何API调用都没有办法告诉图像是否有黑条。如果使用画布方法，则可以使用getimageData（）函数分析每个图像并搜索黑条，然后根据结果进行裁剪/调整大小。但这确实是另一个问题。

这是一个jsfiddle，展示了我在上面概述的不同方法。

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

1 个答案: