当前位置：首页>行业动态> 正文

如何高效利用CropperJS文档来裁剪图像？

CropprJS是一款基于JavaScript的图像裁剪库，支持多种裁剪模式和自定义设置。

Cropper.js 文档解析

Cropper.js 是一个功能强大且灵活的图像裁剪工具库，支持多种现代浏览器，包括IE9以上版本，它可以通过简单的配置进行高度定制，适用于各种场景，如移动端和桌面端的图像裁剪，本文将详细解析 Cropper.js 的使用方法、配置选项以及常见问题解答。

安装与引入

需要通过 npm 或 yarn 安装 Cropper.js：

npm install cropperjs --save
或者
yarn add cropperjs

在项目的入口文件中引入 Cropper.js 的样式和脚本：

import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

基本使用

以下是一个简单的使用示例，展示如何使用 Cropper.js 进行图像裁剪：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cropper.js Example</title>
  <link rel="stylesheet" href="path/to/cropper.css">
</head>
<body>
  <div class="container">
    <img id="image" src="path/to/your/image.jpg" alt="Image">
  </div>
  
  <script src="path/to/cropper.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 16 / 9, // 裁剪框宽高比
      autoCropArea: 0.8, // 自动裁剪区域大小，相对于原始图片
      viewMode: 1, // 显示模式：0-裁剪框不可移动，1-裁剪框可移动，2-裁剪框自由移动
      movable: true, // 是否允许裁剪框移动
      zoomable: true, // 是否允许缩放图片
      rotatable: true, // 是否允许旋转图片
      guides: true, // 是否显示裁剪框虚线
      background: true, // 是否显示背景网格
      cropBoxMovable: true, // 是否允许裁剪框拖动
      cropBoxResizable: true, // 是否允许裁剪框缩放
      minCropBoxWidth: 100, // 裁剪框的最小宽度
      minCropBoxHeight: 100, // 裁剪框的最小高度
    });
  </script>
</body>
</html>

配置选项详解

配置项描述默认值
viewMode视图控制：0-无限制；1-限制裁剪框不能超出图片的范围；2-限制裁剪框不能超出图片范围且图片填充模式为cover；3-限制裁剪框不能超出图片范围且图片填充模式为contain。1
dragMode拖拽图片模式：crop-形成新的裁剪框；move-图片可移动；none-什么也没有。move
aspectRatio设置裁剪框为固定的宽高比。原图比例
autoCropArea设置裁剪区域占图片的大小，值为0-1，默认0.8表示80%的区域。0.8
preview设置一个区域容器预览裁剪后的结果，可以是Element、Array (elements)、NodeList或String (selector)。null
responsive窗口尺寸调整后进行响应式的重渲染。true
restore窗口尺寸调整后恢复被裁剪的区域。true
checkCrossOrigin检查图片是否跨域，如果是，会在被复制的图片元素上加上属性crossOrigin并在src上加上时间戳。true
modal是否显示图片和裁剪框之间的黑色蒙版。true
guides是否显示裁剪框的虚线。true
background是否在容器内显示网格状的背景。true
movable是否可以移动图片。true
rotatable是否可以旋转图片。true
scalable是否可以缩放图片（可以改变长宽）。true
zoomable是否可以缩放图片（改变焦距）。true
zoomOnTouch是否可以通过拖拽触摸缩放图片。true
zoomOnWheel是否可以通过鼠标滚轮缩放图片。true
wheelZoomRatio设置鼠标滚轮缩放的灵敏度。0.1
cropBoxMovable是否可以拖拽裁剪框。true
cropBoxResizable是否可以改变裁剪框的尺寸。true
toggleDragModeOnDblclick是否可以通过双击切换拖拽图片模式（move和crop）。true
minContainerWidth、minContainerHeight、minCanvasWidth、minCanvasHeight、minCropBoxWidth、minCropBoxHeight容器、图片、裁剪框的最小宽高。200×100

方法详解

Cropper.js 提供了丰富的方法来操作裁剪过程：

crop(): 手动显示裁剪框。

reset(): 重置图片和裁剪框为初始状态。

replace(url[, hasSameSize]): 替换图片路径并重建裁剪框，如果hasSameSize 设置为true，表示新老图片尺寸一样，只需要更换路径无需重建裁剪框。

enable(): 解冻裁剪框。

disable(): 冻结裁剪框。

destroy(): 摧毁裁剪框并移除 Cropper 实例。

如何高效利用CropperJS文档来裁剪图像？ 第1张

move(offsetX[, offsetY]): 移动图片指定距离，一个参数代表横纵向移动距离一样。

moveTo(x[, y]): 移动图片到一个指定的点。

zoom(ratio): 根据 ratio 缩放，大于零是放大，小于零缩小。

zoomTo(ratio[, pivot]): 根据 ratio 缩放并设置中心点的位置。

rotate(degree): 根据 degree 旋转，类似css。

rotateTo(degree): 根据 degree 旋转到绝对角度。

scale(scaleX[, scaleY]),scaleX(scaleX),scaleY(scaleY): 根据 scaleX 和 scaleY 缩放，一个参数代表横纵向缩放值一样。

getData([rounded]): 返回裁剪区域基于原图片的位置和尺寸，rounded 默认为false，表示是否显示四舍五入后的数据，有了这些数据可以直接在原图上进行裁剪显示。

setData(data): 根据 data 改变裁剪区域基于原图的位置和尺寸，仅当 viewMode 不为0时有效。

getContainerData(),getImageData(),getCanvasData(),setCanvasData(data),getCropBoxData(),setCropBoxData(data): 获取或设置容器、图片、画布、裁剪区域相对容器的数据。

getCroppedCanvas([options]): 得到被裁剪图片的一个canvas对象，options用于设置这个canvas的一些数据。

width,height,minWidth,minHeight,maxWidth,maxHeight,fillColor,fill: 设置或获取 canvas 对象的宽高和颜色等属性。

clear(): 清除 canvas 上的图像。

replace(url[, hasSameSize]): 替换图片路径并重建裁剪框，hasSameSize 设置为true，表示新老图片尺寸一样，只需要更换路径无需重建裁剪框。

render(): 强制渲染画布。

getCroppedImage([options], callback): 得到被裁剪后的图像，options用于设置这个图像的一些数据，callback为回调函数。

scaleX(scaleX),scaleY(scaleY): 根据 scaleX 和 scaleY 缩放，一个参数代表横纵向缩放值一样。

scale(scaleX[, scaleY]): 根据 scaleX 和 scaleY 同时缩放，一个参数代表横纵向缩放值一样。

rotate(degree): 根据 degree 旋转，类似css。

rotateTo(degree): 根据 degree 旋转到绝对角度。

destroy(): 销毁 Cropper 实例并移除事件监听器等资源释放操作。

表格示例：常用配置项及其说明

配置项说明默认值
aspectRatio设置裁剪框为固定的宽高比。原图比例
autoCropArea设置裁剪区域占图片的大小，值为0-1，默认0.8表示80%的区域。0.8
viewMode视图控制：0-无限制；1-限制裁剪框不能超出图片的范围；2-限制裁剪框不能超出图片范围且图片填充模式为cover；3-限制裁剪框不能超出图片范围且图片填充模式为contain。1
responsive窗口尺寸调整后进行响应式的重渲染。true
restore窗口尺寸调整后恢复被裁剪的区域。true
checkCrossOrigin检查图片是否跨域，如果是，会在被复制的图片元素上加上属性crossOrigin并在src上加上时间戳。true
modal是否显示图片和裁剪框之间的黑色蒙版。true
guides是否显示裁剪框的虚线。true
background是否在容器内显示网格状的背景。true
movable是否可以移动图片。true
rotatable是否可以旋转图片。true
scalable是否可以缩放图片（可以改变长宽）。true
zoomable是否可以缩放图片（改变焦距）。true
zoomOnTouch是否可以通过拖拽触摸缩放图片。true
zoomOnWheel是否可以通过鼠标滚轮缩放图片。true
wheelZoomRatio设置鼠标滚轮缩放的灵敏度。0.1
cropBoxMovable是否可以拖拽裁剪框。true
cropBoxResizable是否可以改变裁剪框的尺寸。true
toggleDragModeOnDblclick是否可以通过双击切换拖拽图片模式（move和crop）。true
minContainerWidth、minContainerHeight、minCanvasWidth、minCanvasHeight、minCropBoxWidth、minCropBoxHeight容器、图片、裁剪框的最小宽高。200×100

常见问题解答

问题1: Cropper.js如何在Vue中使用？

答：在Vue项目中使用Cropper.js非常简单，可以参考以下步骤：

1、安装依赖：通过npm或yarn安装Cropper.js。

2、引入库文件：在项目的入口文件中引入Cropper.js的样式和脚本。

3、创建组件：创建一个Vue组件，使用template标签包裹图片和按钮，通过ref属性给图片元素命名，然后在mounted钩子中初始化Cropper实例，具体代码如下：

   <template>
     <div>
       <img ref="imageRef" :src="imageSrc" alt="image">
       <button @click="cropImage">裁剪图片</button>
     </div>
   </template>
   <script setup>
   import {ref, onMounted} from "vue";
   import Cropper from 'cropperjs';
   import "cropperjs/dist/cropper.css";
   const imageRef = ref(null);
   const imageSrc = ref("path/to/your/image.jpg");
   const myCropper = ref(null);
   const cropImg = () => {
     myCropper.value.getCroppedCanvas().toDataURL((base64) => {
       console.log(base64); // 打印Base64格式的裁剪后的图片数据
     });
   };
   const init = () => {
     myCropper.value = new Cropper(imageRef.value, {
       aspectRatio: 16 / 9, // 设置裁剪框的宽高比
       autoCropArea: 0.8, // 设置自动裁剪区域大小，相对于原始图片
       viewMode: 1, // 显示模式：0-剪裁框不可移动，1-剪裁框可移动，2-剪裁框自由移动
       movable: true, // 是否允许拖动图片
       zoomable: true, // 是否允许缩放图片
       rotatable: true, // 是否允许旋转图片
       guides: true, // 是否显示剪裁框虚线
       background: true, // 是否显示背景网格
       cropBoxMovable: true, // 是否允许拖动裁剪框
       cropBoxResizable: true, // 是否允许缩放裁剪框
       minCropBoxWidth: 100, // 裁剪框的最小宽度
       minCropBoxHeight: 100, // 裁剪框的最小高度
     });
   };
   // 确保DOM元素加载完成后再初始化Cropper实例
   onMounted(() => {
     if (imageRef.value) {
       init();
     }
   });
   </script>

4、使用方法：在模板中引用该组件，并通过props传递必要的参数即可。

   <template>
     <cropper-img :imageSrc="imageSrc" @updateImageSrc="updateImageSrc"/>
   </template>
   <script setup>
   const imageSrc = ref('https://cdn.tehub.com/uploads/bCChGvhsbU/u/avatar/a2885f74-5400-48a1-fa93-a0bbdb7bddd6.jpeg?imageView2/1/w/200/h/200/q/100');
   const updateImageSrc = (updateImageSrc) => {
     imageSrc.value = updateImageSrc;
   };
   </script>

这样，你就可以在Vue项目中轻松使用Cropper.js进行图像裁剪了。

CropperJS文档裁剪图像高效利用
0

相关文章