寫文章

首頁手記 Cropper.js教程：簡(jiǎn)單易懂的圖像裁剪指南

Cropper.js教程：簡(jiǎn)單易懂的圖像裁剪指南

標(biāo)簽：

JavaScript 前端工具 Vue.js

概述

Cropper.js是一款强大的纯JavaScript图像裁剪插件，支持多种裁剪模式和自定义配置选项。本文将详细介绍如何安装和引入Cropper.js，并提供基本用法和配置选项的详解。此外，还会讲解Cropper.js支持的事件和方法，并给出实际应用案例。Cropper.js教程将帮助你轻松掌握这一功能强大的图像裁剪工具。

什么是Cropper.js

Cropper.js 是一个用纯 JavaScript 编写的图像裁剪插件，它提供了强大的图像裁剪功能。Cropper.js 本身不包含任何样式，但通过引入相关的 CSS 样式，可以轻松地将其集成到任何 Web 项目中。Cropper.js 可以在各种浏览器中运行，包括最新的浏览器和一些较旧的浏览器。

Cropper.js 的主要功能包括：

可以使用鼠标或触摸手势进行图像裁剪。
提供了多种图像裁剪模式，包括固定比例、自定义比例等。
支持图像缩放和平移操作。
提供了丰富的自定义配置选项，可以灵活地调整裁剪器的外观和功能。
提供了事件和方法，方便开发者对图像裁剪过程进行监听和控制。

安装和引入Cropper.js

通过CDN引入Cropper.js

可以通过 CDN 方式引入 Cropper.js。以下是引入 Cropper.js 的步骤：

首先引入 Cropper.js 依赖的 jQuery 库。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后引入 Cropper.js 库。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>

为了美观，还需要引入 Cropper.js 的样式文件。

<link rel="stylesheet" >

例如，完整的 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cropper.js 示例</title>
    <link rel="stylesheet" >
</head>
<body>
    <div style="width: 500px; height: 500px; display: inline-block;">
        <img id="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.jpg" alt="图片">
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
    <script>
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            viewMode: 1,
            dragMode: 'move',
            cropBoxMovable: false,
            zoomOnTouch: true,
            zoomOnWheel: true
        });
    </script>
</body>
</html>

通过npm安装Cropper.js

Cropper.js 可以通过 npm 来安装和引入。以下是安装步骤：

使用 npm 安装 Cropper.js。

npm install cropperjs

在项目中引入 Cropper.js。

import Cropper from 'cropperjs';

例如，完整的 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cropper.js 示例</title>
    <link rel="stylesheet" >
</head>
<body>
    <div style="width: 500px; height: 500px; display: inline-block;">
        <img id="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.jpg" alt="图片">
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
    <script>
        import Cropper from 'cropperjs';
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            viewMode: 1,
            dragMode: 'move',
            cropBoxMovable: false,
            zoomOnTouch: true,
            zoomOnWheel: true
        });
    </script>
</body>
</html>

基本用法

创建一个简单的图像裁剪器

创建一个简单的图像裁剪器，首先需要在页面中添加一个 img 标签，并将 cropper 构造函数应用到这个 img 标签上。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cropper.js 示例</title>
    <link rel="stylesheet" >
</head>
<body>
    <div style="width: 500px; height: 500px; display: inline-block;">
        <img id="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.jpg" alt="图片">
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
    <script>
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            viewMode: 1,
            dragMode: 'move',
            cropBoxMovable: false,
            zoomOnTouch: true,
            zoomOnWheel: true
        });
    </script>
</body>
</html>

调整图像的显示方式

Cropper.js 提供了许多配置选项来调整图像的显示方式。例如，可以使用 viewMode、dragMode、cropBoxMovable 等选项来控制图像的显示模式。

var cropper = new Cropper(image, {
    viewMode: 1, // 1 表示裁剪框只能移动和缩放
    dragMode: 'move', // 拖动模式为移动模式
    cropBoxMovable: false, // 裁剪框是否可移动
    zoomOnTouch: true, // 触摸缩放
    zoomOnWheel: true // 鼠标滚轮缩放
});

配置选项详解

常见配置选项

Cropper.js 提供了许多配置选项来控制裁剪器的行为和外观。以下是一些常见的配置选项：

aspectRatio：设定裁剪框的宽高比。
viewMode：设定图像的显示模式。
dragMode：设定拖动模式。
cropBoxMovable：设定裁剪框是否可移动。
zoomOnTouch：设定是否可以通过触摸缩放。
zoomOnWheel：设定是否可以通过鼠标滚轮缩放。

如何自定义配置

Cropper.js 的配置选项非常灵活，可以根据需要来自定义配置。例如，可以自定义裁剪框的颜色、边框样式等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cropper.js 示例</title>
    <link rel="stylesheet" >
</head>
<body>
    <div style="width: 500px; height: 500px; display: inline-block;">
        <img id="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.jpg" alt="图片">
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
    <script>
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            viewMode: 1,
            dragMode: 'move',
            cropBoxMovable: false,
            zoomOnTouch: true,
            zoomOnWheel: true,
            background: true, // 是否显示背景网格
            backgroundColor: 'rgba(0, 0, 0, 0.5)', // 背景颜色
            cropBoxResizable: false, // 裁剪框是否可调整大小
            ready: function() {
                console.log('Cropper is ready');
            },
            crop: function(e) {
                console.log(e.detail.x, e.detail.y, e.detail.width, e.detail.height);
            }
        });
    </script>
</body>
</html>

事件和方法

Cropper.js支持的事件

Cropper.js 支持多种事件，通过这些事件可以监听和控制图像裁剪的过程。

ready：裁剪器已经准备好。
dragstart：开始拖动裁剪框。
dragend：结束拖动裁剪框。
cropmove：移动裁剪框。
crop：裁剪框发生变化时触发。
zoom：缩放操作。

例如：

var cropper = new Cropper(image, {
    ready: function() {
        console.log('Cropper is ready');
    },
    crop: function(e) {
        console.log(e.detail.x, e.detail.y, e.detail.width, e.detail.height);
    }
});

常用的方法及其用法

Cropper.js 也提供了一些常用的方法来操作裁剪器。例如：

setData：设置裁剪框的位置和大小。
getData：获取裁剪框的位置和大小。
setData 和 getData 的参数都包含 x、y、width、height 四个属性。

例如：

var cropper = new Cropper(image);

// 设置裁剪框的位置和大小
cropper.setData({
    x: 50,
    y: 50,
    width: 200,
    height: 200
});

// 获取裁剪框的位置和大小
var data = cropper.getData();
console.log(data.x, data.y, data.width, data.height);

实际应用案例

图像裁剪在实际项目中的应用

图像裁剪在实际项目中有着广泛的应用，例如：

用户上传头像时，可以通过图像裁剪来确保头像符合一定的尺寸要求。
在电子商务网站中，商品图片通常需要符合特定的尺寸和比例要求，通过图像裁剪可以确保图片符合这些要求。

例如，在用户上传头像的场景中，可以使用 Cropper.js 来实现图像裁剪的功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户上传头像示例</title>
    <link rel="stylesheet" >
</head>
<body>
    <div>
        <input type="file" id="fileInput">
        <div style="max-width: 500px; max-height: 500px; display: inline-block;">
            <img id="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" alt="图片">
        </div>
    </div>
    <button id="cropButton">裁剪</button>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
    <script>
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {
            aspectRatio: 1 / 1,
            viewMode: 1,
            dragMode: 'move',
            cropBoxMovable: false,
            zoomOnTouch: true,
            zoomOnWheel: true
        });

        document.getElementById('fileInput').addEventListener('change', function() {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                image.src = e.target.result;
                cropper.replace(image.src);
            };
            reader.readAsDataURL(file);
        });

        document.getElementById('cropButton').addEventListener('click', function() {
            var croppedCanvas = cropper.getCroppedCanvas();
            croppedCanvas.toBlob(function(blob) {
                var formData = new FormData();
                formData.append('image', blob);
                // 将 formData 发送到服务器
            });
        });
    </script>
</body>
</html>

點(diǎn)擊查看更多內(nèi)容

為 TA 點(diǎn)贊

若覺得本文不錯(cuò)，就分享一下吧！

評(píng)論

評(píng)論

共同學(xué)習(xí)，寫下你的評(píng)論

評(píng)論加載中...

展開查看更多評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中

滄海一幻覺

手記
篇

粉絲

34

獲贊與收藏

198

關(guān)注作者，訂閱最新文章

閱讀免費(fèi)教程

JavaScript 入門教程

80個(gè)小節(jié) 320173 2264

后端通用面試教程

41個(gè)小節(jié) 32028 357

網(wǎng)絡(luò)編程入門教程

20個(gè)小節(jié) 13125 247

推薦

評(píng)論

收藏

共同學(xué)習(xí)，寫下你的評(píng)論



感謝您的支持，我會(huì)繼續(xù)努力的～

掃碼打賞，你說多少就多少

贊賞金額會(huì)直接到老師賬戶

支付方式

打開微信掃一掃，即可進(jìn)行掃碼打賞哦

今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與放棄機(jī)會(huì)

點(diǎn)擊
抽獎(jiǎng)

慕課手記新用戶專享福利

恭喜你，你的運(yùn)氣太好了，居然抽中了 100個(gè)積分！

恭喜你，抽中了價(jià)值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標(biāo)、機(jī)械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優(yōu)惠券
在等著你去兌換了噢

作者：

免費(fèi)贈(zèng)送

兌換碼：1111222211 復(fù)制

優(yōu)惠券可用于購(gòu)買實(shí)戰(zhàn)課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學(xué)習(xí)，選課去


第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空