其他分享
首页 > 其他分享> > 关于使用layui加cropper实现裁剪图像

关于使用layui加cropper实现裁剪图像

作者：互联网

1. 基本使用步骤

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

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

  2. 在 <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>

  3. 在卡片的 layui-card-body 主体区域中，定义如下的 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>
             <p class="size">100 x 100</p>
           </div>
           <div>
             <!-- 宽高为 50px 的预览区域 -->
             <div class="img-preview w50"></div>
             <p class="size">50 x 50</p>
           </div>
         </div>
       </div>
     ​
       <!-- 第二行的按钮区域 -->
       <div class="row2">
         <button type="button" class="layui-btn">上传</button>
         <button type="button" class="layui-btn layui-btn-danger">确定</button>
       </div>

  4. 美化的样式：

     /* 设置卡片主体区域的宽度 */
     .layui-card-body {
       width: 500px;
     }
     ​
     /* 设置按钮行的样式 */
     .row2 {
       display: flex;
       justify-content: flex-end;
       margin-top: 20px;
     }
     ​
     /* 设置裁剪区域的样式 */
     .cropper-box {
       width: 350px;
       height: 350px;
       background-color: cyan;
       overflow: hidden;
     }
     ​
     /* 设置第一个预览区域的样式 */
     .w100 {
       width: 100px;
       height: 100px;
       background-color: gray;
     }
     ​
     /* 设置第二个预览区域的样式 */
     .w50 {
       width: 50px;
       height: 50px;
       background-color: gray;
       margin-top: 50px;
     }
     ​
     /* 设置预览区域下方文本的样式 */
     .size {
       font-size: 12px;
       color: gray;
       text-align: center;
     }
     ​
     /* 设置图片行的样式 */
     .row1 {
       display: flex;
     }
     ​
     /* 设置 preview-box 区域的的样式 */
     .preview-box {
       display: flex;
       flex-direction: column;
       flex: 1;
       align-items: center;
     }
     ​
     /* 设置 img-preview 区域的样式 */
     .img-preview {
       overflow: hidden;
       border-radius: 50%;
     }

  5. 实现基本裁剪效果：

       // 1.1 获取裁剪区域的 DOM 元素
       var $image = $('#image')
       // 1.2 配置选项
       const options = {
         // 纵横比
         aspectRatio: 1,
         // 指定预览区域
         preview: '.img-preview'
       }
     ​
       // 1.3 创建裁剪区域
       $image.cropper(options)

 

2. 更换裁剪的图片

  1. 拿到用户选择的文件

     var file = e.target.files[0]

  2. 根据选择的文件，创建一个对应的 URL 地址：

     var newImgURL = URL.createObjectURL(file)

  3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：

     $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newImgURL)  // 重新设置图片路径
        .cropper(options)        // 重新初始化裁剪区域

     

3. 将裁剪后的图片，输出为 base64 格式的字符串

 var dataURL = $image
       .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
         width: 100,
         height: 100
       })
       .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
 

 

标签：flex,样式,layui,image,裁剪,区域,cropper
来源： https://www.cnblogs.com/alwaysrun/p/16607433.html