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

crop js

crop.js 是一个用于图像裁剪的 JavaScript 库。

Cropper.js 是一个功能强大且简单易用的 JavaScript 插件，专门用于在网页中实现图像裁剪功能，以下是关于 Cropper.js 的详细介绍：

1、基础使用

引入文件：

可以通过<script> 标签和<link> 标签分别引入 Cropper.js 的库文件和 CSS 样式文件。

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

创建 HTML 结构：

在 HTML 文件中创建一个包含图片和剪裁区域的结构，通常使用<img> 标签来展示图片，并为其设置一个唯一的 ID。

        <div class="container">
          <img id="image" src="path/to/image.jpg" alt="Image">
        </div>

初始化 Cropper：

在 JavaScript 中获取图片元素，然后初始化 Cropper 对象，并将其绑定到图片上。

        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, // 剪裁框的最小高度
        });

2、常用方法

生成裁剪结果：使用cropper.getCroppedCanvas() 方法可以获取剪裁后的 Canvas 对象，然后可以将其转换为 Base64 编码的图像数据或上传到服务器进行保存。

“`javascript

var result = cropper.getCroppedCanvas({

width: 800,

height: 600

}).toDataURL(‘image/jpeg’); // 将剪裁结果转换为 Base64 编码的图像数据

响应用户操作：Cropper.js 提供了多种方法和事件，以便在用户操作时进行响应。cropper.crop()：进行剪裁，并返回剪裁结果。cropper.zoomTo(scale)：缩放图片到指定的比例。cropper.rotate(degree)：将图片旋转指定的角度。cropper.reset()：重置剪裁操作，还原到初始状态。cropper.destroy()：销毁 Cropper 实例。
     常见的事件包括ready（Cropper 准备就绪）、crop（剪裁完成）和zoom（缩放完成）等，可以通过监听这些事件并执行相应的操作来增强用户体验。

cropper.ready(function () {

console.log(‘Cropper is ready’);

}).on(‘crop’, function (event) {

console.log(‘Cropping completed’);

}).on(‘zoom’, function (event) {

console.log(‘Zooming completed’);

});

3、配置选项viewMode：定义裁切器的查看模式，可选值有 0（无限制）、1（限制裁切框不要超过图片的大小，图片可以小于容器框）、2（限制裁切框不能超出图片的范围，且图片填充模式为 cover 最长边填充满容器，有短边填充不满的情况）、3（限制裁切框不能超出图片的范围，且图片填充模式为 contain 最短边填充，最短边填充，有长边超出的现象）。dragMode：定义裁切器的拖动模式，可选值有crop（创建一个新的裁切框，图片不能移动）、move（不从新创建裁切框，可以拖动图片位置，此时需要确保movable 属性设置为true）、none（不从新创建裁切框，也不能拖动图片）。initialAspectRatio：定义裁切框的初始宽高比，默认情况下，它与画布（图像包装器）的纵横比相同，这个值只有在aspectRatio 值没有设置的时候生效。aspectRatio：设置裁切框为固定的宽高比。data：之前存储的裁剪后的数据，在初始化时会自动设置，只有在autoCrop 设置为true 时可用。preview：设置一个区域容器预览裁剪后的结果，可以是Element、Array（elements）、NodeList 或String（selector）。responsive：在窗口尺寸调整后进行响应式的重渲染，默认为true。restore：在窗口尺寸调整后恢复被裁剪的区域，默认为true。checkCrossOrigin：检查图片是否跨域，默认为true，如果是，会在被复制的图片元素上加上属性crossOrigin，并且在src 上加上一个时间戳，避免重加载图片时因为浏览器缓存而加载错误。checkOrientation：检查图片的方向信息（仅 JPEG 图片有），默认为true，在旋转图片时会对图片方向值做一些处理，以解决 iOS 设备上的一些问题。modal：是否显示图片和裁剪框之间的黑色蒙版，默认为true。guides：是否显示裁剪框的虚线，默认为true。center：是否显示裁剪框中间的 “+” 指示器，默认为true。highlight：是否显示裁剪框上面的白色蒙版（很淡），默认为true。background：是否在容器内显示网格状的背景，默认为true。autoCrop：允许初始化时自动的裁剪图片，配合data 使用，默认为true。autoCropArea：设置裁剪区域占图片的大小，值为 0-1，默认为 0.8，表示 80% 的区域。movable：是否可以移动图片，默认为true。rotatable：是否可以旋转图片，默认为true。scalable：是否可以缩放图片（可以改变长宽），默认为true。zoomable：是否可以缩放图片（改变焦距），默认为true。zoomOnTouch：是否可以通过拖拽触摸缩放图片，默认为true。zoomOnWheel：是否可以通过鼠标滚轮缩放图片，默认为true。wheelZoomRatio：设置鼠标滚轮缩放的灵敏度，默认为 0.1。cropBoxMovable：是否可以拖拽裁剪框，默认为true。cropBoxResizable：是否可以改变裁剪框的尺寸，默认为true。toggleDragModeOnDblclick：是否可以通过双击切换拖拽图片模式（move 和crop），默认为true，当拖拽图片模式为none 时不可切换，该设置必须浏览器支持双击事件。minContainerWidth、minContainerHeight、minCanvasWidth、minCanvasHeight、minCropBoxWidth、minCropBoxHeight：容器、图片、裁剪框的最小宽高，括号内为默认值，注意裁剪框的最小高宽是相对与页面而言的，并非相对图片。
4、示例代码
   以下是一个完整的示例代码，展示了如何使用 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 示例</title>

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

<style>

* { 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; }

</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">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/300×200-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, {});

// 确认裁剪按钮的事件监听

document.getElementById(‘crop’).addEventListener(‘click’, function () {

const croppedCanvas = cropper.getCroppedCanvas();

if (croppedCanvas) {

const result = croppedCanvas.toDataURL(‘image/jpeg’);

document.getElementById(‘preview’).src = result;

}

});

// 其他按钮的事件监听可以根据需要进行添加…

</script>

</body>

</html>

   上述代码中，首先引入了 Cropper.js 的 CSS 和 JS 文件，然后创建了一个包含图片和操作按钮的 HTML 结构，在 JavaScript 中，获取图片元素并初始化 Cropper 对象，当点击 “确认裁剪” 按钮时，获取裁剪后的 Canvas 对象，并将其转换为 Base64 编码的图像数据，然后设置为预览图片的src 属性，从而实现了图片裁剪功能的完整流程。
javascript农作物编程
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/111890.html
0

相关文章