在我们平常的前端开发过程中，涉及到图片处理的场景是非常常见的。而在实际开发中，我们往往需要对图片进行调整大小的操作，以达到更好的展示效果或满足某些具体需求。在这个背景下，npm 上出现了一个非常简便好用的 npm 包：resize-image-canvas。
什么是 resize-image-canvas
resize-image-canvas 是一款基于 HTML5 canvas 技术实现的图片调整大小的库，它使用 JavaScript 语言开发，提供的 API 简单易用，并且能够很好地进行自定义开发以满足我们的具体需求。
安装与引入
我们可以通过 npm 安装它：
npm install resize-image-canvas --save
在项目中使用时，我们可以通过以下方式进行引入：
import ImageResize from 'resize-image-canvas'
或者采用传统的 script 标签引入：
<script src="https://unpkg.com/resize-image-canvas"></script>
API 详解
resizeImage(img, options)
该方法是 resize-image-canvas 的核心方法，它可用来调整图片大小并返回新的图片数据。
参数说明：
- img（必选）：需要调整大小的图片。
- options（可选）：图片调整选项，包括如下属性：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| maxWidth | Number | undefined | 图片的最大宽度。如果设置了该属性，则会按照该属性值进行等比例缩放。 |
| maxHeight | Number | undefined | 图片的最大高度。如果设置了该属性，则会按照该属性值进行等比例缩放。 |
| minWidth | Number | undefined | 图片的最小宽度。如果图片宽度小于该值，则会按照该值进行等比例放大。 |
| minHeight | Number | undefined | 图片的最小高度。如果图片高度小于该值，则会按照该值进行等比例放大。 |
| quality | Number | 0.8 | 图片的质量。默认值为 0.8。 |
| orientation | Boolean | false | 是否根据图片的 Exif 数据对图片进行自动旋转。默认值为 false。 |
imageDataToBlob(imageData, type, quality)
该方法可用来将图片数据转换为 Blob 对象。
参数说明：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| imageData | ImageData | 必选 | 调用 resizeImage 方法后返回的图片数据。 |
| type | String | image/jpeg | 图片对象的类型。 |
| quality | Number | 0.8 | 图片的质量。默认值为 0.8。 |
实例：将图片转换为符合要求的纵横比
假设我们要将一张尺寸比较大的图片缩小，并且要符合指定的宽高比，那么我们可以通过下列代码来实现，该代码采用 ES6 的语法：
-- -------------------- ---- ------- ------ ----------- ---- --------------------- ----- --- - --- ------- ------- - ------------------------------ ---------- - -- -- - ----- - ------ ------ - - --- ----- -------- - --- ----- --------- - --- ----- ----------- - --- ------------- ----- - ------ --------- ------- --------- - - ------------------------ ------ ------- --------- --------- -- ----- ---------------- - ---------------------------- ------- --------- ------- ---------- -------- ----- ----- ---- - --------------------------------------------- ------------- ---- -
总结
有了 resize-image-canvas，我们可以在前端非常容易地实现图片的调整大小操作。该库提供的 API 简单易用，能够满足绝大部分常见的图片处理需求。希望本篇教程能够对你在实际开发过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674b81e8991b448e3cc1