Question

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

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

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

Answer 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);

正如评论中所说的那样，浏览器对于放大图像非常密集。

注意：您只能使用本地托管的图片执行此操作。如果您尝试传入src来自其他域的图片，您将收到SECURITY_ERR: DOM。

真正的Jquery / javascript jpg图像调整大小

1 个答案: