正版 Jquery / javascript jpg 图片调整大小

【问题标题】：genuine Jquery / javascript jpg image resize正版 Jquery / javascript jpg 图片调整大小
【发布时间】：2012-12-14 17:38:41
【问题描述】：

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

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

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

【问题讨论】：

用 Javascript 实现的 JPEG 重采样器？唔。我敢打赌，这会很慢。通常你会把这样的工作交给某个服务器。

标签： javascript jquery image resize

【解决方案1】：

是的，这可以通过<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);

正如 cmets 中所说，但是对于较大的图像，这在浏览器上会很密集。

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

【讨论】：