图像裁剪库Cropper.js的学习使用

2024-08-05 08:22:34 浏览数 (1)

1. 介绍

Cropper.js 是一个轻量级的 JavaScript 插件，用于在网页中实现图像裁剪功能。它提供了一个用户友好的界面，允许用户选择和裁剪图像，支持多种配置选项和功能。以下是一些关键特点：

  1. 简单易用：用户可以通过拖动和缩放来选择裁剪区域，操作直观。
  2. 多种裁剪模式：支持自由裁剪、固定比例裁剪、圆形裁剪等。
  3. 响应式设计：适配不同屏幕尺寸，确保在各种设备上都能良好展示。
  4. 图像预览：可以实时预览裁剪后的图像效果。
  5. 支持多种格式：支持 JPEG、PNG 等多种图像格式的导入和导出。
  6. 事件和回调：提供丰富的事件和回调函数，方便开发者进行自定义扩展。
  7. API 接口：提供简单的 API 方法，便于控制裁剪行为和获取裁剪结果。

Cropper.js 在图像处理、用户头像上传等场景中非常实用，广泛应用于各类网站和应用中。

2. 基础使用

今天我们要做就是一个这样的Demo.

  1. 图片上传
  2. 图片裁剪
  3. 图片旋转
  4. 图片缩放
  5. 图片导出

其中对于2 图片裁剪我们将会讲解一些一般网站常用的配置项目.

先看GIF效果

那我们就开始吧

2.1 引入cdn链接, 初始化样式, 实例化Cropper对象

引入cdn链接

代码语言：javascript复制
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
 <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>

初始化dom结构 样式

代码语言：javascript复制
    <div class="container">
        <!-- 原图 -->
        <div class="imagebox">
            <img id="image" src="/image/zrn4.jpg" width="100" alt="Picture">
        </div>

        <!-- 一系列操作按钮 -->
        <button id="crop">确认裁剪</button>
        <button id="rotate">rotate</button>
        <button id="reset">reset</button>
        <button id="clear">clear</button>
        <button id="replace">replace</button>
        <button id="destroy">destroy</button>
        <button id="zoomIn">zoomIn</button>
        <button id="zoomOut">zoomOut</button>
        <button id="setAspectRatio">setAspectRatio</button>
        <button id="export">export</button>
        <!-- 裁剪之后的预览 -->
        <div class="imagebox">
            <img id="preview"
                src="https://www.luoxiao123.cn/images/2016/10/300x200-1.jpg"
                alt="Preview">
        </div>
    </div>

下面就是css样式了

代码语言：javascript复制
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        body {
            width: 100vw;
            height: auto;
            padding: 20px;
            overflow-x: hidden;
            background-color: #f5f5f5;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: space-around;
            gap: 20px;
        }

        .imagebox {
            width: 300px;
        }

        .imagebox img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        #crop {
            width: 150px;
            height: 50px;
            border-radius: 15px;
            background-color: #000;
            color: #fff;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            transition: all 0.5s;
            border: none;
        }

        #crop:hover {
            background-color: #4d70ff;
            color: #fff;
            border: none;
        }

        /* 小尺寸宽 */
        @media screen and (max-width: 768px) {
            .container {
                flex-direction: column;
            }
        }

实例化Cropper对象

代码语言：javascript复制
const image = document.getElementById('image');
const cropper = new Cropper(image, {})

此时页面是这样的

2.2 设置裁剪比例

代码语言：javascript复制
aspectRatio: 4 / 3, // 裁剪比例

常用的裁剪比例:

  • 1:1 - 正方形裁剪
  • 4:3 - 常见的照片比例
  • 16:9 - 高清视频和宽屏照片
  • 3:2 - 经典相机照片比例

也可以自定义比例, 比如:

代码语言：javascript复制
aspectRatio: 1 / 2, // 裁剪比例

2.3 设置裁剪区域的显示模式

  • 0: 默认模式，裁剪框可以超出图像边界。
  • 1: 裁剪框保持在图像内部，图像可以被缩放。
  • 2: 裁剪框保持在图像内部，图像不能被缩放。
  • 3: 裁剪框保持在图像内部，图像可以被缩放，但裁剪框会根据图像的大小自动调整。

这个大家可以下去自行去试试.

代码语言：javascript复制
  const cropper = new Cropper(image, {
            aspectRatio: 1 / 3, // 裁剪比例
            viewMode: 1, // 裁剪模式
            })

2.4 是否可以移动裁剪区域

代码语言：javascript复制
cropBoxMovable: true, // 允许移动裁剪框

默认情况下, cropBoxMovable为true. 一般情况我们都会允许用户自行移动裁剪框的.

2.5 调整裁剪框大小

代码语言：javascript复制
cropBoxResizable: true, // 允许调整裁剪框大小

但是我们发现,当我们调整的时候它是按照等比例进行改变的. 如果我们只需要移动一边的大小, 其他边保持不变的话, 我们就需要将裁剪比例设置为NaN

代码语言：javascript复制
    aspectRatio: NaN, // 允许自由调整裁剪区域
    viewMode: 1, // 设置裁剪模式

2.6 拖动模式

代码语言：javascript复制
js
dragMode: 'move', // 拖动模式
  • 'crop' : 创建一个新的裁剪框（默认）。
  • 'move' : 移动画布。
  • 'none' : 没有操作。

2.7 响应式设计

Cropper.js 支持响应式设计，可以自动调整裁剪框的大小以适应容器的变化：

代码语言：javascript复制
js
responsive: true, // 响应式设计

当设置为 true 时，Cropper.js 会在窗口大小变化时重新渲染裁剪区域。

2.8 模态层和指示线

代码语言：javascript复制
js
modal: true, // 显示黑色模态层
guides: true, // 显示虚线指示

模态层可以更清晰地看到裁剪区域，指示线则提供了裁剪框的可视化辅助。

2.9 自动裁剪和裁剪区域大小

代码语言：javascript复制
js
autoCrop: true, // 启用自动裁剪
autoCropArea: 0.8, // 自动裁剪区域大小（百分比）

这可以在初始化时自动创建裁剪框，并允许您设置裁剪框的初始大小。

3. 一些实用方法

3.1 reset() 重置

重置图片和裁剪框到初始状态

代码语言：javascript复制
 // 重置
 document.getElementById('reset').addEventListener('click', () => {cropper.reset()});

3.2 clear() 清除

代码语言：javascript复制
 // 清除       
 document.getElementById('clear').addEventListener('click', () => {cropper.clear()});

3.3 replace() 替换

代码语言：javascript复制
 // 替换
  document.getElementById('replace').addEventListener('click', () => {
 cropper.replace('https://img95.699pic.com/photo/40250/3647.jpg_wh300.jpg')});

3.4 destory() 销毁

代码语言：javascript复制
// 销毁
document.getElementById('destroy').addEventListener('click', () => cropper.destroy()})

3.5 zoomIn() 放大

代码语言：javascript复制
// 放大
document.getElementById('zoomIn').addEventListener('click', () => {
    cropper.zoom(0.1);
});

3.6 zoomOut() 缩小

代码语言：javascript复制
// 缩小
document.getElementById('zoomOut').addEventListener('click', () => {
    cropper.zoom(-0.1);
});

3.7 setAspectRatio() 设置裁剪框的宽高比

代码语言：javascript复制
// 设置裁剪框的宽高比
document.getElementById('setAspectRatio').addEventListener('click', () => {
    cropper.setAspectRatio(16 / 9);
});

3.8 getCroppedCanvas() 导出图片

代码语言：javascript复制
// 导出图片
document.getElementById('export').addEventListener('click', () => {
    const base64Image = cropper.getCroppedCanvas().toDataURL('image/jpeg');
    // 打印
    console.log(base64Image);
    // 设置预览图像的 src
    preview.src = base64Image;
    // 点击下载
    const link = document.createElement('a');
    link.href = base64Image;
    link.download = 'cropped-image.jpg';
    link.click();
});

API 讲解

1. getCroppedCanvas()

getCroppedCanvas() 方法是 cropper.js 提供的一个方法，它返回一个 HTMLCanvasElement 对象，这个对象包含了裁剪框内的图像内容。使用这个方法时，Cropper 实例会基于当前的裁剪区域生成一个新的画布（canvas），并且画布上只有裁剪框内的图像。

这个方法可以接受一个可选的配置对象，用于指定裁剪画布的宽度和高度，以及是否进行裁剪操作。以下是该方法的一些参数：

  • width：裁剪后画布的宽度（像素）。如果不指定，默认使用裁剪框的宽度。
  • height：裁剪后画布的高度（像素）。如果不指定，默认使用裁剪框的高度。
  • minWidth：裁剪后画布的最小宽度。
  • minHeight：裁剪后画布的最小高度。
  • maxWidth：裁剪后画布的最大宽度。
  • maxHeight：裁剪后画布的最大高度。
  • fillColor：填充画布背景的颜色。
  • imageSmoothingEnabled：是否启用图像平滑处理。
  • imageSmoothingQuality：图像平滑处理的质量。

2. toDataURL()

toDataURL() 是 HTMLCanvasElement 对象的一个方法，它将画布上的内容导出为 base64 编码的字符串。这个字符串表示了一个图片的 data URI，可以直接用于网页中作为 src 属性的值，或者发送到服务器。

这个方法可以接受几个参数：

  • type：指定导出的图片格式，如 'image/jpeg'、'image/png' 等。如果不指定，默认为 'image/png'。
  • encoderOptions：一个在指定图片格式为 'image/jpeg' 或 'image/webp' 时可用的参数，它代表图片的质量，范围从 0 到 1，其中 1 表示最高质量。

效果展示:

完整代码.

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Cropper</title>
    <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        body {
            width: 100vw;
            height: 100vh;
            padding: 20px;
            display: flex;
            align-items: center;
            overflow-x: hidden;
            background-color: #f5f5f5;
        }

        .container {
            display: flex;

            align-items: center;
            justify-content: space-around;
            gap: 20px;
        }

        .imagebox {
            width: 300px;
        }

        .imagebox img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        #crop {
            width: 150px;
            height: 50px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
            transition: all 0.5s;
            border: none;
        }

        #crop:hover {
            background-color: #4d70ff;
            color: #fff;
            border: none;
        }
        button{
            padding: 1rem;
            border: none;
            border-radius: 5px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
            margin: 0.5rem;
        }
        button:hover{
            background-color: #96459f;
            color: #fff;
            border: none;
        }

        /* 小尺寸宽 */
        @media screen and (max-width: 768px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 原图 -->
        <div class="imagebox">
            <img id="image" src="/image/zrn4.jpg" width="100" alt="Picture">
        </div>

        <!-- 裁剪确认按钮 -->
        <button id="crop">确认裁剪</button>
        <button id="rotate">旋转</button>
        <button id="reset">重置</button>
        <button id="clear">清除</button>
        <button id="replace">替换</button>
        <button id="destroy">销毁</button>
        <button id="zoomIn">放大</button>
        <button id="zoomOut">缩小</button>
        <button id="setAspectRatio">设置裁剪框的宽高比</button>
        <button id="export">导出</button>
        <!-- 预览 -->
        <div class="imagebox">
            <img id="preview" src="https://www.luoxiao123.cn/images/2016/10/300x200-1.jpg" alt="Preview">
        </div>
    </div>


    <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>

    <script>
        const image = document.getElementById('image');
        const cropper = new Cropper(image, {
            aspectRatio: 4 / 3, // 裁剪比例
            viewMode: 0, // 裁剪模式
            cropBoxMovable: true, // 允许移动裁剪框
            cropBoxResizable: true, // 允许调整裁剪框大小
            // zoomable: true, // 允许缩放
            // zoomOnTouch: true, // 不允许触摸缩放
            // zoomOnWheel: true, // 不允许鼠标滚轮缩放
            // zoomOnDoubleClick: true, // 不允许双击缩放
            // toggleDragModeOnDblclick: false, // 不允许双击切换拖拽模式
            // responsive: true, // 响应窗口大小变化
            autoCropArea: 0.5, // 自动裁剪区域的比例(裁剪框的默认宽高比)
            // modal: true, // 取消遮罩层
            background: false, // 取消背景
            // guides: true, // 显示裁剪框内部的网格线
            // dragMode: 'corp', // 拖动模式
            


            rotatable: true, // 允许旋转


            // crop: function (e) {
            //     // 裁剪框发生变化时触发
            //     console.log('e', e);
            // },

            // ready: function (e) {
            //     // 裁剪框初始化完成时触发
            //     console.log('ready'   e.type, e);
            // },
        });



        // 裁剪
        document.getElementById('crop').addEventListener('click', () => {
            const croppedCanvas = cropper.getCroppedCanvas();
            const base64Image = croppedCanvas.toDataURL('image/jpeg');
            //  将裁剪后的图片base64编码保存到服务器
            // 打印
            console.log(base64Image);
            // 设置预览图像的 src
            preview.src = base64Image;
        });


        // 旋转裁剪框
        document.getElementById('rotate').addEventListener('click', () => {
            cropper.rotate(90);
        });

        // 重置
        document.getElementById('reset').addEventListener('click', () => {
            cropper.reset();
        });

        // 清除
        document.getElementById('clear').addEventListener('click', () => {
            cropper.clear();
        });

        // 替换
        document.getElementById('replace').addEventListener('click', () => {
            cropper.replace('https://img95.699pic.com/photo/40250/3647.jpg_wh300.jpg');
        });

        // 销毁
        document.getElementById('destroy').addEventListener('click', () => {
            cropper.destroy();
        })

        // 放大
        document.getElementById('zoomIn').addEventListener('click', () => {
            cropper.zoom(0.1);
        })

        // 缩小
        document.getElementById('zoomOut').addEventListener('click', () => {
            cropper.zoom(-0.1);
        })

        // 设置裁剪框的宽高比
        document.getElementById('setAspectRatio').addEventListener('click', () => {
            cropper.setAspectRatio(16 / 9);
        })

        // 导出图片
        document.getElementById('export').addEventListener('click', () => {
            const base64Image = cropper.getCroppedCanvas().toDataURL('image/jpeg');
            //  将裁剪后的图片base64编码保存到服务器
            // 打印
            console.log(base64Image);
            // 设置预览图像的 src
            preview.src = base64Image;
            // 点击下载
            const link = document.createElement('a');
            link.href = base64Image;
            link.download = 'cropped-image.jpg';
            link.click();
        })

    </script>
</body>

</html>
服务器 配置 响应式设计 button 对象

0 人点赞