html+JavaScript实现头像框及上传剪裁功能

于 2024-05-23 03:13:41 发布
阅读量317 收藏
点赞数 8
分类专栏： HTML 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jukomu/article/details/139133465
版权

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>头像框</title>
    <style>
        .avatar-frame {
            width: 202px;
            height: 202px;
            margin: auto;
            cursor: pointer;
            padding: 1px;
            border-radius: 5px;
            background-color: #f1f1f1;
            align-items: center;
        }

        #select-button {
            width: 80px;
            height: 40px;
            border: 0;
            border-radius: 10px;
            background-color: #14ad96;
            color: #ffffff;
            font-weight: bold;
            margin: auto auto;
            cursor: pointer;
            display: block;
        }

        #select-button:hover {
            filter: brightness(0.8);
        }

        .avatar {
            width: 200px;
            height: 200px;
            margin: 0;
            cursor: pointer;
            padding: 0;
            border-radius: 5px;
            border: 4px solid #f1f1f1;
        }

        #avatar-upload-form {
            position: fixed;
            top: 120px;
            left: 30%;
            width: 800px;
            height: 700px;
            display: flex;
            flex-direction: column;
            border: 3px solid rgba(0, 0, 0, 0.2);
        }

        .hidden {
            display: none;
        }

        #avatar-upload-form.hidden {
            display: none;
        }

        .img-box {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
        }

        .origin-img-box {
            margin: 0;
            padding: 0;
            width: 600px;
            height: 600px;
            background-color: #e1e1e1;
        }

        .resize-box {
            margin: 0;
            padding: 0;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0);
            border: 3px solid #00bbff;
            display: flow;
            position: absolute;
        }

        #resize-box-vertex {
            margin: 0;
            padding: 0;
            width: 5px;
            height: 5px;
            background-color: rgba(255, 255, 255, 0);
            position: absolute;
            right: -3px;
            bottom: -3px;
            cursor: nw-resize;
        }

        #resize-box-border-bottom {
            margin: 0;
            padding: 0;
            width: 100px;
            height: 5px;
            background-color: rgba(255, 255, 255, 0);
            position: absolute;
            left: 0;
            bottom: -3px;
            cursor: n-resize;
        }

        #resize-box-border-right {
            margin: 0;
            padding: 0;
            width: 5px;
            height: 100px;
            background-color: rgba(255, 255, 255, 0);
            position: absolute;
            right: -3px;
            top: 0;
            cursor: e-resize;
        }

        #origin-img {
            margin: 0;
            padding: 0;
            background-color: #ffffff;
        }

        .cropped-img-box {
            margin: 0;
            padding: 0;
            width: 200px;
            height: 600px;
            background-color: #ffffff;
        }

        #cropped-img {
            margin: 0;
            padding: 30px;
            width: 140px;
            height: 140px;
            background-color: #ffffff;
        }

        img[src] {
            opacity: 1;
        }

        /*使未加载成功的图片标签隐藏*/
        img[src="1"] {
            opacity: 0;
            transition: opacity 0.5s;
        }

        .operator {
            margin: 0;
            padding: 0;
            width: 800px;
            height: 100px;
            background-color: #ffffff;
            border-top: 2px solid rgba(0, 0, 0, 0.3);
        }

        .operator button:hover {
            filter: brightness(0.8);
        }

        .upload-button {
            width: 80px;
            height: 40px;
            border: 0;
            border-radius: 10px;
            background-color: #14ad96;
            color: #ffffff;
            font-weight: bold;
            margin: 30px 20px 0 80px;
            cursor: pointer;
        }

        .save-button {
            width: 80px;
            height: 40px;
            border: 0;
            border-radius: 10px;
            background-color: #14ad96;
            color: #ffffff;
            font-weight: bold;
            margin: 30px 20px 0 350px;
            cursor: pointer;
        }

        .cancel-button {
            width: 80px;
            height: 40px;
            border: 0;
            border-radius: 10px;
            background-color: #14ad96;
            color: #ffffff;
            font-weight: bold;
            margin: 30px 20px 0 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="avatar-frame" onclick="showAvatarFrame()">
    <img class="avatar" id="avatar" src="1" alt="头像">
</div>
<div>
    <button id="select-button" onclick="showAvatarFrame()">
        修改头像
    </button>
</div>
<div id="avatar-upload-form" class="hidden">
    <div class="img-box">
        <!--原图片-->
        <div class="origin-img-box">
            <div class="resize-box" id="resize-box" onmousedown="moveResizeBox(event)">
                <!--剪裁框右下角拖动-->
                <div id="resize-box-vertex" onmousedown="startResize(event,0)"></div>
                <!--剪裁框底边拖动-->
                <div id="resize-box-border-bottom" onmousedown="startResize(event,1)"></div>
                <!--剪裁框右边拖动-->
                <div id="resize-box-border-right" onmousedown="startResize(event,2)"></div>
            </div>
            <img id="origin-img" src="1"/>
        </div>
        <!--剪裁后图片-->
        <div class="cropped-img-box">
            <img id="cropped-img" src="1"/>
        </div>
    </div>
    <div class="operator">
        <!--设置上传文件标签隐藏-->
        <input type="file" accept=".png,.jpg,.jpeg,.bmp" id="upload" hidden="hidden"/>
        <button class="upload-button" onclick="document.getElementById('upload').click()">
            上传图片
        </button>
        <button class="save-button" onclick="saveImage()">
            保存
        </button>
        <button class="cancel-button" onclick="cancelImage()">
            取消
        </button>
    </div>
</div>
<script>
    /*图片参数*/
    var x = 0;
    var y = 0;
    var width = 100;
    var height = 100;
    /*改变大小参数*/
    var startX, startY;
    /*拖拽参数*/
    var moveStartX, moveStartY;

    /*图片原始大小*/
    var naturalWidth;
    var naturalHeight;
    /*缩放比例*/
    var scale = 1;

    var max_X = 600;
    var max_Y = 600;
    /*拖动剪裁框模式:0从右下角拖动;1从底边拖动;2从右边拖动;*/
    var method = 0;

    window.onload = function () {
        document.getElementById('upload').addEventListener('change', function (e) {
            x = 0;
            y = 0;
            width = 100;
            height = 100;
            let file = e.target.files[0];
            let reader = new FileReader();

            reader.onload = function (e) {
                let img = new Image();
                img.onload = function () {
                    // 获取图片的原始宽度和高度
                    naturalWidth = img.naturalWidth;
                    naturalHeight = img.naturalHeight;
                    /*设置图片最大显示长宽*/
                    if (naturalWidth > naturalHeight) {
                        max_X = 600;
                        max_Y = naturalHeight / naturalWidth * max_X;
                    } else {
                        max_Y = 600;
                        max_X = naturalWidth / naturalHeight * max_Y;
                    }
                    scale = naturalWidth / max_X;
                    // 显示原始图片
                    let original_img = document.getElementById('origin-img');
                    original_img.style.width = max_X + 'px';
                    original_img.style.height = max_Y + 'px';
                    original_img.src = e.target.result;

                    // 创建一个画布用于剪裁
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext('2d');
                    canvas.width = width; // 剪裁的宽度
                    canvas.height = height; // 剪裁的高度
                    // 根据图片的原始尺寸和剪裁尺寸计算剪裁坐标
                    let actualCropX = x * scale;
                    let actualCropY = y * scale;
                    let actualCropWidth = width * scale;
                    let actualCropHeight = height * scale;

                    // 绘制剪裁后的图片
                    ctx.drawImage(img, actualCropX, actualCropY, actualCropWidth, actualCropHeight, 0, 0, width, height);

                    // 显示剪裁后的图片
                    document.getElementById('cropped-img').src = canvas.toDataURL();
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });

        document.addEventListener('mouseup', () => {
            try {
                document.removeEventListener('mousemove', resizeImage);
            } catch (e) {
            }
            try {
                document.removeEventListener('mousemove', moveBox);
            } catch (e) {
            }
        });
    }

    function startResize(event, num) {
        method = num;
        startX = event.clientX;
        startY = event.clientY;
        document.addEventListener('mousemove', resizeImage);
        event.stopPropagation();
    }

    /*剪裁框拖动改变大小*/
    function resizeImage() {
        let temp_X = event.clientX;
        let temp_Y = event.clientY;
        let box = document.getElementById('resize-box');
        let borderBottom = document.getElementById('resize-box-border-bottom');
        let borderRight = document.getElementById('resize-box-border-right');

        /*根据method设置拖动逻辑*/
        let enableX = 0;
        let enableY = 0;
        if (method === 0) {
            // 底边右边均可以拖动
            enableX = 1;
            enableY = 1;
        }
        if (method === 1) {
            // 底边拖动
            enableY = 1;
        }
        if (method === 2) {
            // 右边拖动
            enableX = 1;
        }

        /*调整大小*/
        width += (temp_X - startX) * enableX;
        height += (temp_Y - startY) * enableY;
        if (width > height) {
            // 水平方向增量大
            height = width;
        } else {
            // 垂直方向增量大
            width = height;
        }

        if (max_X > max_Y) {
            if (y + height > max_Y) {
                height = max_Y - y;
                width = height
            }
        } else {
            if (x + width > max_X) {
                width = max_X - x;
                height = width;
            }
        }

        if (width < 50) {
            width = 50;
            height = 50;
        }
        console.log(width, height);
        box.style.width = width + 'px';
        box.style.height = height + 'px';
        // 调整拖动条大小,给右下角的拖动顶点留5x5的空间
        borderBottom.style.width = width - 5 + 'px';
        borderRight.style.height = height - 5 + 'px';
        handleCropChange();

        /*重置开始位置*/
        startX = temp_X;
        startY = temp_Y;
    }

    /*开始移动剪裁框*/
    function moveResizeBox(event) {
        moveStartX = event.clientX;
        moveStartY = event.clientY;
        document.addEventListener('mousemove', moveBox);
        event.stopPropagation();
    }

    /*移动剪裁框*/
    function moveBox() {
        let temp_X = event.clientX;
        let temp_Y = event.clientY;
        let box = document.getElementById('resize-box');
        x += temp_X - moveStartX;
        y += temp_Y - moveStartY;
        /*移动约束*/
        if (x + width > max_X) {
            x = max_X - width;
        }
        if (y + height > max_Y) {
            y = max_Y - height;
        }
        if (x < 0) {
            x = 0;
        }
        if (y < 0) {
            y = 0;
        }
        console.log(x, y);
        box.style.top = y + 'px';
        box.style.left = x + 'px';
        handleCropChange();

        /*重置开始位置*/
        moveStartX = temp_X;
        moveStartY = temp_Y;
    }

    /*剪裁重绘*/
    function handleCropChange() {
        // 获取原始图片的Image对象
        let originalImg = document.getElementById('origin-img');
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');

        // 设置画布的尺寸为剪裁尺寸
        canvas.width = width;
        canvas.height = height;

        // 根据图片的原始尺寸和剪裁尺寸计算剪裁坐标
        let actualCropX = x * scale;
        let actualCropY = y * scale;
        let actualCropWidth = width * scale;
        let actualCropHeight = height * scale;

        // 绘制剪裁后的图片
        ctx.drawImage(originalImg, actualCropX, actualCropY, actualCropWidth, actualCropHeight, 0, 0, width, height);

        // 将剪裁后的图片显示在页面上
        let croppedImg = document.getElementById('cropped-img');
        croppedImg.src = canvas.toDataURL();
    }

    /*打开头像上传窗口*/
    function showAvatarFrame() {
        document.getElementById('avatar-upload-form').classList.remove('hidden');
    }

    function saveImage() {
        let avatar = document.getElementById('avatar');
        let img = document.getElementById('cropped-img');
        avatar.src = img.src;
        cancelImage();
    }

    function cancelImage() {
        document.getElementById('avatar-upload-form').classList.add('hidden');
    }
</script>
</body>
</html>

效果如下：

头像框

头像上传框

头像上传和剪裁

保存并显示

HCK58Z8qrS
关注
专栏目录
HTML移动端头像上传插件
01-18
HTML移动端头像上传插件，带图片压缩剪裁的。HTML+CSS+JS全套，没有多余代码，拿来就能直接用。
设置头像框为圆形，且图片填充头像框
路遥
04-03 1330
对于要设置的头像代码为： <img class="header-img" src="" alt="找不到图片"> css样式代码为： .header-img{ float: left; border: black solid 1px; width: 70px; height: 70px; object-fit: cover;/*图片完全填充*/ /*object-position: center;*//*设置头像选取照片的哪个区域object-
html头像上传功能
csdncaoguo940713的博客
09-12 7845
这又是一个比较经典的案例，在编辑个人信息页面用的非常多，
Html设计小技巧之带头像框的圆形头像
最新发布
weixin_66448747的博客
02-28 996
Html设计小技巧之带头像框的圆形头像
html给图片添加边框
weixin_66107154的博客
04-18 5764
最简单的就是用border border不光可以设置<div><p><span>还可以设置图片边框 5px是设置边框的宽度 solid表示直线 #999是颜色dashed是虚线
html中怎么制作选择头像,网页中的个人头像选择框（转）
weixin_35317737的博客
06-03 2205
网页中的个人头像选择框(转)1、先看个效果2、源文件 New Document body,td,div {font:12px 宋体}label {height:119px;padding:3px 0px 0px 4px}.link_Box {text-align:left;cursor:default}.link_head {width:100%;height:123;b...
实现Asp.net mvc上传头像加剪裁功能
10-23
在Asp.net MVC框架中实现上传头像并添加剪裁功能是一项常见的需求，尤其是在用户注册、个人资料编辑等场景中。以下将详细讲解如何通过HTML、CSS、JavaScript以及C#来实现这一功能。 首先，我们需要在前端页面创建一...
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
10-25
以下将详细探讨如何通过这些技术组合来实现一个完整的头像上传剪裁功能。 ### PHP后端处理 在服务器端，PHP脚本是处理上传文件的核心。文件上传的处理通常涉及几个关键步骤：接收文件、验证文件类型和大小、保存...
PHP实例开发源码—PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁.zip
11-12
在本实例中，我们主要探讨如何使用PHP与前端技术AJAX、FileUpload和Jcrop插件相结合，实现一个完整的头像上传及剪裁功能。这个功能常见于许多社交媒体和个人资料编辑页面，允许用户自主选择并调整上传的头像图片。 ...
Jquery+ASP.NET 实现开心网上传头像剪裁功能
07-07
实现头像上传剪裁功能的关键步骤如下： 1. **前端交互**：使用Jquery监听文件输入元素的`change`事件，当用户选择图片后，读取文件内容并使用HTML5的FileReader API进行预览。可以使用`canvas`元素动态生成缩略图，...
头像上传html+js版
03-13
上传图片，并可以截取头像的js版代码，可直接用。正好用于论坛博客会员中心等头像的处理问题。而且是js源码的，可以根据你的需求进行修改,本文中的后台配套是PHP的。但是你可以根据自己的需求写对应的后台语言接口。
html5 头像上传更换插件
01-11
插件描述：html5 头像上传、更换、剪切插件。 参考实例：http://www.jq22.com/jquery-info5493
app登录页面
jakelihua
10-24 2262
简介：本文以最简洁的语言，来为读者分享一个漂亮的app个性信息页面，使用的编译器为，的平台为，本文主要讲解思路，就算大家后面使用安卓，微信小程序等等其他平台，只要明白了我的思路，做起来便是很简单的事情。 第二步：CSS渲染 下面把每一步的样式的详细思路标注了出来。 第三步：完整代码 最后的结果：
HTML5 文件读取
weixin_30267691的博客
07-05 463
一、定义 input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口，文字表示对文件的描述（大部分情况下为文件名）；file类型的input会有files属性，保存着文件的相关信息。 FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。 参考文章：FileReader读取文件 二、使用（FileReader的...
使用HTML自定义图片上传框
qq_59843674的博客
09-05 915
最近需要用到图片上传的，本身又不是基于第三方框架做的，再加上第三方的不好修改样式，就直接用HTML做一个图片上传，原生的又太丑了，所以想搞个好看的。如图所示，所有样式都是自定义的，也可以实现图片上传的功能，不过想要回显图片的话，需要先上传到服务器上再回显，或许还有其他的方法，暂时还没尝试。
HTML5移动端实现头像裁剪上传(cropper.js实现)
Victoriasxy的博客
02-08 869
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改信息</title> <link rel="stylesheet" href="../../css/r.
Html 圆形头像带边框
热门推荐
疯狂Run的博客
09-08 1万+
Web 圆形头像带边框
H5图片上传与裁剪（头像）
coco723的博客
03-06 703
3. 因为基于react框架开发，所以使用了第三方插件react- cropper。最近接到的需求中H5头像上传和实现基本的图片裁剪，这也是比较常见且典型的场景。2. 选择图片后，将选中的图片放入画布；1. 调起移动端相机拍照或相册功能；1. 封装react组件。2. 实现图片裁剪功能。
头像裁剪框html css,js头像裁剪实现——canvas+Jcrop+jQuery
weixin_32666923的博客
06-09 482
封好的插件不用写html啦，直接new一个就好了var test = document.getElementById("test");var clipBox = new clipBox(test,600,600,200,200);//插入插件的div，上传图区域宽，上传图区域高，预览区宽，预览区高本来感觉没什么好写的，还是写一下作为第一个插件的留念吧应该存在很多性能问题或细节问题，望有大神指教de...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值