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

这篇博客介绍了如何使用JavaScript实现图片裁剪功能。首先,需要在HTML中引入cropper.css样式表和相关JS脚本。接着,定义HTML结构以创建裁剪区域,并设置美化样式。然后,配置裁剪比例和预览区域,通过DOM元素获取裁剪区域并初始化。当用户点击上传按钮时,手动触发文件选择框,限制文件类型为图片。文件选择后,更新裁剪区域的图片,并监听change事件以在用户选择文件后重新初始化裁剪。最后,裁剪完成后,调用接口将裁剪的头像上传至服务器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
在 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>
      <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>

美化的样式

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

实现基本裁剪效果

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

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

点击弹出上传文件选择框
默认的文件选择框样式比较丑,所以我们定义这个结构,让其隐藏,给文件选择框指定可以上传的文件类型

<input type="file" id="file" accept="image/png,image/jpeg" />

下面定义一个按钮,文本是 上传,一旦用户点击按钮,我们手动触发 文件选择框的点击事件

$('#btnChooseImage').on('click', function() {
  $('#file').click()
})

更换裁剪区域的图片

  • 给文件选择框绑定 change 事件
  • 用户选择了文件就会触发这个事件,通过 e.target.files 获取用户选择文件列表
  • 通过索引0拿到用户选择的文件
  • 将文件转化为路径
  • 利用 $image 重新初始化裁剪区域
// 为文件选择框绑定 change 事件
$('#file').on('change', function(e) {
  // 获取用户选择的文件
  var filelist = e.target.files
  if (filelist.length === 0) {
    return layer.msg('请选择照片!')
  }

  // 1. 拿到用户选择的文件
  var file = e.target.files[0]
  // 2. 将文件,转化为路径
  var imgURL = URL.createObjectURL(file)
  // 3. 重新初始化裁剪区域
  $image
    .cropper('destroy') // 销毁旧的裁剪区域
    .attr('src', imgURL) // 重新设置图片路径
    .cropper(options) // 重新初始化裁剪区域
})

将裁剪后的头像上传到服务器

var dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')

调用接口,把头像上传到服务器

$.ajax({
      method: 'POST',
      url: '/my/update/avatar',
      data: {
        avatar: dataURL
      },
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('更换头像失败!')
        }
        layer.msg('更换头像成功!')
        //这是一个渲染页面的函数,需要自己封装一个 头像上传之后调用渲染
        window.parent.getUserInfo()
      }
    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值