jQuery中的cropper基本使用步骤

最新推荐文章于 2024-09-13 22:18:33 发布

殿君不是殿军

最新推荐文章于 2024-09-13 22:18:33 发布

阅读量780

点赞数

分类专栏： jQuery 经验分享文章标签： jquery css javascript

本文链接：https://blog.csdn.net/qq_43375584/article/details/124675670

版权

本文介绍了jQuery中的cropper插件的基本使用，包括如何导入样式和脚本，设置HTML结构以实现基本裁剪，更换裁剪图片的方法，以及如何将裁剪后的图片转换为base64字符串。

摘要由CSDN通过智能技术生成

1. 基本使用步骤

在 <head> 中导入 cropper.css 样式表：

<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：

<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构：

  <!-- 第一行的图片裁剪和预览区域 -->
  <div class="row1">
    <!-- 图片裁剪区域 -->
    <div class="cropper-box">
      <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
      <img id