3

这是不使用 css 宽度/高度或 attr 宽度/高度的调整大小。我将 jpg 图像发布回必须为 1024x768 的服务器，但是，发布的图像可能是基于用户交互（外部加载）的其他尺寸。

例如，如何调整 1124x800 jpg 图像 tp 1024x768 的大小，以便实际调整大小，而不仅仅是通过其 attr 或 css 值标记显示？？？？？？

这可以用画布完成，还是我需要一个特殊的 jquery 插件？？？？？？任何帮助都感激不尽。这是一个开源项目，所以我不是在寻找商业插件，如果需要的话。

4

1 回答 1

5

是的，这可以通过<canvas>.

function resize(img, width, height) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    context.drawImage(img, 0, 0, width, height);

    img.src = canvas.toDataURL('image/png');
}

我会发布 JSFiddle，但似乎他们的服务器已关闭。这是用法。

var image = document.getElementById('myImage');

resize(image, image.width * 0.75, image.height * 0.75);

正如评论中所说，这在浏览器上对于更大的图像来说是密集的。

注意：您只能对本地托管的图像执行此操作。如果您尝试传入src来自不同域的图像，您将收到SECURITY_ERR: DOM.

于 2012-12-29T23:38:35.090 回答