裁剪图像 无论文件扩展名是什么

Question

HTML 标记：

<div class="postbody">
<a href="#"><img src="http://1stimg.jpg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://2ndimg.jpeg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://3rdimg.png?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://4thimg.gif?width=300"></a>
</div>

我使用以下代码来裁剪上面的图像，但它仅适用于第一张图像：

<script type="text/javascript">
$("div.postbody img").each(function() {
    var iu = this.src;
    iu = iu.substr(0, iu.indexOf('jpg')) + 'jpg?width=150&height=150&crop=1%3A1';
    this.src = iu;
});
</script>

任何帮助将不胜感激。

Answer 1

最好使用indexOf('.')而不是indexOf('jpg')它的价值。为什么只想将其修复为"jpg"？您为什么不要求更小的图像？

Answer 2

您要替换所有源属性，无论它是否与扩展名匹配。

在执行替换之前检查正确的扩展名：

$(function() {
    $("div.postbody img").each(function() {
        var iu = this.src;
        if (iu.indexOf('jpg')!=-1) {
            iu = iu.substr(0, iu.indexOf('jpg')) + 'jpg?width=150&height=150&crop=1%3A1';
            this.src = iu;
        }
        else if (iu.indexOf('jpeg')!=-1) {
            iu = iu.substr(0, iu.indexOf('jpeg')) + 'jpeg?width=150&height=150&crop=1%3A1';
            this.src = iu;
        }
    });
});