Javascript 更改Image（）对象尺寸（宽度和高度）

我试图调整图像的尺寸，同时保持其纵横比。这似乎是一项非常简单的任务，但我在任何地方都找不到相关的答案。。（与JavaScript的

Image（）

对象相关）。我可能错过了一些非常明显的东西。以下是我努力实现的目标：

var img = new window.Image();
img.src = imageDataUrl;
img.onload = function(){
    if (img.width > 200){
        img.width = 200;
        img.height = (img.height*img.width)/img.width;
    }
    if (img.height > 200){
        img.height = 200;
        img.width = (img.width*img.height)/img.height;
    }
};

这是在将图像绘制到画布上之前按比例调整图像大小，如下所示：

context.drawImage（img，0,0，canvas.width，canvas.height）。但是，似乎我无法直接更改
Image（）
维度，那么如何更改呢？谢谢

编辑：我没有使用交叉乘法正确求解图像@markE提供了一种获得正确比率的简洁方法。以下是我的新（工作）实施：

var scale = Math.min((200/img.width),(200/img.height));
img.width = img.width*scale;
img.height = img.height*scale;
clearCanvas(); //clear canvas
context.drawImage(img,0,0,img.width,img.height);

图像尺寸在构造函数中设置

new Image(width, height)
// for proportionally consistent resizing use new Image(width, "auto")

或

理由如下：

context.drawImage(image source, x-coordinate of upper left portion of image,
y-coordinate of upper left portion of image,image width,image height);  

只需用前两个数字坐标定位图像，然后用最后两个（宽度、高度）手动调整大小

以下是按比例缩放图像的方法：

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
    return(Math.min((maxW/imgW),(maxH/imgH)));
}

用法：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/balloon.png";
函数start（）{
画布宽度=100；
帆布。高度=100；
var w=img.宽度；
var h=img.高度；
//调整img的大小以适合画布
//您也可以要求img适应任何指定的宽度/高度
var sizer=scalePreserveApectRatio（宽、高、画布宽度、画布高度）；
ctx.drawImage（img，0,0，w，h，0,0，w*施胶器，h*施胶器）；
}
函数标度ReserveApectRatio（imgW、imgH、maxW、maxH）{
返回值（数学最小值（（maxW/imgW），（maxH/imgH））；
}
body{背景色：象牙；}
画布{边框：1px纯红；}
调整原始气球图像的大小以适合100x100画布
您应该在传递给的参数中设置图像的大小。另外，一般来说，先为映像设置加载处理程序，然后为src更安全。您能提供更详细的信息以更好地进行测试吗？--就像图像引用和HTML一样。这是真的，谢谢@Teemu，但是如果我设置这些变量，比如so
context.drawImage（img，0,0，img.width，img.height）
或
context.drawImage（img，0,0，null，null），它仍然会拉伸或不更改图像尺寸。它将显示
Image（）
没有
.width
和
.height
变量？期望的效果是什么？任何大于200x200的大小都将调整为200x200，而不考虑纵横比。你是想让它总是适合画布还是总是覆盖它？@JosephMarikle我试图保持一个纵横比，同时确保图像适合画布。。看看我当前的代码，我可以明白你的意思-如果图像的宽度和高度大于200，那么它将只设置为200。你有什么建议吗？很好地使用
Math.min（）
。设置
auto
将返回到
0
。
//ex.
var x = 0;
var y = 0;
var img = new Image (200, "auto");
    img.src = "xxx.png";
context.drawImage(img,x,y,img.width,img.height);

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
    return(Math.min((maxW/imgW),(maxH/imgH)));
}