前言
在前端开发中，图片裁切是常见的需求。而 @eim-materials/crop-block 包就提供了一种简单的解决方案。
本文将详细介绍该 npm 包的使用方法，包括安装、API、示例代码及注意事项。希望能够帮助大家更好地应用这个工具。
安装
使用 npm 安装 @eim-materials/crop-block 包：
npm install @eim-materials/crop-block --save
API
1. CropBlock 组件
<CropBlock> 组件是本包的核心，提供了图片裁剪的功能。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ----------------------------
-------- ----- -
----- ------ -------- - ----------
-- --
-- --
------ ----
------- ----
---
----- ------------ - ------ -- -
--------------
--
----- -------------- - ------ ---------- -- -
----------------- -----------
--
------ -
----------
-------------------------------------
-----------
-----------------------
---------------------------
--
--
-CropBlock 在上述示例代码通过 props 接收了以下参数：
src：要裁剪的图片路径crop：裁剪区域的初始值，包括x、y、width和height四个属性onChange：当裁剪区域发生变化时的回调函数onComplete：当裁剪操作完成后的回调函数，会传入裁剪后的区域值以及区域的像素值
2. getCroppedImg 方法
getCroppedImg 方法是本包的辅助方法，用于从裁剪区域截取图片。
import { getCroppedImg } from '@eim-materials/crop-block';
const croppedImg = getCroppedImg(srcImg, pixelCrop);getCroppedImg 方法接收两个参数：
srcImg：被裁剪的图片对象pixelCrop：裁剪区域的像素值
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ - ---------- ------------- - ---- ----------------------------
-------- ----- -
----- ------ -------- - ----------
-- --
-- --
------ ----
------- ----
---
----- ------------ - ------ -- -
--------------
--
----- -------------- - ------ ---------- -- -
----------------- -----------
----- --- - ------------------------------
------- - ------------------------------------------------- ------------
-------------------------------
--
----- ------ - ------------------
----- ------------- - -- -- -
----- ---- - ------------------------
----- ------ - --- -------------
------------------------------- -- -- -
----------------------
---
---------------------------
--
----- ----- ------- - ---------------
------ -
-----
------ ----------- ------------ ------------------------ --
---- -- -
----------
---------
-----------
-----------------------
---------------------------
--
--
------
--
-
-------------------- --- ---------------------------------这个示例代码包括了如何将本地的图片上传到页面、如何使用 CropBlock 进行图片裁剪以及如何使用 getCroppedImg 方法从裁剪区域截取图片。
注意事项
CropBlock组件必须有明确的宽度和高度样式，否则无法正常渲染。getCroppedImg方法需要将被裁剪的图片对象作为第一个参数，否则将抛出错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d65