下面我将为你详细讲解“全屏js头像上传插件源码高清版”的完整攻略。

全屏js头像上传插件源码高清版

介绍

“全屏js头像上传插件源码高清版”是一款可供网页端使用的头像上传插件，能够帮助用户实现全屏界面下进行头像的上传。该插件基于Javascript语言进行开发，支持主流的浏览器（如Chrome、Firefox等）。

特点：

界面简洁、美观；
支持图片预览、拖拽上传、裁剪等功能；
插件源码开放，具有高度可定制性。

如何使用

第一步：下载插件源码

该插件采用开源方式，你可以从Github上下载到源码，也可以在CDN上获取到最新版本的插件文件。

第二步：引入插件

可以通过以下方式来引入插件：

<!-- 引入jQuery -->
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

<!-- 引入插件文件 -->
<link href="path/to/fullscreen.js.css" rel="stylesheet">
<script src="path/to/fullscreen.js"></script>

第三步：配置插件参数

你可以按照自己的需求进行配置，如下：

var options = {
    aspectRatio: 1 / 1,   // 宽高比
    preview: '.full-screen-preview',   // 预览图片的位置
    allowExif: true,   // 是否允许读取图片的元数据（尽量保持默认）
    callback: function(dataUrl) {   // 成功回调函数，dataUrl为裁剪后的图片
        console.log(dataUrl);
    }
}

$('#your-elem').fullscreen(options);

示例一：基本使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fullscreen.js Demo</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="./fullscreen.js.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-user-circle fa-fw"></i> 上传头像
                    </div>
                    <div class="panel-body">
                        <button type="button" class="btn btn-primary" data-target="#avatar-modal" data-toggle="modal">
                            <i class="fa fa-camera fa-fw"></i> 上传头像
                        </button>
                        <div class="full-screen-preview">
                            <!-- 预览图片的位置 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入jQuery及插件文件 -->
    <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="./fullscreen.js"></script>

    <script>
        $(function () {
            $('#avatar-modal').fullscreen({
                aspectRatio: 1 / 1,
                preview: '.full-screen-preview'
            });
        });
    </script>

    <!-- 模态框 -->
    <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="avatar-modal-label">上传头像</h4>
                </div>
                <div class="modal-body">
                    <div class="full-screen-modal-body">
                        <!-- 上传图片的位置 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary js-crop">裁剪并保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Cropper.js -->
    <script src="//cdn.bootcss.com/cropper/3.0.0-rc.2/cropper.min.js"></script>
    <script>
        $('.js-crop').click(function () {
            var dataUrl = $('#avatar-modal').find('.full-screen-modal-body').cropper('getCroppedCanvas').toDataURL();
            $('#avatar-modal').modal('hide');
            $('.full-screen-preview').find('img').remove().end().append('<img src="' + dataUrl + '">');
        });
    </script>

</body>
</html>

示例二：完整使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fullscreen.js Demo</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="./fullscreen.js.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-user-circle fa-fw"></i> 上传头像
                    </div>
                    <div class="panel-body">
                        <button type="button" class="btn btn-primary" data-target="#avatar-modal" data-toggle="modal">
                            <i class="fa fa-camera fa-fw"></i> 上传头像
                        </button>
                        <div class="full-screen-preview">
                            <!-- 预览图片的位置 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入jQuery及插件文件 -->
    <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="./fullscreen.js"></script>

    <script>
        $(function () {
            $('#avatar-modal').fullscreen({
                aspectRatio: 1 / 1,
                preview: '.full-screen-preview',
                showRotateBtn: true,
                showFlipBtn: true,
                modalTitle: '上传头像',
                modalBtnText: '裁剪并保存'
            });
        });
    </script>

    <!-- 模态框 -->
    <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="avatar-modal-label">上传头像</h4>
                </div>
                <div class="modal-body">
                    <div class="full-screen-modal-body">
                        <!-- 上传图片的位置 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary js-crop">裁剪并保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Cropper.js -->
    <script src="//cdn.bootcss.com/cropper/3.0.0-rc.2/cropper.min.js"></script>
    <script>
        $('.js-crop').click(function () {
            var dataUrl = $('#avatar-modal').find('.full-screen-modal-body').cropper('getCroppedCanvas').toDataURL();
            $('#avatar-modal').modal('hide');
            $('.full-screen-preview').find('img').remove().end().append('<img src="' + dataUrl + '">');
        });
    </script>

</body>
</html>

总结

通过以上的攻略，你已经可以愉快地使用“全屏js头像上传插件源码高清版”了。如果有任何问题或建议，欢迎发送邮件给作者进行反馈。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：全屏js头像上传插件源码高清版 - Python技术站

全屏js头像上传插件源码高清版

全屏js头像上传插件源码高清版

介绍

如何使用

第一步：下载插件源码

第二步：引入插件

第三步：配置插件参数

示例一：基本使用

示例二：完整使用

总结

相关文章