cropper.js使用

最新推荐文章于 2024-08-09 07:15:36 发布

赵二水

最新推荐文章于 2024-08-09 07:15:36 发布

阅读量2.7k

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_51983617/article/details/121235614

版权

在实现上传头像功能时，作者遇到cropper.js使用问题，报错“cropper is not a function”。尝试调整jq和cropper的引入顺序、版本匹配等方法无效。通过阅读他人博客和官方文档，发现本地引用与CDN引入的cropper.js使用方式不同。最终，作者按照正确方式实现了功能，但感叹浪费了过多时间，提醒自己避免盲目复制代码，要有解决问题的能力。

摘要由CSDN通过智能技术生成

这两天一直在写上传头像那一部分，需要用到cropper裁剪，算起来这是我第二次用了，本来以为会比较顺手，结果一直报这个错。

在这里插入图片描述

本来以为是jq和cropper的引入顺序问题，结果调好了还在报这个错误，然后又考虑到会不会是jq和cropper的版本不对应，又知道cropper和cropper.js不一样,甚至还有一个jquery-cropper，去cropper.js官网看也不懂，看人家做出来的效果又觉得难，最后还是认真看了看别人总结翻译官网文档的博客，才知道本地引的和用cdn链接的js，对应的cropper写法完全不一样。按照别人翻译出来的效果就是很简单的样子，没有弹窗预览效果和翻转图片什么的，又觉得自己写不出来，就还是找别人写好的样式，结果又开始报上面的错，最后迫不得已，才决定自己按照别人的样式写一下，写完才觉得其实很简单，一整个麻住了，感觉自己浪费太多时间去cv别人的去去反复解决那一个报错，还是把这个经过和代码写下来提醒提醒自己，不能还没有开始做就觉得自己不能做。

	<!-- 引入css与引入js相同 -->
	<div class="changeHeadBtn">
        <!-- <input class="changeInput" type="file"/> -->
        <p class="upBtnFont"><i class="iconfont icon-banbenshengji"></i>更换头像</p>
    </div>
    <!-- 画布弹窗 -->
    <div class="box">
        <div class="cropperContent">
            <div class="cropperTop">
                <div class="seleceImgBtn">
                    <p class="upInputFont">选择图片</p>
                    <input type="file" class="cropperInput"/>
                </div>
                <p class="scloseCropper">x</p>
            </div>
            <div class="cropperCenter">
                <div class="centerLeft">
                    
                </div>
                <div class="centerRight">
                    <p>图片预览:</p>
                    <div class="small"></div> 
                    <div class="small" style="border-radius: 100%;"></div>  

                </div>
            </div>
            <div class="cropperBottom">