基于 outline 实现头像剪裁以及预览

outline 是真正意义上的不占据任何空间的属性。

outline 不会影响任何元素的任何布局，并且 outline 轮廓可穿透。

核心布局代码：

.crop {
    overflow: hidden;
}

.crop > .crop-area {
    width: 80px;
    height: 80px;
    outline: 256px solid rgba(0, 0, 0, .5);
    cursor: move;
}
1
2
3
4
5
6
7
8
9
10

效果预览

头像剪裁效果预览

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>outline 与镂空效果title>
    <style>
      .crop-box,
      .preview-box {
        display: inline-block;
        vertical-align: top;
      }

      .crop,
      .preview {
        position: relative;
        overflow: hidden;
      }

      .crop-area,
      .preview {
        width: 80px;
        height: 80px;
      }

      .crop-area {
        position: absolute;
        left: 80px;
        top: 56px;
        outline: 256px solid rgba(0, 0, 0, 0.5);
        cursor: move;
      }

      .crop img,
      .preview img {
        display: block;
        width: 256px;
        height: 192px;
      }

      .preview img {
        position: absolute;
        /* 初始位置与 crop-area 位置对应 */
        left: -88px;
        top: -56px;
      }
    style>
  head>
  <body>
    <div class="crop-box">
      <h4>剪裁（仅演示移动）h4>
      <div class="crop">
        <div id="cropArea" class="crop-area">div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTS6ESEyK8IGsYRNb31pBZQFhi21oVIn8k5pQ&usqp=CAU" alt="剪裁预备图片" />
      div>
    div>
    <div class="preview-box">
      <h4>预览h4>
      <div class="preview">
        <img
          id="previewImg"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTS6ESEyK8IGsYRNb31pBZQFhi21oVIn8k5pQ&usqp=CAU"
          alt="剪裁图片"
        />
      div>
    div>

    <script>
      const elCropArea = document.getElementById("cropArea"),
        elPreviewImg = document.getElementById("previewImg");

      let data = {};

      // 记录剪裁框初始位置
      elCropArea.addEventListener("mousedown", function (event) {
        data = {
          moving: true,
          left: elCropArea.offsetLeft,
          top: elCropArea.offsetTop,
          x: event.pageX,
          y: event.pageY,
        };
      });

      // 监听具体鼠标移动事件
      document.addEventListener("mousemove", function (event) {
        if (data.moving) {
          event.preventDefault();
          // 移动距离
          const moveX = event.pageX - data.x,
            moveY = event.pageY - data.y;

          // 目标坐标
          let left = data.left + moveX,
            top = data.top + moveY;

          // 边界判断
          if (left < 0) {
            left = 0;
          } else if (left + 80 > 256) {
            left = 176;
          }

          if (top < 0) {
            top = 0;
          } else if (top + 80 > 192) {
            top = 112;
          }

          // 剪裁框和预览框重定位
          /* elCropArea.style.left = left + "px";
          elCropArea.style.top = top + "px"; */

          elCropArea.style.cssText = `
            left: ${left}px;
            top: ${top}px;
          `;

          //   elPreviewImg.style.left = -left + "px";
          //   elPreviewImg.style.top = -top + "px";

          elPreviewImg.style.cssText = `
            left: ${-left}px;
            top: ${-top}px;
          `;
        }
      });

      document.addEventListener("mouseup", function () {
        data.moving = false;
      });
    script>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

基于 outline 实现头像剪裁以及预览 - JS Bin

相关阅读:
对React fiber的理解
 github pages 部署单页面
 【matlab 代码的python复现】 Matlab实现的滤波器设计实现与Python 的库函数相同实现Scipy
【ubuntu 搜狗输入法】ubuntu下搜狗输入法不能打印中文的所有问题都这样解决！
vscode 版本比较插件 Git History Diff
Vue3 - filters 过滤器为什么被移除放弃？取而代之的解决方案又是什么？
开发者生态：共享知识，携手共进，共创技术辉煌
 Java高级——内存分配机制
 Vuex概述及核心概念
 Redis 复习计划 - String内存开销问题以及基本/扩展数据类型的使用
原文地址：https://blog.csdn.net/huaqi_/article/details/126089293