likes
comments
collection
share

jquery-cropper图片裁剪插件使用

作者站长头像
站长
· 阅读数 10

一、基本使用

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

**插件下载:**gitee.com/wen-chen/pl…

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

2、在 <body> 的结束标签之前,按顺序导入如下的 js 脚本:

<script src="/lib/jquery.js"></script>
<script src="/lib/cropper/Cropper.js"></script>
<script src="/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%;
}

效果图如下:

jquery-cropper图片裁剪插件使用

二、裁剪效果

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

// 创建裁剪区域
$image.cropper(options)

三、更换裁剪后的图片

1、拿到用户选择的文件

var file = e.target.files[0]

2、根据选择的文件,创建一个对应的 URL 地址:

var newImgURL = URL.createObjectURL(file)

3、先销毁旧的裁剪区域,再重新设置图片路径,之后再创建``新``的``裁剪区域

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

四、裁剪后的图片,输出为base64的字符串

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

六、完整代码

插件下载: gitee.com/wen-chen/pl…

注意:若使用layui可将脚本直接打开即可正常显示,若不需要可将其注释

1、files.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script></script>
    <!-- <link rel="stylesheet" href="./lib/layui/css/layui.css" /> -->
    <link rel="stylesheet" href="./lib/cropper/cropper.css" />
    <link rel="stylesheet" href="./css/file.css" />
  </head>
  <body>
    <!-- 第一行的图片裁剪和预览区域 -->
    <div class="row1" style="width: 60%;" >
      <!-- 图片裁剪区域 -->
      <div class="cropper-box">
        <!-- 这个 img 标签很重要,将来会把它初始化为裁剪区域 -->
        <img id="image" src="/image/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">
      <!-- 1、 隐藏域 -->
      <input type="file" hidden accept="image/jpg,image/jpeg,image/png" id="files">
      <button type="button" class="layui-btn" id="btnUpdate">上传</button>
      <button type="button" class="layui-btn layui-btn-danger" id="uploadSuccess">确定</button>
    </div>
    <!-- <script src="./lib/layui/layui.all.js"></script> -->
    <script src="./lib/jquery.js"></script>
    <script src="./lib/cropper/Cropper.js"></script>
    <script src="./lib/cropper/jquery-cropper.js"></script>
    <script src="./js/file.js"></script>
  </body>
</html>

 

2、files.css

/* 设置卡片主体区域的宽度 */
.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%;
}

3、files.js(重点)

$(function () {
  // !# 2 cropper图片裁剪插件使用
  //获取裁剪区域的dom元素
  var $image = $('#image')
  //   配置选项
  const options = {
    //  从横比
    aspectRatio: 1,
    //  指定预览区域
    preview: '.img-preview',
  }
  // 创建裁剪区域
  $image.cropper(options)


  //  3、模拟点击
  $('#btnUpdate').on('click', function () {
    $('#files').click()
  })


  //4 监听图片(隐藏文件)的变化,也就是用户是否选择文件
  $('#files').on('change', function (e) {
    // 拿到用户选择的文件
    var file = e.target.files[0]
    // 根据选择的文件,创建一个对应的 URL 地址:
    var newImgURL = URL.createObjectURL(file)
    // 先销毁旧的裁剪区域,再重新设置图片路径,之后再创建``新``的``裁剪区域
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })
  //  5 确定功能
  $('#uploadSuccess').on('click', function () {
    //5.1 将裁剪后的图片,输出为 base64 格式的字符串
    var dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL('image/png') // 将 Canvas 画布上的内容,转化为 base64 格式
    
     // 5.2 裁剪后的图片发送到服务器
    $.ajax({
      method: 'POST',
      url: 'xxxxx',
      data: { avatar: dataURL },
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('更新头像失败!')
        }
        // 更新头像成功后的操作
        layer.msg('更新头像成功!')
        // 头像更新成功后,调用父页面的方法来更新头像
        window.parent.getuserinfo()
      },
    })
  })
})

七、拓展-裁剪后的图片输出为文件(blob二进制)

1、裁剪后的图片,输出为文件(blob二进制)

  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
  })
  .toBlob(function(blob) {       // 将 Canvas 画布上的内容,转化为文件对象
    // 得到文件对象后,进行后续的操作
  })

注意:

1、有表单且接口请求体要求Formdata格式,可用下列图片

2、向服务器发送Formdata格式,必须设置以下两个属性, contentType:false,processData:false

2、完整代码

注意:其他代码都一样,就裁剪后的图片输出方式不同

   //监听表单提交行为
  $('#formSubmit').on('submit', function (e) {
    e.preventDefault()
    
    // 1 创建FormData对象
    var fd = new FormData($(this)[0])//将标题、分类、富文本三项放进去
    
    // fd.forEach(function(k,v){
    //   console.log(k,v);//标题、分类、富文本编辑器的名称及内容
    // })

    // 2 添加state参数数据
    fd.append("state",art_state)

    // 3 将裁剪后的图片,添加cover_img参数数据输出为文件
    $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
     }).toBlob(function(blob) {      // 将 Canvas 画布上的内容,转化为文件对象// 得到文件对象后,进行后续的操作
     
   //4 将文件对象添加到fd中
    fd.append("cover_img",blob)
    
    // 5 发起请求
    $.ajax({
      method:'POST',
      url:xxxx',
      data:fd,
      //若向服务器提交的是FormData格式的数据,必须添加以下两个配置
      contentType:false,
      processData:false,
      success:function(res){
        if(res.status!==0){
          return layer.mesage(res.message)
        }
        // 6添加成功,跳转到指定页面
        location.href="./xxxx.js"
      }
    })
    })

   
  })