使用HTML5中的Javascript缩小图像

Question

我尝试为用户上传照片创建工具，但我希望在上传这些照片之前缩小这些照片。

我最初的尝试是使用canvas 2d上下文中的缩放功能，但它会创建一个看起来很糟糕的图像。

我希望我可以使用CSS缩放功能，但我无法找到办法。

Answer 1

假设您希望最大宽度为800，最大高度为600，这里是if语句的简单代码。希望这会有所帮助。

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}