使用cropper遇到的坑

    前不久使用cropper对图片进行编辑,一直碰见如下错误
Uncaught TypeError: $(...).cropper is not a function
    at FileReader.reader.onload (personal.jsp:186)

  在尝试更换不同版本的jquery.min.js和jquery.js文件多次之后,问题没有得到解决

  尝试更换不同版本的cropper.min.js文件多次之后,问题依然没有得到解决

 在心态有些爆炸的情况,突然受到他人的“指点”,突然发现项目里导入了很多次jquery.js和jquery.min.js...

<!-- Java Script
   ================================================== --> 
   <script src="../js/jquery-2.1.3.min.js"></script>
   <script src="../js/plugins.js"></script>
   <script src="../js/main.js"></script>  
   <script src="../js/test.js"></script>
   <script src="../js/jquery-2.1.1.js"></script>

于是把多余的jquery全部删掉,只留下一个

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../js/cropper.min.js"></script>

于是发生了奇迹的性的一幕

终于不报错了


我......

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Cropper.js 是一个功能强大的 JavaScript 图像剪裁库,可以帮助我们在浏览器中裁剪和编辑图片。下面是一个使用 Cropper.js 剪裁图片的完整 HTML 代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cropper.js 图片剪裁示例</title> <link href="https://cdn.bootcss.com/cropper/4.1.0/cropper.min.css" rel="stylesheet"> </head> <body> <div> <img id="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"> </div> <button id="btnCrop">剪裁图片</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/cropper/4.1.0/cropper.min.js"></script> <script> $(function () { var image = document.getElementById('image'); var cropper = new Cropper(image, { aspectRatio: 16 / 9, viewMode: 1, zoomable: false }); $('#btnCrop').click(function () { // 获取裁剪后的图片数据 var imgData = cropper.getCroppedCanvas().toDataURL(); // 显示裁剪后的图片 $('#result').html('<img src="' + imgData + '">'); }); }); </script> </body> </html> ``` 代码中,我们首先加载了 Cropper.js 和 jQuery 库,然后创建一个 `img` 标签用于显示图片。接着,我们使用 JavaScript 创建了一个 Cropper 对象,并设置了剪裁的宽高比、视图模式和是否可缩放等属性。最后,我们为一个按钮绑定了一个点击事件,在点击按钮时获取裁剪后的图片数据并显示在页面上。 需要注意的是,Cropper.js 的 CSS 和 JavaScript 文件需要从 CDN 引入。在使用时,需要根据实际情况设置图片的路径和剪裁的参数。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值