您的位置：首页 > 编程技术 > js  >  JavaScript实现更换头像功能

JavaScript实现更换头像功能

 更新时间：2021年8月13日 16:00  点击：2443

本文实例为大家分享了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 区域的的样式 */
 
.preview-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}
 
 
/* 设置 img-preview 区域的样式 */
 
.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();
            }
 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • 详解前端安全之JavaScript防http劫持与XSS

    作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24

  • JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09

  • 一个关于JS正则匹配的踩坑记录

    这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13

  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20

  • node.js如何操作MySQL数据库

    这篇文章主要介绍了node.js如何操作MySQL数据库，帮助大家更好的进行web开发，感兴趣的朋友可以了解下...2020-10-29

  • js屏蔽F12审查元素，禁止修改页面代码等实现代码

    有时候我们需要屏蔽客户端的F12，以防菜鸟也可以随意修改我们的代码，也处于源码的保护等操作，这里就为大家分享一下常见的代码...2020-10-03

  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19

  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11

  • NodeJS实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07

  • JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15

  • JS实现随机生成验证码

    这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06

  • node.JS md5加密中文与php结果不一致怎么办

    这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06