如何通过普通 JavaScript 自动调整博客图像的大小？

Question

<div><img src="https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg" alt="demo image" style="height: 180; width: 150;"></div>

原图来源为https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg

要更改的字符是s1600

我的工作jQuery

$('div img').each(function(n, i){
    var p = $(i);
    var w = $(this).width().toFixed();
    var h = $(this).height().toFixed();
    return p.attr('data-src' , p.attr('data-src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c'));
});

裁剪后的src为https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/w150-h180-c/Growing-Food-Plant.jpg

更改的字符是 w150-h180-c

现有的 jQuery 版本运行良好。但是不能处理更多图像并且有点慢。我试图将 jQuery 脚本转换为普通的 JavaScript 但它不起作用。

var divImage = document.querySelectorAll("div img");
for(var c = 0; c < divImage.length; c++) {
    var wid = divImage[c].clientWidth.toFixed();
    var hei = divImage[c].clientHeight.toFixed();
    var attr = divImage[c].getAttribute("src");
    for(var a = 0; a < attr.length; a++) {
        attr[a].replace(/s\B\d{2,4}/,'w' + wid + '-h' + hei +'-c');
    }
}

有谁可以告诉我我的脚本有什么问题吗？

提前致谢。

Answer 1

what's wrong with my script

您的代码无法正常工作，因为

你生成新的url

attr[a].replace(...

但不要更新图像上的属性

divImage[c].setAttribute("data-src", attr[a].replace(...

您正在使用

divImage[c].getAttribute("src")

而您的原件使用 .attr("data-src")

你正在使用 .getAttribute() 其中 returns 一个字符串然后遍历每个字母

for(var a = 0; a < attr.length; a++)

给予：

var divImage = document.querySelectorAll("div img");
for (var c = 0; c < divImage.length; c++) {
  var wid = divImage[c].clientWidth.toFixed() || 0;
  var hei = divImage[c].clientHeight.toFixed() || 0;
  var attr = divImage[c].getAttribute("data-src");
  var newattr = attr.replace(/s\B\d{2,4}/, 'w' + wid + '-h' + hei + '-c');
  divImage[c].setAttribute("data-src", newattr);
}

$("div img").each(function() {
  console.log($(this).attr("data-src"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><img data-src="https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg" /></div>
<div><img data-src="https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg" /></div>

如何通过普通 JavaScript 自动调整博客图像的大小？

How to auto resize blogger image by plain JavaScript?

javascript

jquery

blogger