JavaScript实现仿微信头像裁剪（前端完成裁剪）

最新推荐文章于 2024-04-25 20:22:26 发布

VIP文章 Jilijo

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量1.6k

点赞数 1

分类专栏： html/css 文章标签： js canvas html

本文链接：https://blog.csdn.net/jilijo/article/details/108813634

版权

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />
    <title>Title</title>
    <style>
        body {
    
            position: fixed;
            width: 100%;
            height: 100%;
            margin: 0px;
            background-color: black;
        }
        .cover-top {
    
            font-size: 50px;
            color: white;
            text-align: center;
            width: 100%;
            padding:5px;
            border: solid 0px;
            background-color: black;
            position: absolute;
            opacity: 0.5;
            top: 0px;
            z-index: 1;
        }
        .cover-top input {
    
            font-size: 50px;opacity: 0;position: absolute;right: 0;top: 0;
        }
        .cover-middle {
    
            width: 100%;
            padding:5px;
            border: solid 0px;
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            z-index: 1;
        }
        .cover-down {
    
            font-size: 28px;
            color: white;
            text-align: center;
            width: 100%;
            padding:5px;
            border: solid 0px;
            background-color: black;
            position: absolute;
            opacity: 0.5;
            bottom: 0px;
            z-index: 1;
        }
        button {
    
            padding: 20px;position: absolute;left: 0px;
        }
        .image {
    
            display:block;width: 100%;overflow: scroll;transform: translate(0px,50%);position: absolute;
        }
    </style>
</head>
<body>
    <form id="cutImage" action="htpp://localhost/product/upload_pic" enctype="multipart/form-data" method="post">
        <div id="cover-top" class="cover-top">
            <a  href="javascript:">
                <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpg" onchange="loadImage()">点击上传
            </a>
            <button onclick="selectImage()">选择图片</button>

            <input id="x", name="x" style="display: none">
            <input id="y", name="y" style="display: none">
            <input id="width" name="width" style="display: none">
            <input id="height

最低0.47元/天解锁文章

Jilijo

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现仿微信头像裁剪（前端完成裁剪）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" /> <title>Title&l
复制链接

扫一扫