在HTML5中使用Javascript缩小图像

Scaling down images with Javascript in HTML5

本文关键字：Javascript 缩小 图像 HTML5      更新时间：2023-09-26

我想为用户创建一个上传照片的工具，但是我想在上传之前缩小这些照片。

我最初的尝试是使用画布2d上下文中的缩放函数，但它创建了一个糟糕的图像。

我希望我可以使用CSS缩放函数，但我无法找到这样做的方法

假设您希望最大宽度为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;
  }
}
相关文章：