cropper+jq（图片裁剪上传）

常安cc

已于 2023-10-23 16:04:33 修改

阅读量357

点赞数

分类专栏：前端 js 文章标签：前端 javascript layui

于 2023-10-23 15:55:41 首次发布

本文链接：https://blog.youkuaiyun.com/m0_55546349/article/details/133943250

版权

本文介绍了如何结合cropper库和jQuery，在前端实现图片裁剪并上传的功能。详细阐述了在父页面中如何调用弹窗页面进行图片处理的操作流程。

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

  <link rel="stylesheet" href="../../cropper/cropper.css"> 
  <script type="text/javascript" src="../../cropper/cropper.js"></script>

没有引入jquery的原因
在这里插入图片描述

引入jquery

  <script src="../jquery-1.10.2.js"></script>

在这里插入图片描述

这里使用的是3.1.5版本


<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box">
    <img id="image" src="../img/act.png">
</div>

 $('#image').cropper({
   
      aspectRatio: 1 / 1,
      viewMode: 1,
      crop: function (e) {
   
        console.log(e);
      }
    });

示例

在这里插入图片描述

父页面

 <!-- logo -->
                    <div class="layui-row" style="margin-bottom: 8px;">
                      <div class="layui-col-md12">
                        <div class="layui-form-item">
                          <label class="layui-form-label">logo：</label>
                          <div class="upload_reveal">上传图片
                            <input type="file" class="upload_file" id="coverImage" name="coverImage" />
                          </div>
                        </div>
                        <div class="layui-form-item" id="coverImageContent" style="padding-top: 10px">

                        </div>
                      </div>
                    </div>

  // logo--图片回调
    function setImg (url) {
   
      coverImageUrl = url;
      var html = '<div class="" style="position:relative;margin-left:110px;"><a href="' + url + '" target="_blank "  title="点击查看">' +
        '<img  src="' + url + '"  height="135px" width="135px" style="margin-bottom: 8px;"></a><div class="delImg">删除</div></div>';
      $("#coverImageContent").html(html);
    }


    // 删除图片
    $('#coverImageContent').on('click', '.delImg', function (event) {
   
      event.stopPropagation();//阻止事件冒泡
      var that = $(this);
      layer.

最低0.47元/天解锁文章