欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

移动端cropper.js如何实现裁剪图片并上传(代码分析)

程序员文章站 2022-04-22 22:07:36
...
本篇文章给大家带来的内容是关于移动端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如何实现裁剪图片并上传(代码分析)的详细内容,更多请关注其它相关文章!