1

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

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

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

目前正在寻找这个可能的解决方案，赏金可用！

4

1 回答 1

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;”&gt;</div>

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

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

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

虽然这会更容易自动化，因为它可以纯粹使用 css 类来完成，但它仍然会受到大量额外标记的影响，并且必须在其容器内将图像向上移动一点（因此您需要修剪顶部和底部条）。

3）如果你可以让你的图像有一个绝对位置（这通常工作得很好，取决于你的布局是如何构造的），那么有 CSS 'clip' 属性：

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

clip 属性构造一个可见的矩形，由上边距、右边距、下边距和左边距表示。非常干净和明智，并且易于编程。但是，如果您的图像无法绝对定位，则这是不可能的，因此这可能是不可行的。

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位置canvas 开始重绘，画布上开始重绘的 y 位置，新图像的宽度和新图像的高度。如果您正确编写了例程，则可以使用单个画布，只需调用编程方法即可按照您想要的方式绘制每个缩略图。

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

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

于 2014-06-19T07:02:32.617 回答