我有一个显示几个缩略图的页面。当用户将鼠标悬停在这些图像上时,将出现一个显示完整图像的模式窗口。
问题:为了节省空间,我只想在服务器上存储图像的 1 个版本(原始版本),并在客户端“动态”创建缩略图,可能使用 javascript 进行裁剪(无需调整大小) /jquery。这可能吗?
我见过(但没有尝试过)那些 jquery 裁剪插件,它们似乎有很多功能,比如交互式裁剪工具。我不需要这些功能,只想使用 javascript 进行裁剪。最有可能在图像中心使用重力进行裁剪。
我有一个显示几个缩略图的页面。当用户将鼠标悬停在这些图像上时,将出现一个显示完整图像的模式窗口。
问题:为了节省空间,我只想在服务器上存储图像的 1 个版本(原始版本),并在客户端“动态”创建缩略图,可能使用 javascript 进行裁剪(无需调整大小) /jquery。这可能吗?
我见过(但没有尝试过)那些 jquery 裁剪插件,它们似乎有很多功能,比如交互式裁剪工具。我不需要这些功能,只想使用 javascript 进行裁剪。最有可能在图像中心使用重力进行裁剪。
您可以使用 css 从中心部分裁剪图像。
看演示
<div class="content">
<img src="http://www.letsgodigital.org/images/producten/2086/testrapport/nikon-p90-picture.jpg" width="400" height="400" />
</div>
.content {
width:200px;//require width
height:200px;//require height
overflow:hidden;
}
.content img {
margin-left:-50%;
margin-top:-50%;
}
</p>
为了获得等效的裁剪,一个 css 解决方案是overflow:hidden
在每个全尺寸图像的外部容器上使用。
假设你想要 50px x 50px 的缩略图:
<div id="thumbnail_1" style="overflow: hidden; width: 50px; height:50px">
<img src="..."/> <!-- this is the full-size image -->
</div>
<div id="thumbnail_2" style="overflow: hidden; width: 50px; height:50px">
<img src="..."/>
</div>
<div id="thumbnail_3" style="overflow: hidden; width: 50px; height:50px">
<img src="..."/>
</div>