指南

介绍

Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。

  • Cropper.js 1.0 和 Cropper.js 2.0 有什么区别?
类型Cropper.js 1.0Cropper.js 2.0
创建于20152021
状态维护中活跃中
包数量112+
架构一体化模块化
浏览器兼容性现代浏览器 / IE 9+现代浏览器
可扩展
可定制
CSS-in-JS
按需引用
多选区
触摸旋转图片
  • Cropper、Cropper.js 和 jQuery Cropper 之间有什么区别?
GitHub 项目npm 包依赖创建于状态描述
Cropper在新窗口打开cropper在新窗口打开jquery在新窗口打开2014已废弃一个简单的 jQuery 图像裁剪插件。
Cropper.js在新窗口打开cropperjs在新窗口打开-2015活跃中JavaScript 图片裁剪器。
jQuery Cropper在新窗口打开jquery-cropper在新窗口打开jquery在新窗口打开 + cropperjs在新窗口打开2018维护中Cropper.js 的 jQuery 插件包装器。

入门

安装

npm

在使用 Cropper.js 构建大型应用程序时,推荐使用 npm 安装方法。

npm install cropperjs@next

对于特定的包:

npm install @cropper/element-canvas

CDN

出于原型设计或学习目的,你可以使用最新版本:

<script src="https://unpkg.com/cropperjs@next"></script>

对于生产,我们建议链接到特定版本号和文件名以避免新版本意外损坏。

使用

在 JavaScript 中使用

导入 Cropper 类并构造一个新的 Cropper 实例。

import Cropper from 'cropperjs';

const cropper = new Cropper('#image');
<img id="image" src="/cropperjs/v2/picture.jpg" alt="Picture">

在 DOM 中使用

cropperjs 包中导入所有 Cropper 元素,并自动将它们定义在新窗口打开为自定义元素。

import 'cropperjs';

按需引用

仅导入所需的 Cropper 元素,然后手动将它们定义在新窗口打开为自定义元素。

import CropperCanvas from '@cropper/element-canvas';
import CropperImage from '@cropper/element-image';
import CropperHandle from '@cropper/element-handle';

CropperCanvas.$define();
CropperImage.$define();
CropperHandle.$define();

安装包

Cropper.js 包含一系列 npm在新窗口打开 包:

安装包名称版本描述
cropperjsVersion在新窗口打开完整包。
@cropper/elementVersion在新窗口打开用于构造 Cropper 元素的抽象类。
@cropper/element-canvasVersion在新窗口打开Cropper 的自定义画布元素。
@cropper/element-imageVersion在新窗口打开Cropper 的自定义图像元素。
@cropper/element-shadeVersion在新窗口打开Cropper 的自定义阴影元素。
@cropper/element-handleVersion在新窗口打开Cropper 的自定义手柄元素。
@cropper/element-selectionVersion在新窗口打开Cropper 的自定义选区元素。
@cropper/element-gridVersion在新窗口打开Cropper 的自定义网格元素。
@cropper/element-crosshairVersion在新窗口打开Cropper 的自定义十字准线元素。
@cropper/element-viewerVersion在新窗口打开Cropper 的自定义查看器元素。
@cropper/elementsVersion在新窗口打开Cropper 的一系列自定义元素。
@cropper/utilsVersion在新窗口打开Cropper 的一系列常用常量和实用函数。

接口

接口名称继承自描述
CropperFunctionCropper 构造函数用于创建一个新的 Cropper 实例。
CropperElementHTMLElementCropperElement 接口代表任何 Cropper 元素,扩展了 HTMLElement在新窗口打开 接口。
CropperCanvasCropperElementCropperCanvas 接口提供了用于操作 <cropper-canvas> 元素的布局和表示的属性和方法。
CropperImageCropperElementCropperImage 接口提供了用于操作 <cropper-image> 元素的布局和表示的属性和方法。
CropperShadeCropperElementCropperShade 接口提供了用于操作 <cropper-shade> 元素的布局和表示的属性和方法。
CropperHandleCropperElementCropperHandle 接口提供了用于操作 <cropper-handle> 元素的布局和表示的属性和方法。
CropperSelectionCropperElementCropperSelection 接口提供了用于操作 <cropper-selection> 元素的布局和表示的属性和方法。
CropperGridCropperElementCropperGrid 接口提供了用于操作 <cropper-grid> 元素的布局和表示的属性和方法。
CropperCrosshairCropperElementCropperCrosshair 接口提供了用于操作 <cropper-crosshair> 元素的布局和表示的属性和方法。
CropperViewerCropperElementCropperViewer 接口提供了用于操作 <cropper-viewer> 元素的布局和表示的属性和方法。

浏览器支持

  • Edge 79+
  • Firefox 63+
  • Chrome 54+
  • Safari 10.1+
  • Opera 41+
  • iOS Safari 10.3+
  • Android Browser 81+
  • Opera Mobile 46+
  • Chrome for Android 81+
  • Firefox for Android 68+
  • Samsung Internet 6.2+