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

Question

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

如何调整,比方说,一个1124x800的JPG图片TP 1024×768,这样它实际上是调整,而不是仅仅标记了用于显示其: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.