weixin_44713462的博客

原创 基于WebGPU实现canvas高级滤镜

本文介绍了基于WebGPU实现LUT滤镜的技术方案。通过分析Fabric.js滤镜功能的局限性，作者采用查找表(LUT)技术实现高级颜色映射效果。文章详细讲解了WebGPU的核心概念和使用方法，包括适配器获取、管线配置、着色器编写等关键技术点。重点阐述了如何利用WebGPU的并行计算能力，通过3D到2D颜色空间转换和三线性插值实现高效滤镜处理。最后给出了完整的滤镜实现类和使用示例，并指出当前WebGPU的浏览器兼容性问题。该方案为Web端高性能图像处理提供了新的技术思路。

原创 不修改DOM的高亮黑科技，你可能还不知道

本文介绍了CSS自定义高亮API(HighLight)的优势和实现方法。相比传统span标签高亮方式，该API通过创建Range对象标识文本范围，使用Highlight对象管理多个Range，并在渲染层处理高亮，避免修改DOM结构和页面重绘。文章详细展示了实现步骤，包括创建Range、Highlight对象、注册高亮样式等，并提供了搜索高亮和文本差异对比两个典型应用场景。该API特别适合在线文档、代码编辑器等需要大量文本标记的应用，是未来网页文本高亮的发展趋势。

原创 迈向开源第一步，给fabric.js提PR

本文分享了作者为fabric.js开源项目贡献代码的全过程。从发现问题、规范提issues，到Fork代码、编写测试用例，最后提交PR并与维护者沟通，详细记录了每个环节的操作要点和注意事项。作者特别强调了阅读项目文档的重要性，并分享了在编写测试用例时获得的维护者帮助。整个经历让作者深刻感受到开源社区的友好氛围，维护者会耐心引导新手完成贡献流程。文章为想参与开源但不知如何入手的新人提供了实用参考。

原创 告别时间显示难题：用 Intl.DateTimeFormat 打造全球通用的日期界面

本文介绍了JavaScript的Intl.DateTimeFormat对象，用于实现国际化日期时间格式化。主要内容包括：1) 核心配置选项详解，涵盖区域设置、日期时间组件和样式快捷键；2) 格式化方法(format/formatToParts)及其应用；3) 日期范围格式化(formatRange/formatRangeToParts)功能；4) 特殊历法(如农历)支持；5) 实用方法(resolvedOptions/supportedLocalesOf)。该API能有效解决多语言环境下的日期显示问题，特别

原创 告别杂乱数字：用 Intl.NumberFormat 打造全球友好的前端体验

本文详细介绍了JavaScript中Intl.NumberFormat的用法，用于实现数字的国际化格式化。主要内容包括：1) 数字格式化的基本配置选项，涵盖区域设置、样式选项和数字选项；2) 核心格式化方法format()和formatToParts()的使用；3) 数字范围格式化功能；4) 获取配置项和判断支持的语言环境。文章通过代码示例展示了如何实现货币、百分比等不同格式的数字显示，以及如何控制小数位数、舍入模式等细节，为开发者提供了全面的数字格式化解决方案。

原创 前端字符串排序搜索可以更加细化了

本文介绍了JavaScript中Intl.Collator对象的使用方法，该对象用于实现语言敏感的字符串比较。主要内容包括：1）基本比较规则（返回-1/0/1）；2）基于语言的差异比较（如德语和瑞典语对"ä"的不同排序）；3）配置选项详解（localeMatcher、usage、sensitivity等）；4）特殊处理功能（忽略标点、数字排序、大小写优先）；5）获取配置项和支持的locale判断。Intl.Collator能根据语言规则正确处理字符串的排序和搜索，适用于国际化应用开发。

原创 前端文本分割工具，“他”来了

Intl.Segmenter 是一个新的文本分割工具，支持根据语言将字符串按字、词、句进行智能分割。通过设置 locales 参数和 granularity 选项，它可以实现多语言分词（如中文）、字符级分割和句子分析。分割结果包含文本内容、索引等信息，并支持 locale 匹配检测。相比传统空字符分割，Intl.Segmenter 更适用于文本编辑器、搜索建议、NLP 等场景，能有效优化文本处理流程。该工具是 Intl 国际化 API 的一部分，未来还可探索数字、日期等国际化处理功能。

原创 单一语言项目国际化-“i18n-ally”真快

本文介绍了使用i18nally插件实现项目国际化的完整流程。首先需准备JSON语言文件并配置VSCode编辑器，然后通过插件调用翻译API（如ChatGPT）实现自动翻译。文章详细说明了在Angular项目中如何应用国际化文件，包括HTML、组件和模态框中的文案处理。使用流程包括检测中文文案、提取到文件、配置路径和自动翻译四个步骤。该方案不仅提高了国际化效率，还建立了可持续的国际化体系，为产品全球化奠定了基础。

原创 快速选择 PDF 生成工具（纯干货）

本文对比了前端PDF生成的四种主流方案：window.print、jsPDF、html2canvas+jsPDF和pdfmake。其中pdfmake凭借对内容的精确控制、良好的分页处理等优势成为推荐方案，但存在字体加载问题。文章详细介绍了pdfmake的使用步骤，包括字体导入和配置方法，并针对大字体文件提出了预加载和用户反馈等优化建议。最终结论认为pdfmake是纯前端场景下最值得推荐的PDF生成方案。

原创 重生之我在浏览器里“蹦迪”

工作时机械麻木，蹦迪时欢乐激情，边工作边蹦迪，是怎样的呢？

原创 Promise与Web Locks绝配

本文介绍了如何利用Promise与WebLocks API解决批量审核时并发请求导致的资源冲突问题。通过将同组任务(requestId)加锁，确保同一分组下任务串行执行，避免了资源抢占问题。作者展示了三行核心代码实现方案：使用navigator.locks.request对同groupId请求加锁，结合Promise.all/race实现并发控制。该方法也可应用于数据流处理、多任务执行等场景，为Web开发中常见的并发问题提供了优雅的解决方案。

原创 前端2D地图和3D场景中的坐标系

本文介绍了2D和3D开发中常用的坐标系系统。2D地图方面包括WGS84、GCJ-02(火星坐标)、BD-09(百度坐标)和Web墨卡托投影坐标系；3D场景主要采用笛卡尔坐标系，分为Three.js默认的右手系和Babylon.js使用的左手系。文章重点说明了各坐标系的特点和应用场景，特别是中国特有的GCJ-02加密坐标系统。

原创 解决前端多标签页通信：BroadcastChannel

BroadcastChannel 是一种用于同源不同窗口/标签页间通信的 API，可解决多标签页状态同步问题。通过创建频道并监听消息，可实现登录状态、页面设置、业务数据等实时同步。相比 LocalStorage 事件、SharedWorker 等方案，BroadcastChannel 更简单高效，适用于保持同源页面数据一致性，但不支持跨域通信。典型应用包括同步登录状态、更新全局配置及购物车数据等场景。

转载 获取包含HTML内容的contentEditable区域中的插入符（光标）位置

使用cloneContents功能来获取实际的html，并将documentfragment附加到临时div上以获取html的长度

原创 Gitlab配置sshkey后git clone git@xxx.com:xx.git还需要输入密码，且输入用户密码无效；但git clone http://git.xx.com/xx.git有效

gitlab 页面添加 sshkey后，git clone git@xxx.com:xx.git 任然提示需要输入密码

原创 yarn错误The engine “node“ is incompatible with this module

解决方案 yarn config set ignore-engines true原理错误是由于node版本不兼容导致的，解决方案就是忽略引擎版本的检查

原创 阿里云搭建个人的gitlab仓库

前提：拥有一台阿里云服务器 开发自定义端口（比如：8899）流程：1.安装并配置必要的依赖sudo apt-get updatesudo apt-get install -y curl openssh-server ca-certificates tzdata perl接下来，安装 Postfix 以发送通知电子邮件。如果您想使用其他解决方案发送电子邮件，请跳过此步骤sudo apt-get install -y postfix在 Postfix 安装过程中，可能...

原创 ssh连接阿里云服务器报错 Server responded ”Algori thm negotiation failed.”

由来：使用即将到期的阿里云Ubuntu服务器进行CI/CD的练习。重置系统后使用SSH登录发生报错！！！按照其他人的方法：在本机known_hosts文件中删除掉关于服务器的信息没有解决然后就尝试使用gitBash进行远程连接ssh -p 22 root@[IP地址]出现了The authenticity of host ‘服务器地址’ can’t be established.ECDSA key fingerprint is SHA256:qBnZwIJYB+eM6E

原创 工作中使用的git操作流程

问题：需要克隆下来公司的项目进行代码编辑后提交自己的分支进行项目合并1、使用git Bash：cat ~/.ssh/id_rsa.pub获取公钥，然后填到公司git地址自己账户下的SSH keys。这样可以通过SSH的方式克隆公司项目2、克隆项目：选择一个文件夹下打开git Bash，使用git clonegit@****:********.git将项目克隆下来3、进入项目文件查看本地和远程仓库上的所有分支：git branch -a4、创建本地自己的分支：git branch ccTes.

原创 js实现队列及ES6优化

ES5let items = [];function Queue() { //队列添加元素 this.enqueue = function (element) { items.push(element); } //队列移除元素 this.dequeue = function () { items.shift(); } //查看队头元素 this.front = function () {

原创 js实现栈及ES6优化

ES5function Stack() { let items = []; //公共的 //向栈添加元素 this.push = function (element) { items.push(element); } //从栈移除元素 this.pop = function () { items.pop(); } //查看栈顶元素 this.peek = function () {

转载 了解HTTP/3.0

HTTP/3.0基于UDP实现，实现了类似TCP的多路数据流、传输可靠性等功能，称为QUIC(Quick UDP Internet Connection)协议。QUIC功能：1、实现了类似TCP的流量控制、传输可靠性的功能2、集成了TLS(Transport Layer Security 传输层安全性协议)加密功能3、实现了HTTP/2.0中多路复用不同点是QUIC实现了在同一物理连接上可以有多个独立的逻辑数据流，实现了数据流的单独传输，解决了TCP中队头阻塞问题4、实现了快速握手功

原创 正则表达式整理

原创 Grid布局整理

原创 学习React过程中使用Charles软件模拟数据找不到localhost:3000解决方案

方案1：官网说要在charles模拟本地数据的时候域名用localhost.charlesproxy.com打开hosts文件：编辑器打开C:\Windows\System32\drivers\etc下的hosts文件添加绑定：添加127.0.0.1 localhost.charlesproxy.com 127.0.0.1和指定域名之间是一个tab键方案2：修改react项目的默认域名，在react项目的package.json文件中将原来的"start": “react-scrip..

原创 旋转数组的最小数字

function minNumberInRotateArray(rotateArray){ // write code here if(rotateArray.length==0){ return 0; } var minVal=rotateArray[0]; for(var i=1;i<rotateArray.length;i++){ if(rotateArray[i]<minVal){ min.

原创 Flutter之配置环境

配置环境花了几个小时，累死人（已成功）。环境是win10 + flutter + vs code（编译器）+ 安卓模拟器（夜神）+ Android Studio（作为安卓原生环境）1、阅读《Flutter实战》第一章线上链接https://book.flutterchina.club/2、下载flutter国内下载https://github.com/flutter/flutter/releases我选择的是1.17.33、配置环境变量FLUTTER_STORAGE_BA

原创 领扣算法简单------两数之和---js版

56.两数之和中文English给一个整数数组，找到两个数使得他们的和等于一个给定的数target。你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标。注意这里下标的范围是 0 到n-1。样例Example1:给出 numbers = [2, 7, 11, 15], target = 9, 返回 [0, 1].Example2:给出 numbers = [15, 2, 7, 11], target = 9, 返回 [1, 2].挑战...

原创 基于bootstrap的文本编辑器：Summernote

Summernote官网地址：https://summernote.org/案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Summernote</title> <link href="http://n...

原创 JQuery Confirm确认框和一个弹出式提示框

需提前引入jquery文件源码https://github.com/craftpip/jquery-confirm文件夹中的dist文件,需引入案例：$.confirm({ title: '确认', content: '确认删除该条数据?', type: 'blue', icon: 'glyphicon glyphico...

原创 剑指Offer---面试题3：数组中重复数字

三种方法：package dataStructure;import java.util.HashMap;import java.util.Map;public class array { //数组中重复数字 public static void main(String[] argv){ Integer[] arr=new Integer[]{2,3,1,0,2,5,3}...

原创 领扣算法简单------O(1)时间检测2的幂次---java版

用 O(1) 时间检测整数n是否是2的幂次。样例Example 1: Input: 4 Output: trueExample 2: Input: 5 Output: falsepublic class Solution { /** * @param n: An integer * @return: True or false ...

原创 领扣算法简单------Fizz Buzz 问题---java版

给你一个整数n. 从1到n按照下面的规则打印每个数：如果这个数被3整除，打印fizz. 如果这个数被5整除，打印buzz. 如果这个数能同时被3和5整除，打印fizz buzz. 如果这个数既不能被3整除也不能被5整除，打印数字本身。样例比如n=15, 返回一个字符串数组：[ "1", "2", "fizz", "4", "buzz", "fiz...

转载 【小程序】本地图片未加载成功的情况 Failed to load local image resource /pages/XXX/

在开发小程序的时候，发现在加载图片时并没有异常，但是后台却报错了。例如以下我的一段代码：<image bindtap="chooseImg" class='photo' src='{{photo}}'></image>这里的{{photo}}是JS传进来的一个变量，但是在显示某个框框的时候将photo的值设为一个路径值，即在选择图片的时候，会因为其路径并不是在该项...

原创 2019前端面试集锦

【绿盟科技】【前端】绿盟科技实习面经：https://www.nowcoder.com/discuss/113284【百信银行】【前端】百信银行校园招聘：https://www.nowcoder.com/discuss/112972【前端】2018.9.29招银网络电话面：https://www.nowcoder.com/discuss/121326【前端】招银网络科技面...

原创 java实现页面调度算法

package items_9;import java.util.ArrayList;import java.util.List;import java.util.Scanner;public class ymzh { //最佳置换算法（OPT）--- 无法实现 public static void opt(List<Integer> list){} //先进先...

原创 java实现银行家算法

package items_7;import java.util.ArrayList;import java.util.Scanner;public class banker { //判断安全序列里是否已有某序列 public static boolean isExist(int[] safeList,int k){ int flag=0; for(int i=0;i&lt...

原创 阿里云学生服务器CentOS系统的jdk+Tomcat+mysql环境配置

第一步花钱买下服务器，设置远程登陆密码，添加端口开放规则。（开启21，22，80，443，3306，8080端口号）第二步下载SSH工具，使用SSH连接服务器，切换到“~”路径下：执行命令：安装JDK：yum -y install java-1.8.0-openjdk.x86_64查看是否安装成功：java -version显示出当前java版本就说明安装成...

转载 js移动端屏幕滑动实现

var startx, starty;//获得角度function getAngle(angx, angy) {return Math.atan2(angy, angx) * 180 / Math.PI;}; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动 function getDirection(startx, s...

原创 node.js中fs.readFile和fs.readFileSync的使用

博客由来： var admins; var admins2; await fs.readFile(path.resolve(__dirname,'../../admins.json'),function(err,data){ admins=data.toString(); console.log(admins); console.log(...