JavaScript实现更换头像功能

本文实例为大家分享了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();
            }
 })

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

赞 (0)

相关推荐

  • vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

    1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it

  • JavaScript实现更换头像功能

    JavaScript实现更换头像功能

    本文实例为大家分享了JavaScript实现更换头像功能的具体代码,供大家参考,具体内容如下 最主要的是使用jquery的插件 cropper 1.基本使用步骤 1.在 <head> 中导入 cropper.css 样式表: <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" /> 2.在 <body> 的结束标签之前,按顺序导入如下的 js 脚本: <

  • PHP针对多用户实现更换头像功能

    PHP针对多用户实现更换头像功能

    一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中.今天就来做个测试,针对不同的用户,实现头像上传功能. 先给大家展示下成品效果图: 思路 针对不同的用户上传头像,我们要为每一个已登录的用户创建一个文件夹,文件夹的名称以当前用户的用户名为准. 用户上传成功后,跳转到用户登录成功后的页面,并刷新用户头像. 登陆页面 表单制作 <form role="form" action="./forindex.php"> <div cl

  • JavaScript实现换肤功能

    JavaScript实现换肤功能

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

  • JavaScript实现简单评论功能

    JavaScript实现简单评论功能

    本文实例为大家分享了JavaScript实现简单评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024

  • 基于JavaScript实现图片裁剪功能

    目录 一.图片文件的上传和读取 二.图片展示和蒙层处理 CSS clip-path 三.裁剪框展示 裁剪框的缩放点 cursor 鼠标样式 四.裁剪框移动事件 五.裁剪框缩放操作 六.完成裁剪功能 drawImage 后记 在前端开发中,当遇到图片或头像上传等功能时,有尺寸分辨率限制的话,就需要用到图片的裁剪功能.想了解图片基础知识的,可见前文图片基础知识介绍. 而canvas的使用,对于我们直接在web端实现图片裁剪功能成为可能.本文将使用前端技术实现一个图片的裁剪功能. 一.图片文件的上传和

  • 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)

    其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术.好了, 简单的描述了一下,现在直接上代码吧! (1).功能描述: 新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的"获取数据"按钮后,将2.html页中的内容显示在1.html页面的<div>标记中. (2).实现代码: 1.html实现代码: 复制代码 代码如下: <head>

  • iOS 图片上传使用base64或者二进制流上传头像功能

    iOS 图片上传使用base64或者二进制流上传头像功能

    我们在写代码的时候经常会将头像进行上传服务器,上传头像图片我试过两种方式 一种方式就是使用base64字符串上传图片,这种形式我个人认为比较适合上传图片数量比较少的,比如上传头像,上传图片数量多的话,速度会慢些 另一种方式是使用二进制流进行上传图片,这种方式上传图片少或者数量多都没关系,速度也很快 demo地址:http://download.csdn.net/detail/tuwanli125/9340205 demo地址:  https://github.com/tuwanli/Pictur

  • 常用Javascript函数与原型功能收藏(必看篇)

    如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function

  • Javascript 实现计算器时间功能详解及实例（二）

    Javascript 实现计算器时间功能详解及实例（二）

    Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

  • Javascript实现的StopWatch功能示例

    Javascript实现的StopWatch功能示例

    本文实例讲述了Javascript实现的StopWatch功能.分享给大家供大家参考,具体如下: 有时会需要js来写一些函数进行测试,如果需要测试执行时间,可能需要一个stopwatch: StopWatch类: function stopWatch() { } stopWatch.prototype.Start = function () { this.startD = new Date(); return this; }; stopWatch.prototype.Stop = functio

随机推荐