文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript实现更换头像功能

2024-04-02 19:55

关注

本文实例为大家分享了JavaScript实现更换头像功能的具体代码,供大家参考,具体内容如下

最主要的是使用jquery的插件 cropper

1、基本使用步骤

1.在 <head> 中导入 cropper.css 样式表:


<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

2.在 <body> 的结束标签之前,按顺序导入如下的 js 脚本:


<script src="/assets/lib/jquery.js"></script>
<!-- 导入cropper的js脚本 -->
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

3.定义如下的 HTML 结构:


<!-- 第一行的图片裁剪和预览区域 -->
   <div class="row1">
         <!-- 图片裁剪区域 -->
            <div class="cropper-box">
                    <!-- 这个 img 标签很重要,将来会把它初始化为裁剪区域 -->
                    <img id="image" src="/assets/images/sample.jpg" />
             </div>
             <!-- 图片的预览区域 -->
             <div class="preview-box">
                    <div>
                        <!-- 宽高为 100px 的预览区域 -->
                        <div class="img-preview w100"></div>
                        <p class="size">100 x 100</p>
                    </div>
                    <div>
                        <!-- 宽高为 50px 的预览区域 -->
                        <div class="img-preview w50"></div>
                        <p class="size">50 x 50</p>
                    </div>
                </div>
            </div>
 
 <!-- 第二行的按钮区域 -->
<div class="row2">
         <button type="button" class="layui-btn">上传</button>
         <button type="button" class="layui-btn layui-btn-danger">确定</button>
</div>

4.样式CSS:



 
.layui-card-body {
    width: 500px;
}
 
 

 
.row2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
 
 

 
.cropper-box {
    width: 350px;
    height: 350px;
    background-color: cyan;
    overflow: hidden;
}
 
 

 
.w100 {
    width: 100px;
    height: 100px;
    background-color: gray;
}
 
 

 
.w50 {
    width: 50px;
    height: 50px;
    background-color: gray;
    margin-top: 50px;
}
 
 

 
.size {
    font-size: 12px;
    color: gray;
    text-align: center;
}
 
 

 
.row1 {
    display: flex;
}
 
 

 
.preview-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}
 
 

 
.img-preview {
    overflow: hidden;
    border-radius: 50%;
}

5.导入自己的jS文件,并写以下内容,实现基本剪裁效果:


$(function() {
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image');
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    };
 
    // 1.3 创建裁剪区域
    $image.cropper(options);
})

做完以上准备工作,可以实现如下效果

2、更换裁剪的图片

1.添加上传文件的输入框,注意要把输入框隐藏起来:


<!-- 第二行的按钮区域 -->
<div class="row2">
<!-- 通过 accept属性,可以指定,允许用户选择什么类型的文件 -->
<input type="file" id="file" accept="image/png,image/jpeg" />
<button type="button" class="layui-btn" id="btnChooseImage">上传</button>
<button type="button" class="layui-btn layui-btn-danger" id='btnUpload'>确定</button>
</div>

2.为文件选择框绑定change事件


// 为文件选择框绑定 change事件
// 只要选择的文件发生变化就会触发change事件
$('#file').on('change', function(e) {
        // 获取用户选择的文件
        var filelist = e.target.files;
        if (filelist.length === 0) {
            return layer.msg('请选择照片!');
        }
        // 1.拿到用户选择的文件
        var file = e.target.files[0];
        // 2.将文件,转化为路径
        var imgURL = URL.createObjectURL(file);
        // 3.重新初始化剪裁区域
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', imgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
})

3.为确定按钮绑定点击事件


// 为确定按钮,绑定点击事件
$('#btnUpload').on('click', function() {
 // 1.要拿到用户剪裁之后的头像
        var dataURL = $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png') // 将 Canvas 画布上的内容,转化为 base64 格式的字符串
 
        // 2.调用接口,把头像上传到服务器
        $.ajax({
            method: 'POST',
            url: '/my/update/avatar',
            data: {
                avatar: dataURL
            },
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('更换头像不成功!');
                }
                layer.msg('更换头像成功!');
                window.parent.getUserInfo();
            }
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯