图片裁剪功能模板简单实用 复制粘贴即可使用 11

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

<link rel="stylesheet" href="http://www.escook.cn:8086/assets/lib/cropper/cropper.css" />

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

<script src="http://www.escook.cn:8086/assets/lib/jquery.js"></script>
<script src="http://www.escook.cn:8086/assets/lib/cropper/Cropper.jss"></script>
<script src="http://www.escook.cn:8086/assets/lib/cropper/jquery-cropper.js"></script>

在主体区域中，定义如下的 HTML 结构

<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
  <!-- 图片裁剪区域 -->
  <div class="cropper-box">
    <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
    <img id="image" src="/assets/images/sample.jpg" />
  </div>
  <!-- 图片的预览区域 -->
  <div class="preview-box">
    <div>
      <!-- 宽高为 100px 的预览区域 -->
      <div class="img-preview w100"></div>