在前端开发中，图片处理是一个很重要的部分。常见的图片操作包括缩放、裁剪、压缩等。本文将介绍如何使用JavaScript在客户端实现图片旋转和镜像的功能。
图片旋转
原理
图片旋转的原理是利用canvas画布进行旋转。首先将图片绘制到画布上，再对画布进行旋转变换，最后将画布上的内容输出为新的图片。
实现
以下是使用JavaScript实现图片旋转的代码：
-- -------------------- ---- -------
---
- ---------
- ------ -------- ------ - ----
- ------ -------- ------ - ----
- ------ ---------- -------- - ---------------
--
-------- ----------------- ------- --------- -
----- --- - --- --------
--------------- - ------------
---------- - ---------- -
----- ------ - ---------------------------------
----- --- - ------------------------
------------ - -----------
------------- - ----------
-- ---------
-------------------------- - -- ------------- - ---
----------------- - ------- - -----
------------------ ---------- - -- ----------- - ---
-- ----------
------------------ -- -
----- ------ - --- -------------
------------- - ---------- -
----------------------
--
---------------------------
-- ------------- -----
--
------- - -------
-可以看到，使用Image对象加载图片，然后将图片绘制到画布上，并进行旋转变换。最后通过toBlob方法将画布上的内容输出为新的图片。
示例
以下是一个示例，在网页中展示一张原始图片和旋转后的图片：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---- ----------------- ----------------------------------- -----------
------- -----------------------------
--------
----- ----------- - ----------------------------------------
----- ------------- - ------------------------------------------
----- --- - -------------------------------
-- -------------
----- --- - --- --------
--------------- - ------------
---------- - ---------- -
------------------- - -----------
-------------------- - ----------
--------------------------------- - -- -------------------- - ---
------------- - ------- - -----
------------------ ---------- - -- ----------- - ---
--
------- - ----------------
---------
-------
-------图片镜像
原理
图片镜像的原理是利用canvas画布进行水平或垂直翻转。使用scale方法对画布进行缩放变换，将图片的宽度或高度取反即可完成镜像操作。
实现
以下是使用JavaScript实现图片镜像的代码：
-- -------------------- ---- -------
---
- ------------
- ------ -------- ------ - ----
- ------ -------- ---- - -----------------------
- ------ ---------- -------- - ---------------
--
-------- ----------------- ----- --------- -
----- --- - --- --------
--------------- - ------------
---------- - ---------- -
----- ------ - ---------------------------------
----- --- - ------------------------
------------ - ----------
------------- - -----------
-- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------