基础案例 import * as three from 'three' // 创建场景 const scene = new three.Scene() // 创建相机 const camera = new three.PerspectiveCamera( 45, // 视角 window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近平面 1000 // 远平面 ) // 创建渲染器 const renderer = ne...

公司最新需求居然让前端拿着秘钥来解密....真是防君子不防小人啊, 这里记录一下前端使用 RSA,AES,SM4 等加密算法的加解密流程,以及hooks的封装 私钥与公钥 公钥: 可以公开给任何人，用于加密数据,使用公钥加密的数据，只有对应的私钥才能解密 私钥: 必须保密，仅由密钥的拥有者持有，用于解密数据。使用私钥解密的数据，只有使用相应的公钥加密过的内容才能被解密 工作流程 生成密钥对：生成一对密钥，包括公钥和私钥。 数据加密：发送方使用接收方的公钥加密数据。 数据传输：加密后的数据可以安全地通过不安全的通道发送。 数据解...

搭建一个包含 admin 后台管理系统和 web 前端展示系统，各自独立使用 Vite 构建，仅共享公共组件和方法。项目支持在全局配置之外单独设置各自的 Vite 配置和插件，各项目会单独打包, Vite 会根据引入依赖与公共资源按需构建。 需求整理 需求就是在一个项目中管理 admin 后台管理系统和 web 前端展示系统,他们各自独立,可以使用 shared 包中的内容,打包的时候各自打包,并且支持 tree sharking Why Not? 为什么不使用 pages 方案？ 构建臃肿：pages 方案通常会将所有页面...

在游戏里通常会有原型轮盘菜单,由一个个扇形组成,刚好项目中需要使用右键圆形菜单,下面用 canvas 来绘制一个 img 思路 核心思路就是 2π / num num 是你菜单的数量 2π/num 就可以得到一个扇形的弧度 实现 // 获取Canvas元素和绘图上下文 const canvas = document.getElementById('myCanvas') const ctx = canvas.getContext('2d') ...

需求是将 vue 详情页,转换成图片展示,避免机器爬取文本数据,增加爬虫解析难度 思路 将 html 转换为 canvas,在将 canvas 转换为图片 解决方案 使用 html2canvas 库来实现 import html2canvas from "html2canvas"; /** 将html转换成base64返回 @param {*} target @param {*} width @param {*} height @returns */ export async function htmlToBase64(tar...

在网页开发中，水印是一种常用的保护内容的方式。通过添加水印，可以有效地防止内容被未经授权的用户盗用。本文将介绍如何通过自定义指令来为元素添加水印，并实现防盗功能。 实现思路 使用 Canvas 生成水印图： 首先，我们创建一个 canvas 元素，并根据目标元素的宽高设置其大小。 使用 CanvasRenderingContext2D 的 fillText 方法将水印文字绘制到画布上。 通过调整水印的倾斜角度和间距，实现更灵活的水印效果。 将生成的图像设置为背景： 通过 `canvas.toData...