即时从中心裁剪图像 - Javascript？答案

【问题标题】：cropping images from center on the fly - Javascript?即时从中心裁剪图像 - Javascript？
【发布时间】：2011-06-10 10:07:33
【问题描述】：

我有一堆不同尺寸的图片，就宽度和高度而言。

有些是方形的，有些是矩形的，但我希望它们都是我选择的宽度和高度。

我知道我可以在

那么，我一直在寻找的是一种可能的 javascript 解决方案，可能使用 jQuery，它可以从中心即时裁剪图像？

这可能吗？

【问题讨论】：

您想保存裁剪后的图像还是只想裁剪它们以供查看？

标签： javascript jquery crop

【解决方案1】：

您可以使用 CSS 在容器中定位图像。然后确保在该容器上设置了溢出：隐藏。

例如：

<style>
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>

<div class="container">
    <img src="..."/>
</div>

<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();

$image.css({
    left: 0 - (width / 2),
    top: 0 - (height / 2)
});
</script>

【讨论】：

【解决方案2】：

<div style="width:200px;height:200px;overflow:hidden;position:relative;">
    <img src="example.png" style="width:200px;height:200px;position:absolute;left:-10px;top:-10px;" />
</div>

类似的东西！通过设置其位置的左/上属性，您可以模拟裁剪。上面的示例将从图像的顶部和左侧移出 10px。此示例假设图像为 200 像素 x 200 像素，显然需要为您的图像编辑值。

您可能需要重新定位容器 div，以使图像看起来像保留在同一位置。

【讨论】：