javascript - 如何使用 javascript 将图像的尺寸添加到图像 URL 中？动态使用调整大小 : w=400&h=153

Question

我正在开发一个 CMS，我希望它非常容易使用。

下一个障碍是图像的使用:

我希望不懂技术的用户只需通过 TinyMCE 的 Moximanager 上传图像，然后将图像添加到他们想要的任何位置。然后在对话框中设置图片尺寸(甚至可以在TinyMCE界面中拖动放大或缩小尺寸)

是否有一种简单的方法来添加 JavaScript 来重写网站上所有图像的 HTML，如下所示:

<img src="web_images/dscf7280.jpg" alt="" width="400" height="300" />

至:

<img src="web_images/dscf7280.jpg?w=400&h=300" alt="" style="max-width:400px;" />

然后我可以添加一个脚本来调整图像大小并按照用户想要的大小缓存图像，还可以添加一个最大宽度样式，该样式允许图像在被迫变小时时做出响应。

使用resize.php或者可能是this script然后我可以添加图像缩放器和图像缓存器。

(或者我应该考虑另一个解决方案以使这变得更容易？)

Answer 1

使用 jQuery...

$('img').each(function() {

var $this = $(this);

$this
.attr('src', $this.attr('src') + '?w=' + $this.attr('width') + '&h=' + $this.attr('height'))
.attr('style', 'max-width:' + $this.attr('width') + 'px')
.removeAttr('width')
.removeAttr('height');

});