时间戳

首页 > 解决方案 > Reactjs：如何在客户端将图像最小化为特定的纵横比？

javascript - Reactjs：如何在客户端将图像最小化为特定的纵横比？

问题描述

在，我想以最小的方式裁剪图像，使其适合给定的纵横比。

示例：给定一张 3038 x 2014 像素的图像，我想将其裁剪为 1:2 的纵横比。然后生成的图像将是 3021 x 2014 像素，从原始图像的中心裁剪。

标签： javascriptreactjsimage-processingclient-server

解决方案

我写了一篇关于使用 JavaScript 裁剪图像以适应特定纵横比的文章（根据您的要求在中心）。

给定提供的纵横比，这将创建原始图像的克隆。我们在文章中创建的函数可以这样调用：

crop('url/to/image.jpg', 1).then(canvas => {
    // canvas is a new image canvas based
    // on the source image and the supplied aspect ratio
})

// or use async/await
const canvas = await crop('url/to/image.jpg', 1);

我还设置了一个Codepen 演示

推荐阅读