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

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


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效果

image.png

那我们就开始吧

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

引入cdn链接

js

<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
 <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>

初始化dom结构 + 样式

html

<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样式了

css

* {
            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对象

js

const image = document.getElementById('image');
const cropper = new Cropper(image, {})

此时页面是这样的

image.png

2.2 设置裁剪比例

js

aspectRatio: 4 / 3, // 裁剪比例

常用的裁剪比例:

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

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

js

aspectRatio: 1 / 2, // 裁剪比例

image.png

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

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

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

js

const cropper = new Cropper(image, {
            aspectRatio: 1 / 3, // 裁剪比例
            viewMode: 1, // 裁剪模式
            })

2.4 是否可以移动裁剪区域

js

cropBoxMovable: true, // 允许移动裁剪框

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

2.5 调整裁剪框大小

js

cropBoxResizable: true, // 允许调整裁剪框大小

image.png

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

js

aspectRatio: NaN, // 允许自由调整裁剪区域
    viewMode: 1, // 设置裁剪模式

image.png

2.6 拖动模式

arduino

js
dragMode: 'move', // 拖动模式
  • 'crop' : 创建一个新的裁剪框(默认)。
  • 'move' : 移动画布。
  • 'none' : 没有操作。

2.7 响应式设计

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

arduino

js
responsive: true, // 响应式设计

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

2.8 模态层和指示线

arduino

js
modal: true, // 显示黑色模态层
guides: true, // 显示虚线指示

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

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

arduino

js
autoCrop: true, // 启用自动裁剪
autoCropArea: 0.8, // 自动裁剪区域大小(百分比)

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

3. 一些实用方法

3.1 reset() 重置

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

js

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

3.2 clear() 清除

js

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

3.3 replace() 替换

js

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

3.4 destory() 销毁

js

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

3.5 zoomIn() 放大

js

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

3.6 zoomOut() 缩小

js

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

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

js

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

3.8 getCroppedCanvas() 导出图片

js

// 导出图片
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 表示最高质量。

效果展示:

image.png

完整代码.

html

<!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>


目录
打赏
0
4
4
0
34
分享
相关文章
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
42 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
206 58
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
164 57
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
3月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何学习JavaScript?
如何学习JavaScript?
82 5
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
47 2
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
71 1
|
3月前
|
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
72 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等