本篇文章给大家带来的内容是关于移动端cropper.js如何实现裁剪图片并上传（代码分析） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
引入cropper使用
<link href="/path/to/cropper.css" rel="stylesheet"><script src="/path/to/cropper.js"></script>
html结构
<li class="ui-border-bottom">    <a href="javascripts:void(0);">头像        <span class="pull-right user-header">            <img class="rounded" id="avatar" src="../images/user.jpg" alt="avatar">            <input type="file" class="sr-only" id="input" name="image" accept="image/*">        </span>    </a></li>
<!--头像截图弹窗-->
<div class="common-layer" id="modal">    <div class="layer-content">        <div class="layer-title">            <span class="cancel-btn" id="cancle">取消</span>            <h4>截图头像</h4>        </div>        <div class="layer-area">            <div class="img-container">                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">            </div>            <a class="ui-btn m-t-15" id="crop" href="javascripts:void(0);">保存</a>        </div>    </div></div>
js引用：
具体cropper.js 使用可查看官网
$(function() {    //修改头像 参加文件https://blog.csdn.net/weixin_38023551/article/details/78792400    var avatar = document.getelementbyid('avatar');    var image = document.getelementbyid('image');    var input = document.getelementbyid('input');    var $modal = $('#modal');    var cropper;    //点击图片    input.addeventlistener('change', function (e) {        var files = e.target.files;        var done = function (url) {            input.value = '';            image.src = url;            $modal.show(function() {                //初始化                cropper = new cropper(image, {                    aspectratio: 1,                    viewmode:1,                });            });        };        var reader;        var file;        var url;        if (files && files.length > 0) {            file = files[0];            if (url) {                done(url.createobjecturl(file));            } else if (filereader) {                reader = new filereader();                reader.onload = function (e) {                    done(reader.result);                };                reader.readasdataurl(file);            }        }    });    //关闭弹窗    document.getelementbyid('cancle').addeventlistener('click', function () {        $modal.hide(function() {            cropper.destroy();            cropper = null;        });    });    //保存截图    document.getelementbyid('crop').addeventlistener('click', function () {        var initialavatarurl;        var canvas;        $modal.hide(function() {            cropper.destroy();            cropper = null;        });        if (cropper) {            canvas = cropper.getcroppedcanvas({                width: 120,                height: 120,            });            initialavatarurl = avatar.src;            avatar.src = canvas.todataurl('image/jpeg');            //保存数据            canvas.toblob(function (blob) {                var formdata = new formdata();                formdata.append('avatar', blob);                $.ajax('https://jsonplaceholder.typicode.com/posts', {                    method: 'post',                    data: formdata,                    processdata: false,                    contenttype: false,                    success: function () {                        console.log('upload success');                    },                    error: function () {                        avatar.src = initialavatarurl;                        console.log('upload error');                    }                });            });        }    });})
相关推荐：
怎样实现前端裁剪上传图片功能
javascript - 如何在手机端实现裁剪图片+上传功能
以上就是移动端cropper.js如何实现裁剪图片并上传（代码分析）的详细内容。