改变图片()对象的尺寸（宽度和高度）

Question

我正在尝试调整图像的尺寸，同时保持其宽高比。这似乎是一个非常简单的任务，但我无法在任何地方找到相关的答案（涉及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);

- Matthew Spence

---

在传递给 drawImage 的参数中，你应该设置图像的大小。此外，通常情况下，先为图像设置载入处理程序，然后再设置 src 更加安全。 - Teemu

你能提供更多细节以进行更好的测试吗？比如图片参考和HTML代码。 - Sarhanis

没错，谢谢@Teemu。但是如果我像这样设置这些变量context.drawImage(img,0,0,img.width,img.height);或者context.drawImage(img,0,0,null,null);，它仍然会拉伸或不改变图像的尺寸。看起来Image()没有.width和.height变量？ - Matthew Spence

你想要达到什么效果？无论长宽比如何，大于200x200的图像都将被调整为200x200大小。你是想让图像始终适应画布还是始终覆盖它？ - Joseph Marikle

@JosephMarikle 我正在尝试保持宽高比，同时确保图像适合画布。看着我的当前代码，我能明白你的意思——如果图像的宽度和高度大于200，那么它将仅被设置为200。你有什么建议吗？ - Matthew Spence

如果画布比图像大，使用 Math.min(200/img.width, 200/img.height, 1)。 - Alejandro Salamanca Mazuelo

Answer 1

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

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=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/balloon.png";
function start(){

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

  var w=img.width;
  var h=img.height;

  // resize img to fit in the canvas 
  // You can alternately request img to fit into any specified width/height
  var sizer=scalePreserveAspectRatio(w,h,canvas.width,canvas.height);

  ctx.drawImage(img,0,0,w,h,0,0,w*sizer,h*sizer);

}

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

body{ background-color: ivory; }
canvas{border:1px solid red;}

<h4>Original Balloon image resized to fit in 100x100 canvas</h4>
<canvas id="canvas" width=100 height=100></canvas>

- markE

---

很好地运用了 Math.min()。 - Matthew Spence

如果画布大于图像，则使用 Math.min(maxW / imgW, maxH / imgH, 1)。 - Alejandro Salamanca Mazuelo

Answer 2

图片尺寸在构造函数中设置。

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

或者

the context.drawImage() 

以下是参数列表：

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

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

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

- nick

---

设置auto将会回退到0。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-height - bertdida