从动态中心裁剪图像-Javascript？

我有一堆图片，大小不一，宽度和高度都不一样

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

我知道我可以在中使用width=“”和height=“” 所以，我所寻找的是一个可能的javascript解决方案，可能使用jQuery，它将动态地从中心裁剪图像

---

这可能吗？

您可以使用CSS在容器中定位图像。然后确保在该容器上设置了overflow:hidden

例如：

<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>

.container{位置：相对；溢出：隐藏；}
.container img{位置：绝对；}
$image=$（'.container img'）；
宽度=$image.width（）；
高度=$image.height（）；
$image.css({
左：0-（宽度/2），
顶部：0-（高度/2）
});

差不多吧！通过设置其位置的左/上属性，可以模拟作物。上面的示例将从图像的顶部和左侧减去10px。本例假设图像是200px x 200px，显然是编辑图像的值

---

您可能需要重新定位container div，使图像看起来保持在原来的位置。

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

<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>