简介
js-hqx 是一个 JavaScript 库，可以用来实现图片放大、缩小、旋转等效果。它支持多种图片格式，如 JPEG、PNG、GIF 等等。js-hqx 的特色在于它可以在浏览器端实现图像处理，不需要服务器参与处理。这个包已经发布到 npm 上，你可以方便地通过 npm 安装使用。
安装
你需要安装 Node.js 和 npm，然后在终端中运行以下命令：
npm install js-hqx --save
使用
引入库
在 HTML 中引入库：
<script src="node_modules/js-hqx/dist/js-hqx.min.js"></script>
或在 JavaScript 中引入：
const jsHqx = require('js-hqx');图片缩放
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- --------------
-------
------
---- -------- --------------------------------------- ------------
-----
------- -------------------------------
------- ------------------------------
------
------- ----------------------------------------------------------------------------
------- -------------------------------------
--------
--- ------- - -
------ ----
------- ----
------ ---
-
--- --- - -------------
--- ---- - --- --------------- ---------
-------- --------- -
-----------
-
-------- -------- -
----------
-
---------
-------
-------我们先创建一个 img 元素，然后在 js 代码中通过该元素的 ID 获取该元素。然后我们实例化 jsHqx.Zoom 对象并把该对象赋值给变量 zoom。
接下来，我们给两个按钮绑定事件函数：缩小和放大。在这两个函数中，我们调用 zoom 对象的 in() 和 out() 方法执行缩放操作。
图片旋转
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- --------------
-------
---- -
--------- ---------
----- ----
---- ----
---------- --------------- ----- -------------
----------------- -------
-
---- -
--------- ------
------ ------
------- -----
------------ -----
----------- -------
---------- -----
----------------- --------
------ ------
----- -----
------- -----
-
--------
-------
------
---- -------- --------------------------------------- ------------
---- -------- ---------------------------
------- ----------------------------------------------------------------------------
------- -------------------------------------
--------
--- --- - -------------
--- ----- - --
-------- -------- -
----- -- ---
----- - ----- - ----
------------------- - ---------------- ----- ---------------------
-
---------
-------
-------我们先创建一个 img 元素，并通过其 ID 获取该元素。接下来，我们给一个按钮绑定事件函数，当点击这个按钮时触发 img 元素的旋转操作。
在 js 代码中定义一个初始角度变量 angle 并赋值为 0。当旋转按钮被点击时，我们将 angle 值加上 90，然后对 360 取模以保证它的取值范围在 0 到 359，最后通过变量 angle 的值设置 img 元素的 transform 属性值。
总结
在使用 js-hqx 的过程中，我们可以得到以下经验和指导：
- js-hqx 实现图像处理非常便捷。
- 图像处理不需要服务器参与，完全可以在浏览器端实现。
- js-hqx 支持多种图片格式。
- 在操作图片缩放和旋转时，要记得给图片当初的大小赋值，否则无法正常实现这些效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cf081e8991b448da8df