文章/答案/技术大牛

发布

js图片转缩略图

JavaScript 中将图片转换为缩略图通常涉及以下几个基础概念：

基础概念

Canvas API：HTML5 提供的 Canvas 元素允许通过 JavaScript 进行图形绘制。
Image 对象：用于加载和处理图像。
Blob 对象：表示不可变的原始数据，常用于存储二进制数据。

优势

灵活性：可以在客户端即时生成缩略图，减少服务器负载。
用户体验：用户无需等待服务器响应即可看到处理后的图片。
节省带宽：传输和处理小尺寸图片比大图更高效。

类型

固定尺寸缩略图：将图片缩放到固定的宽度和高度。
比例缩略图：保持图片原始宽高比的同时调整大小。

应用场景

社交媒体分享：快速生成适合分享的小图。
产品列表展示：在电商网站中快速加载和显示商品图片。
论坛帖子附件：用户上传图片后即时显示缩略图。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 和 Canvas API 将图片转换为固定尺寸的缩略图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片转缩略图</title>
</head>
<body>
<input type="file" id="fileInput">
<canvas id="thumbnailCanvas" width="100" height="100"></canvas>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.onload = function() {
                var canvas = document.getElementById('thumbnailCanvas');
                var ctx = canvas.getContext('2d');
                // 计算缩放比例并保持宽高比
                var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
                var width = img.width * scale;
                var height = img.height * scale;
                var x = (canvas.width - width) / 2;
                var y = (canvas.height - height) / 2;
                // 绘制缩略图
                ctx.drawImage(img, x, y, width, height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});
</script>
</body>
</html>

遇到的问题及解决方法

问题：生成的缩略图模糊或失真。原因：可能是由于缩放算法导致的像素损失，或者图片原始分辨率过低。 解决方法：

使用高质量的图像处理算法，如双线性插值或双三次插值。
确保原始图片具有足够的分辨率。

问题：浏览器兼容性问题。原因：不同浏览器对 Canvas API 的支持程度可能有所不同。 解决方法：

检查并使用 polyfill 来填补浏览器之间的功能差异。
在文档中明确指出支持的浏览器版本。

通过上述方法，可以在前端有效地生成高质量的缩略图，提升用户体验和应用性能。

页面内容是否对你有帮助？

有帮助

没帮助

在左/右对齐的框架/窗口中自动调整缩略图大小

javascript、html、css

我正在做的网页上显示了大量的图片/缩略图。我要找的是自动调整图片的大小，使每行都有固定的高度，并且每行的右边距也是相等的。当我改变窗口大小时，即使图像被重新格式化，上面提到的样式也保持不变。这与谷歌在显示他们的图片搜索结果时所做的非常相似：任何对此有想法的人将不胜感激！谢谢

浏览 1提问于2012-02-16得票数 0

回答已采纳

1回答

下载维基百科的转储图像文件

wikipedia

我正在尝试下载维基百科的图片转储放到我本地的MediaWiki中。请问下载的地方在哪里？在谷歌搜索之后，我没有看到任何简单的答案。如果有一种方法只获取这些图像的缩略图转储，那也是很好的。

浏览 0提问于2013-06-07得票数 1

1回答

使用jQuery在点击时交换身体背景图像，并在加载时随机化

javascript、jquery、html、css

我有一个身体背景图片，它是由一个名为ezBigResize的插件“放置”的，它基本上允许图像随浏览器窗口缩放。设计师希望图像能够被页面上的一系列缩略图替换，同时该图像在页面加载时从该系列图像中随机化。

浏览 2提问于2011-08-18得票数 0

回答已采纳

3回答

如何下载维基百科图片转储

wikipedia、wiki、wikipedia-api、wikimedia、wikimedia-dumps

但问题是我无法下载维基百科的图片转储。他们所提供的都是只有元图像信息的SQL，任何地方都没有动作图像。另外，我正在使用维基百科在本地服务器上运行维基百科。

浏览 16提问于2018-04-09得票数 1

2回答

引导:如何使重复的div在固定的div周围运行。

javascript、css、twitter-bootstrap、twitter-bootstrap-3

我试图完成以下工作，使重复的div“转”成一个固定的div。重复的div的内容将使用引导缩略图动态创建。下面的图片说明了我想要做的事情：我怎么能用CSS (或者Javascript，或者谁知道.鞋带)？

浏览 1提问于2014-02-11得票数 1

回答已采纳

2回答

未在预览中正确显示

jquery、css、wordpress、jcrop

他们可以选择一个图像，图像将被加载到和一个缩略图中，以显示裁剪后的图像会是什么样子。这是一个屏幕截图，当它出现问题时：，黑线显示缩略图的总宽度，因为你可以看到作物选择是扭曲的，并且正在从缩略图中消失。

浏览 4提问于2016-12-01得票数 0

回答已采纳

1回答

我有一个图片库，它从远程JSON文件中获取图像(图像链接)，生成每个图像的缩略图(因为来自JSON的图像太小)，最后将其转储给用户。当它这样做的时候，用户并不知道发生了什么。在生成所有缩略图之前，它们会看到一个空白的“白色”页面。我如何实现图库，当用户打开图库时，他们可以看到图像正在加载(通过“加载”微调器gif)，一旦生成缩略图，它就会立即替换微调器，并在不等待其他微调器加载的情况下就位。

浏览 0提问于2013-01-31得票数 0

2回答

我的Laravel网站非常慢，我怎么才能让它更快呢？

php、html、laravel

我已经建立了一个使用laravel的婚姻网站，但现在我面临着一个加载时间的问题。看起来要花很多时间来加载。首先，我认为这是因为有很多查询，但我已经优化了查询，使它更快，但它是相当相同的。在我的本地和服务器上都是一样的。我能为此做些什么呢？

浏览 2提问于2020-03-08得票数 2

1回答

如何创建每个图像的缩略图？

android、android-gallery

在Android图片库应用程序中，如何创建每个图像的缩略图？它是否嵌入到图像的JPEG头中？当图片是由jpeg编码库拍摄时创建的缩略图？ 缩略图是在Android画廊应用程序加载图片时动态创建的吗？

浏览 4提问于2014-04-16得票数 0

回答已采纳

1回答

如果没有徽标，如何隐藏徽标？

reactjs

我正在使用react-bootstrap缩略图来显示一堆徽标。但是现在我想默认的logo也不应该显示。因此，如果我删除默认徽标，那么我将获得分手图像。</a> </div>} 我正在考虑创建一个类display-none，当没有徽标时，缩略图应该添加

浏览 0提问于2021-04-16得票数 0

2回答

检查是否存在缩略图和图像

javascript、image、thumbnails

首先，它需要检查图片的缩略图是否存在，如果缩略图不存在，则检查full_size图像并显示该缩略图(缩小)，如果缩略图或全尺寸图像都不存在，则使用noimage.gif作为小占位符。基本上，每个地标将有1到5张图片，图片的名称将与地标名称相同，并在每张图片后添加-1、-2、-3等。所以这些地标中的每一个都从相同的气球样式中获得了自己的样式。这将允许用户，当他们更新kml文件并添加新的placemark时，他们所要做的就是重命名jpeg以匹配placem

浏览 1提问于2011-09-18得票数 2

3回答

如何在不增加lag的情况下将多张图片上传到一个小网站的图库中？

html、png

如果我只是添加20张左右的图片，网站加载的时间太长了。我怎样才能让我的网站加载得和Google图片一样快，看起来也差不多，但最多只有20张图片(与Google图片的大小相似)？有可能吗？

浏览 1提问于2014-04-12得票数 0

1回答

Javascript图片库

javascript、html、image-gallery

(我的编码经验有限)这是网站模板文件中的图片库标签：这里有一个指向模板文件的链接和我正在尝试实现的pdf 以下是需要更

浏览 3提问于2012-10-24得票数 5

1回答

在Wordpress文章中显示一定大小的附加图像

image、wordpress、attachment

该网站包括： }}我如何才能只显示中等图像？

浏览 3提问于2011-08-14得票数 0

回答已采纳

1回答

GetThumbnailAsync()在本地存储中花费的时间太长

c#、windows-runtime、windows-phone-8.1

我正在创建一个Windows 8.1 (RT)应用程序，我在LocalStorage和图片库中都有一些图像，在那里我使用GetThumbnailAsync()加载图像。对于大小为6MB+的PNG图像，PicturesLibrary中的GetThumbnailAsync()需要几毫秒，而将相同的图像复制到应用程序中的LocalStorage需要大约10秒才能得到缩略图。

浏览 5提问于2015-04-16得票数 0

回答已采纳

1回答

共享照片网站的数据库设计？

php、mysql、database-design、sharing、photos

我的问题：图片分享网站(如flickr)的最佳数据库设计是什么?如果我继续在“照片”文件夹中创建新文件夹，会有什么问题吗？如果成千上万的用户注册了呢？的最佳实践是什么?我应该保留多少大小的照片？目前，我只存储缩略图(100x100)和(最大) 1600x1200 px照片。在开发照片分享网站时我应该注意的其他事情是什么？

浏览 3提问于2010-05-19得票数 2

回答已采纳

1回答

使用Google的批量图像搜索

xml、web-scraping、google-sheets、google-search

不幸的是，这些图片都是缩略图。如何修改上述公式以获得更大尺寸的图像？

浏览 1提问于2015-02-21得票数 4

1回答

在网页上以灰度显示彩色图像

php、javascript、image-manipulation

我不在乎是PHP还是JS，但我认为PHP更好。.post-thumbnail img { image-transform: greyscale; } 在PHP或JS中。

浏览 2提问于2011-09-20得票数 0

回答已采纳

2回答

如何在Windows 8中预览PSD？

windows-8、photoshop、psd

我希望能够看到我的PSD的缩略图。有什么想法吗？

浏览 0提问于2013-01-07得票数 1

回答已采纳

1回答

使用Facebook共享时显示特征图像为缩略图有困难

facebook、social-sharing

我知道有很多问题和文章都是关于将帖子缩略图(即特色图片)显示为Facebook分享的缩略图，但我仍然对此感到困惑。当我想通过Facebook分享的时候，标题和节选显示的都是正确的，但缩略图不是我的特色图片，而是文章正文中的第一张图片。我可以在共享窗口中选择一个图像作为缩略图，这样就可以将特色图像作为缩略图使用，但我希望第一个显示的是功能图像，而不需要从post中将其更改为任何其他图像。请你告诉我，我应该把确切的代码放在我的head标签，以便当我分享通过

浏览 0提问于2011-12-19得票数 0

回答已采纳

点击加载更多