jQuery插件jcrop+Fileapi实现图片上传+裁剪+预览

在前端开发中，经常需要实现图片上传、裁剪和预览功能。其中，jCrop是一个基于jQuery的图片裁剪插件，而FileAPI则是一个用于在浏览器中读取本地文件的JavaScript库。本文将介绍如何使用这两个工具结合起来实现图片上传、裁剪和预览功能。

准备工作

在使用jCrop和FileAPI之前，需要在HTML文档中引入它们的库文件。可以从官网下载最新版本。

----- ---------------- -------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------

实现步骤

1. 添加 HTML 元素

首先，在页面中添加一个用于展示上传图片的元素，并添加一个按钮用于触发上传操作：

------ ----------- --------------- -----------------
---- ------------------
  ---- --------------------------
    ---- -----------------
  ------
------
------- --------------------------------

其中，input 标签的 type 属性为 file，accept 属性为 image/* 表示只允许上传图片类型的文件。

2. 读取本地文件

使用FileAPI库可以非常方便地读取本地文件。这里我们在文件选择后就展示图片，并进行裁剪操作：

----- ------------ - ---------------------------------------
----- ----------- - --------------------------------------

-------------------------------------- ----------- -
  ---------------------------------------- -------- ----- -
    -- --------- --- ------- -
      ---------------- - -----------
      -----------------------
        ------------ -- -- --------
        --------- ------------ -- -------- ------------ --
      ---
    -
  ---
---

上述代码中，使用 FileAPI.readAsDataURL 方法读取文件并将其转换为 data URL 格式，而 $(imageElement).Jcrop() 则是将图片元素转换为可裁剪对象，并执行了一些配置项，其中 aspectRatio 用于设置裁剪比例， onSelect 用于在完成选择后调用 updateCoords 函数。

3. 实现裁剪

通过 jCrop 的 setSelect 方法可以实现裁剪区域的动态调整，并通过 getImageData 方法获取裁剪后的数据：

--- -----

-------- --------------- -
  ---- - --
-

---------------------------------- -- -
  ----- --- - --- --------
  ---------- - ---------- -
    ----- ------ - ---------------------------------
    ----- --- - ------------------------
    ------------ - -------
    ------------- - -------
    ------------------ ------- ------- ------- ------- -- -- ------- --------
    ----- ------- - ------------------------------
    --------------------- -- ---------------
  --
  ------- - -----------------
---

上述代码中， updateCoords 方法用于更新裁剪区域的坐标数据，而在点击“上传图片”按钮时，通过创建一个新的 Image 对象来读取图片数据，并使用 drawImage 方法在 Canvas 上绘制裁剪后的图片，最后可以通过 toDataURL 方法将裁剪结果转换成 data URL 格式。

4. 预览功能

预览功能通常需要将选定的区域实时展示给用户。这里我们可以通过 jCrop 的 onChange 和 `onRelease

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/2668

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享