如何使用 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;" />

然后我可以添加一个脚本来调整大小并以用户想要的大小缓存图像，还可以添加一个样式 max-width 以允许图像在强制缩小时响应。

使用 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');

});

如何使用 javascript 将图像的大小添加到图像 URL？即时使用调整大小：w=400&h=153

How to add an image's size to the image URL using javascript? Using resize on the fly: w=400&h=153

javascript

jquery

image