简介
iresize是一个用于前端的JS插件，它可以用于在网页上显示并操作图片。iresize可以让你裁剪、缩放、旋转、翻转和调整图片大小。iresize是基于HTML5的canvas API构建的，支持响应式布局，因此可以在移动设备和桌面设备上使用。
安装
iresize是一个npm包，可以通过以下命令安装：
npm install iresize --save
##使用
- HTML结构
<div id="iresize-container"> <canvas id="iresize-canvas"></canvas> </div>
- JavaScript代码
-- -------------------- ---- ------- -- --------- ------ ------- ---- ---------- -- ---------- ----- ------ - ------------------------------------------ -- ----------- ----- --------------- - --- --------------- - --------- -- ------------ -- - -- --------- ------- ---------- ----- --------- ----- ---------- ----- --------------- ----- --- -- ---- --------------------------------------
配置项
iresize支持以下配置项：
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| viewMode | Number | 0 | 显示模式，可以为0（原图），1（充满整个画布）或2（确保画布至少有一条边与图像相等） |
| aspectRatio | Number | null | 图片宽高比。 |
| dragMode | String | 'move' | 拖拽模式，'crop'为裁剪，'move'为移动解染图片，'none'禁止拖拽 |
| rotatable | Boolean | true | 是否可旋转 |
| scalable | Boolean | true | 是否支持缩放 |
| resizable | Boolean | true | 是否允许调整大小 |
| mouseWheelZoom | Boolean | true | 是否允许使用鼠标滚轮缩放 |
方法
iresize支持以下方法：
| 方法 | 参数 | 描述 |
|---|---|---|
| load | url | 加载图片 |
| getData | - | 返回当前图像的数据，包括宽度、高度、左上角坐标、角度、缩放等信息。 |
| setData | data | 设置图片数据 |
| reset | - | 重置图片到初始化状态 |
| rotate | degree | 旋转图像(度数)。负值代表逆时针旋转，正值代表顺时针旋转。 |
| zoom | scale | 缩放图像(倍数)。 |
| move | dx, dy | 移动图像。 |
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---------------
-------
---- -
------- --
-------- --
----------- -------
-
------------------ -
------ ----
------- - -----
-
------ -
-------- ------
------- - -----
-
------ -
------- -----
-
----- -
----------- -----
-
--------
-------
------
---- -----------------------
------- -----------------------------
------
-----
------- -----------------------------
------- ---------------------------
------- ----------------------
------- -------------------------------
------- --------------------------------
------ -----------------------------
------ --------------- ------------- ---------- ----------
------
------- ----------------------------------------------------------
--------
----- ------ - ------------------------------------------
----- ------------ - --------------------------------------
----- ------- - ------------------------------------
----- ----- - ---------------------------------
----- ---------- - ---------------------------------------
----- ----------- - ----------------------------------------
----- --------- - --------------------------------------
----- --------------- - --- --------------- -
--------- --
------------ -----
--------- -------
---------- -----
--------- -----
---------- -----
--------------- -----
---
-------------------------------------- -- -- -
-----------------------------------------------------------------------------------------------------------
------------------- - --------
------------------------ - --------
------------------------- - --------
----------------------- - --------
---
--------------------------------- -- -- -
---------------------------------------
---
------------------------------- -- -- -
------------------------
---
------------------------------------ -- -- -
----------------------------
---
------------------------------------- -- -- -
---------------------------
---
------------------------------------ -- -- -
------------------------------------------------ -----
---
---------
-------
-------总结
iresize是一个高效、易用的图片处理插件，它提供了多种图片处理功能。可以方便地被集成到您的项目中。无论是进行图片裁剪、缩放、旋转还是调整大小，iresize都能够提供优秀的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005683981e8991b448e44e9