使用Javascript从JPEG中提取缩略图？

Question

现在许多相机都将缩略图放入 JPEG 和 RAW 图像中。 我希望能够自动加载一些图像，然后仅显示缩略图，或者更好的是仅自动加载缩略图部分以提高速度。

有没有办法在 JavaScript 中做到这一点？

谢谢。

Answer 1

您已经说过您想在浏览器中执行此操作，因此当您说：

...或者更好的是仅自动加载缩略图部分以提高速度。

您不会从客户端执行此操作获得速度优势，因为必须先下载整个图像，然后才能为其制作缩略图。

您可以为检索到的图像创建缩略图，只需创建一个img元素并将其宽度和高度设置为某个值较小；浏览器默认的做法是缩小图像（不一定以漂亮的方式）。

示例：

var img = document.createElement('img');
img.src = "your image url here";
img.style.width = "32px";       // Change as appropriate
img.style.height = "32px";      // Change as appropriate
document.body.appendChild(img); // Or append to some other container element

Live copy

我认为强制将图像设置为一定的宽度和高度（通常使用缩略图，如果它们的尺寸相同，则很有用，尽管上面的内容会扰乱纵横比）。

如果你想按百分比调整大小（比如 25%），你可以这样做，但它更复杂：你必须创建图像，将其加载到屏幕外（有多种方法可以做到这一点），等待加载完成，然后进行计算。

---

如果您正在运行服务器，那么您最好找到可以预处理图像并为您创建缩略图的东西。例如，ImageMagick 可以在服务器端提供帮助。