How to use cropper.js on the mobile terminal to crop images and upload them (code analysis)

The content this article brings to you is about how to crop images and upload them using cropper.js on the mobile terminal (code analysis). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Introducing cropper to use

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

HTML structure

<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 reference:
For specific cropper.js usage, please view the official website

$(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');
                    }
                });
            });
        }
    });
})

Related recommendations:

How to implement the front-end cropping and uploading image function

javascript - How to implement the cropped image upload function on the mobile phone

The above is the detailed content of How to use cropper.js on the mobile terminal to crop images and upload them (code analysis). For more information, please follow other related articles on the PHP Chinese website!