首页 > 网络编程 > JavaScript > javascript技巧 > Cropper.js裁剪保存本地

Cropper.js进阶之裁剪后保存至本地实现示例

2023-05-06 16:00:23 作者：MerkleJqueryRu

这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至本地实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

在开发Web应用程序时，经常需要对图片进行裁剪和编辑。Cropper.js是一个强大的JavaScript库，可以帮助我们实现图片的裁剪功能，并且提供了将裁剪后的图片保存至本地的方法。本文将介绍如何使用Cropper.js来实现这一功能。

正文

1. 引入Cropper.js

首先，我们需要在页面中引入Cropper.js库。

<script src="path/to/cropper.js"></script>

2. 创建图像裁剪器

在HTML文件中，我们需要创建一个图像裁剪器的容器，并在其中添加一个图像元素。这个容器将用于显示和裁剪图像。

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

3. 初始化Cropper.js

接下来，我们需要在JavaScript代码中初始化Cropper.js，并将其应用于图像元素。

// 获取图像元素
var image = document.getElementById('image');
// 初始化Cropper.js
var cropper = new Cropper(image, {
  aspectRatio: 1, // 设置裁剪框的宽高比例
  viewMode: 2 // 设置裁剪框在图像上的显示模式
});

4. 裁剪图像并保存至本地

当用户完成图像裁剪时，我们可以通过调用Cropper.js的方法来获取裁剪后的图像数据，并保存至本地。

// 获取裁剪后的图像数据
var croppedCanvas = cropper.getCroppedCanvas();
// 将图像数据转换为Base64编码
var imageData = croppedCanvas.toDataURL('image/jpeg');
// 创建一个链接元素
var downloadLink = document.createElement('a');
// 设置链接的属性
downloadLink.href = imageData;
downloadLink.download = 'cropped_image.jpg'; // 设置要保存的文件名
// 将链接添加到文档中
document.body.appendChild(downloadLink);
// 模拟点击下载链接
downloadLink.click();
// 清理并移除链接
document.body.removeChild(downloadLink);

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>图片裁剪工具</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" rel="external nofollow" >
  <style>
    img {
      width: 800px; 
      height: 500px;
    }
  </style>
</head>
<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="save()"> 保存 </button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
  <script>
    var image = document.getElementById('image');
    var fixedWidth = 300; // 设置裁剪结果的固定宽度
    var fixedHeight = 200; // 设置裁剪结果的固定高度
    var aspectRatio = fixedWidth / fixedHeight; // 计算宽高比
    // 创建 Cropper 实例，设置宽高比，禁止移动和缩放裁剪框，禁止重新框选选取
    var cropper = new Cropper(image, {
      viewMode: 2 // 设置裁剪框在图像上的显示模式
    });
      function save(){
      // 获取裁剪结果（返回裁剪后的图像数据）
      var imageData = cropper.getCroppedCanvas().toDataURL('image/png'); // 获取Base64编码的图像数据
      // 创建一个链接元素
      var downloadLink = document.createElement('a');
      // 设置链接的属性
      downloadLink.href = imageData;
      downloadLink.download = 'cropped_image.png'; // 设置要保存的文件名
      // 将链接添加到文档中
      document.body.appendChild(downloadLink);
      // 模拟点击下载链接
      downloadLink.click();
      // 清理并移除链接
      document.body.removeChild(downloadLink);
    }
  </script>
</body>
</html>

以上就是Cropper.js进阶之裁剪后保存至本地实现示例的详细内容，更多关于Cropper.js裁剪保存本地的资料请关注脚本之家其它相关文章！