标签

 js 

相关的文章:

张鑫旭-鑫空间-鑫生活 -

本地MP3封面图、时长等信息的JS读取

本文通过真实的demo演示案例给大家展示如何使用JS获取本地音乐文件的封面图、文件名及时长等信息。

AI生成摘要 这篇文章介绍了如何使用JavaScript读取本地上传的MP3音频文件的封面图和时长。封面图可以通过引用jsmediatags项目来获取,然后将其转换为Base64地址或Blob URL地址。音频文件的时长可以通过FileReader对象读取本地文件并触发加载来获取。最后,文章提供了一个演示页面来展示这些功能。

相关推荐 去reddit讨论

土豆不好吃 -

Node.js 18升级:双栈协议踩坑

很久之前我就发现了一个现象,有些时候我在使用 nc去探测本地的某些服务是否开启时,会有两个输出,第一次拒绝第二 […]

AI生成摘要 本文讨论了在使用nc探测本地服务时出现的奇怪现象,以及与IPv4和IPv6地址相关的问题。作者发现在升级Node.js时,无法连接到后端服务。经过思考,作者发现服务只监听了IPv4地址,而localhost通常同时解析为IPv6和IPv4地址。大多数应用程序在双栈情况下会优先尝试IPv6,如果失败则回落到IPv4。文章还介绍了127.0.0.1和::1的区别,以及0.0.0.0和::的含义。此外,作者还讨论了net.ipv6.bindv6only参数的作用以及MySQL在使用localhost时的特殊情况。最后,作者提到了Node.js在17版本之后出现的快乐眼球算法的问题。

相关推荐 去reddit讨论

字节跳动技术团队官方博客 -

用 Addon 增强 Node.js 和 Electron 应用的原生能力

前言Node.js Addon 是 Node.js 中为 JavaScript 环境提供 C/C++ 交互能力的机制。其形态十分类似 Java 的 JNI,都是通过提供一套 C/C++ SDK,用于在 C/C++ 中创建函数方法、进行数据转换,以便 JavaScript / Java 等语言进行调用。这样编写的代码通常叫做 Bindings。此外还有基于 C ABI Calling Convent...

AI生成摘要 Node.js Addon是为JavaScript环境提供C/C++交互能力的机制。它类似于Java的JNI,通过提供C/C++ SDK,在C/C++中创建函数方法和进行数据转换,以便其他语言调用。本文介绍了Node.js Addon的类型、基本原理和模块编写指南。同时还介绍了在Windows和MacOS下的构建配置和开发、分发、使用的一些实用技巧。

相关推荐 去reddit讨论

Planet MySQL -

Node.js MySQL Insert Record

We already have a tutorial on how to connect to the MySQL database using Node.js. Well, you can read it if you want to know, but it only allows you to interact with the database, what if you want to insert some new records directly from Node.js? You can also easily do this by executing […]

AI生成摘要 本教程介绍了如何使用Node.js将记录插入MySQL数据库。首先,了解了插入记录的SQL查询语法,然后介绍了使用Node.js插入单个记录和多个记录的语法和实现步骤。通过执行SQL查询,可以直接将记录插入表中。使用MySQL连接对象的query()方法可以执行SQL查询。对于插入单个记录,可以将查询作为参数传递给query()方法,并使用回调函数检查错误和打印插入的记录数。对于插入多个记录,需要将行的记录分别放入数组中,然后将数组作为第二个参数传递给query()方法。最后,提供了一个示例来演示如何使用Node.js将记录插入MySQL表中。

相关推荐 去reddit讨论

张鑫旭-鑫空间-鑫生活 -

剪映APP的视频特效如何在Web中JS实现

剪映中的视频特效虽多,其实就两类,一类改变原始像素,一类叠加混合,本文通过精简的源码和精致的案例给大家介绍具体如何实现。

AI生成摘要 这篇文章介绍了如何使用pixi.js实现特效和滤镜效果。其中,frag文件是片段着色器,通过改变颜色实现特殊效果。frag文件中的uniform变量控制着色效果的动态变化。文章还介绍了如何加载和使用frag文件,并提供了一个抖动效果的示例。此外,文章还讨论了使用MP4视频和滤色混合模式实现氛围特效的方法。最后,文章提到了视频滤镜和颜色映射滤镜的应用。

相关推荐 去reddit讨论

张鑫旭-鑫空间-鑫生活 -

mp4box.js加WebCodecs 解码MP4视频帧并渲染

应该是国内第一篇专门介绍用mp4box.js和VideoDecoder方法解码MP4视频序列帧的文章了。

AI生成摘要 这篇文章介绍了使用WebCodecs API对MP4视频进行解码的方法。作者使用了MP4Box.js工具来分析MP4文件并获取视频轨道数据,然后使用WebCodecs API中的VideoDecoder方法进行解码。最终解码出来的视频帧可以用于各种用途,例如作为特效图片显示。文章提供了详细的实现代码和演示页面。作者鼓励读者通过学习和积累技术来提高自己的竞争力。

相关推荐 去reddit讨论

解道jdon.com -

ReactJS前端性能优化6个小技巧

以下是一些提示 优化图片和CSS/JS:大尺寸图片会降低扩展的运行速度。压缩图片并使用 WebP 等格式。实施懒加载,只在需要时加载图片。 加速服务器请求:缓慢的服务器请求会成为性能瓶颈。使用缓存、CDN 和浏览器缓存。在本地存储数据,尽量减少不必要的 API 调用。 避免不必要的重新渲染:防止组件在数据未发生变化时重新渲染。在 React 中使用 useEvent、useMemo 和 React.memo 等技术来优化呈现。 优化数据存储:选择正确的数据存储方法。索引数据库非常适合在浏览

AI生成摘要 本文提供了一些优化前端性能的提示,包括压缩图片、实施懒加载、使用缓存和CDN等。同时,还介绍了如何避免不必要的重新渲染、优化数据存储、注重用户体验和关注内存使用情况等。具体实现方面,使用了NGINX内容缓存和IndexedDB优化大图片和内容的处理,同时使用了Sharp库压缩大图片、将应用状态存储在IndexedDB中、对大数据使用IndexedDB、对需要同步访问的少量数据使用LocalStorage等技术。最后,还介绍了keep-unchanged-values库的集成,以进一步提高性能。

相关推荐 去reddit讨论

aiktb's blog -

Stop Using kuromoji.js: @sglkc/kuromoji is a Better, More Modern Fork

Stop Using kuromoji.js: @sglkc/kuromoji is a Better, More Modern Fork &ZeroWidthSpace TL;DR &ZeroWidthSpace kuromoji.js has been the top choice for Japanese morphological analysis in JavaScript. However, kuromoji.js lacks direct browser compatibility and Service Worker support. Meet @sglkc/kuromoji, a fork that resolves these limitations. Why Choose kuromoji.js &ZeroWidthSpace kuromoji.js is a Node.js version of kuromoji, the main purpose of which is to perform morphological analysis of Japanese, providing information on the segmentation and pronunciation of Japanese text. I developed Furigana Maker, a browser extension that adds ruby character annotations to any Japanese text on any page, and the core logic of this extension is morphological analysis of Japanese text, so I need such a library very much to do it for me. Considering the npm landscape, kuromoji.js remains the primary solution for Japanese morphological analysis in JavaScript. Most packages related to ""Japanese morphological"" indirectly rely on kuromoji.js, leaving minimal alternatives. Challenges with kuromoji.js &ZeroWidthSpace Tolerable Issues &ZeroWidthSpace Firstly kuromoji.js disrespects the kuromoji API in its porting, changing a large number of field names, and worst of all it goes so far as to change the word_position field, which starts at 0, to start at 1. This certainly greatly diminishes the happiness of programmers. Secondly kuromoji.js doesn't support promise, only callback function, which can make the code structure messy, this can be solved by manually writing code to encapsulate it as a promise, a solution will be provided at the end of the article. Unacceptable Limitations &ZeroWidthSpace By default, integrating kuromoji.js into the browser involves referencing a CDN or directly including build/kuromoji.js in the project. However, this method negates many advantages of build tools, disrupts project structures, and crucially restricts ESM usage, because build/kuromoji.js is not an ES module. Using a build tool to package a project dependent on kuromoji.js and running it in the browser leads to a cascade of errors: kuromoji.js uses zlib.js, which does not run in the browser. kuromoji.js uses path , which is part of the Node.js core module. Also kuromoji.js consumes a steady 130MB (not extensively tested) of memory once it is active, which is a huge overhead, whereas browser extensions can very easily take advantage of Service Worker by starting it only when it is needed, and killing the process when it is not needed, rather than just letting it reside in memory. But Service Worker only supports the Fetch API, and kuromoji.js uses XMLHttpRequest, which will bring another error in Service Worker. The Solution: @sglkc/kuromoji &ZeroWidthSpace Don't try to solve these problems with polyfill, I've wasted a lot of time with that, modifying the kuromoji.js source code is necessary to solve the issues. And with the last commit of the kuromoji.js project in 2018 and the author Takuya Asano's last activity on github in 2022, it's to be expected that we won't be able to get any help from him, including merge Pull Request. The only solution was to fork this repo and then commit, publish, and luckily when I was about to start solving it myself, I was pleasantly surprised at NPM to find someone who had done everything I needed not too long ago, namely @sglkc/kuromoji, a fork of kuromoji.js. The changes can be seen in the sglkc's commit log: Substituting zlib.js with fflate. Eliminating reliance on the path module. Transitioning from XMLHttpRequest to the Fetch API. This solves all the key issues, and now we can easily package it up with the build tool and run it in the browser and Service Worker without any errors, and @sglkc/kuromoji doesn't have any changes to the kuromoji.js API. Thanks to @sglkc for his excellent work! Further Reading &ZeroWidthSpace Using Promise &ZeroWidthSpace This just needs a simple wrapper, this code references kuromojin. index.tsgetTokenizer.ts typescriptimport { getTokenizer } from './getTokenizer' const tokenizer = await getTokenizer() const tokens = tokenizer.tokenize('私の言語の境界は') /* [ {"word_position": 1, "surface_form": "私", "pos": "名詞", "pronunciation": "ワタシ"}, {"word_position": 2, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 3, "surface_form": "言語", "pos": "名詞", "pronunciation": "ゲンゴ"}, {"word_position": 5, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 6, "surface_form": "境界", "pos": "名詞", "pronunciation": "キョーカイ"}, {"word_position": 8, "surface_form": "は", "pos": "助詞", "pronunciation": "ワ"} ] */import { getTokenizer } from './getTokenizer' const tokenizer = await getTokenizer() const tokens = tokenizer.tokenize('私の言語の境界は') /* [ {"word_position": 1, "surface_form": "私", "pos": "名詞", "pronunciation": "ワタシ"}, {"word_position": 2, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 3, "surface_form": "言語", "pos": "名詞", "pronunciation": "ゲンゴ"}, {"word_position": 5, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 6, "surface_form": "境界", "pos": "名詞", "pronunciation": "キョーカイ"}, {"word_position": 8, "surface_form": "は", "pos": "助詞", "pronunciation": "ワ"} ] */ 123456789101112typescript// No need for `@ts-ignore`, contains index.d.ts by default. import kuromoji from '@sglkc/kuromoji' type Tokenizer = { tokenize: (text: string) => kuromoji.IpadicFeatures[] } class Deferred { promise: Promise<Tokenizer> resolve!: (value: Tokenizer) => void reject!: (reason: Error) => void constructor() { this.promise = new Promise<Tokenizer>((resolve, reject) => { this.resolve = resolve this.reject = reject }) } } const deferred = new Deferred() let isLoading = false export const getTokenizer = () => { if (isLoading) { return deferred.promise } isLoading = true const builder = kuromoji.builder({ dicPath: './assets/dicts' }) builder.build((err: undefined | Error, tokenizer: Tokenizer) => { if (err) { deferred.reject(err) } else { deferred.resolve(tokenizer) } }) return deferred.promise }// No need for `@ts-ignore`, contains index.d.ts by default. import kuromoji from '@sglkc/kuromoji' type Tokenizer = { tokenize: (text: string) => kuromoji.IpadicFeatures[] } class Deferred { promise: Promise<Tokenizer> resolve!: (value: Tokenizer) => void reject!: (reason: Error) => void constructor() { this.promise = new Promise<Tokenizer>((resolve, reject) => { this.resolve = resolve this.reject = reject }) } } const deferred = new Deferred() let isLoading = false export const getTokenizer = () => { if (isLoading) { return deferred.promise } isLoading = true const builder = kuromoji.builder({ dicPath: './assets/dicts' }) builder.build((err: undefined | Error, tokenizer: Tokenizer) => { if (err) { deferred.reject(err) } else { deferred.resolve(tokenizer) } }) return deferred.promise } 123456789101112131415161718192021222324252627282930313233343536373839 WanaKana &ZeroWidthSpace For processing Japanese text, there is a very nice library WanaKana that handles [romoji, hiragana, katakana] interconversions, as well as determining which of [kanji, romoji, hiragana, katakana] a Unicode character is. Note that this is not as simple as you might think, and I recommend using WanaKana directly to bypass the complexity behind this, and only use the regex if the results don't meet your needs. Getting kanji pronunciation &ZeroWidthSpace I accomplished something similar by extracting the kanji pronunciations from the Japanese text in the following form. typescript// It's not just kanji, such as "市ヶ谷" (イチガヤ), "我々" (ワレワレ). export type KanjiToken = { original: string reading: string start: number // Indexes start from 0 end: number }// It's not just kanji, such as "市ヶ谷" (イチガヤ), "我々" (ワレワレ). export type KanjiToken = { original: string reading: string start: number // Indexes start from 0 end: number } 1234567Since it takes less than 150 lines of code, there is no need to publish it to NPM and the full code can be read at Github.

AI生成摘要

相关推荐 去reddit讨论

aiktb's blog -

Stop Using kuromoji.js: @sglkc/kuromoji is a Better, More Modern Fork

Stop Using kuromoji.js: @sglkc/kuromoji is a Better, More Modern Fork &ZeroWidthSpace TL;DR &ZeroWidthSpace kuromoji.js has been the top choice for Japanese morphological analysis in JavaScript. However, kuromoji.js lacks direct browser compatibility and Service Worker support. Meet @sglkc/kuromoji, a fork that resolves these limitations. Why Choose kuromoji.js &ZeroWidthSpace kuromoji.js is a Node.js version of kuromoji, the main purpose of which is to perform morphological analysis of Japanese, providing information on the segmentation and pronunciation of Japanese text. I developed Furigana Maker, a browser extension that adds ruby character annotations to Japanese text on any page, like the example below. And the core logic of this extension is morphological analysis of Japanese text, so I was in great need of such a library to do this task for me. 私watashiの言語gengoの境界kyokaiは、私watashiの世界sekaiの境界kyokaiを意味imiする。 Considering the npm landscape, kuromoji.js remains the primary solution for Japanese morphological analysis in JavaScript. Most packages related to "Japanese morphological" indirectly rely on kuromoji.js, leaving minimal alternatives. Challenges with kuromoji.js &ZeroWidthSpace Tolerable Issues &ZeroWidthSpace Firstly kuromoji.js disrespects the kuromoji API in its porting, changing a large number of field names, and worst of all it goes so far as to change the word_position field, which starts at 0, to start at 1. This certainly greatly diminishes the happiness of programmers. Secondly kuromoji.js doesn't support promise, only callback function, which can make the code structure messy, this can be solved by manually writing code to encapsulate it as a promise, a solution will be provided at the end of the article. Unacceptable Limitations &ZeroWidthSpace By default, integrating kuromoji.js into the browser involves referencing a CDN or directly including build/kuromoji.js in the project. However, this method negates many advantages of build tools, disrupts project structures, and crucially restricts ESM usage, because build/kuromoji.js is not an ES module. Using a build tool to package a project dependent on kuromoji.js and running it in the browser leads to a cascade of errors: kuromoji.js uses zlib.js, which does not run in the browser. kuromoji.js uses path , which is part of the Node.js core module. Also kuromoji.js consumes a steady 130MB (not extensively tested) of memory once it is active, which is a huge overhead, whereas browser extensions can very easily take advantage of Service Worker by starting it only when it is needed, and killing the process when it is not needed, rather than just letting it reside in memory. But Service Worker only supports the Fetch API, and kuromoji.js uses XMLHttpRequest, which will bring another error in Service Worker. The Solution: @sglkc/kuromoji &ZeroWidthSpace Don't try to solve these problems with polyfill, I've wasted a lot of time with that, modifying the kuromoji.js source code is necessary to solve the issues. And with the last commit of the kuromoji.js project in 2018 and the author Takuya Asano's last activity on github in 2022, it's to be expected that we won't be able to get any help from him, including merge Pull Request. The only solution was to fork this repo and then commit, publish, and luckily when I was about to start solving it myself, I was pleasantly surprised at NPM to find someone who had done everything I needed not too long ago, namely @sglkc/kuromoji, a fork of kuromoji.js. The changes can be seen in the sglkc's commit log: Substituting zlib.js with fflate. Eliminating reliance on the path module. Transitioning from XMLHttpRequest to the Fetch API. This solves all the key issues, and now we can easily package it up with the build tool and run it in the browser and Service Worker without any errors, and @sglkc/kuromoji doesn't have any changes to the kuromoji.js API. Thanks to @sglkc for his excellent work! Further Reading &ZeroWidthSpace Using Promise &ZeroWidthSpace This just needs a simple wrapper, this code references kuromojin. index.tsgetTokenizer.ts typescriptimport { getTokenizer } from './getTokenizer' const tokenizer = await getTokenizer() const tokens = tokenizer.tokenize('私の言語の境界は') /* [ {"word_position": 1, "surface_form": "私", "pos": "名詞", "pronunciation": "ワタシ"}, {"word_position": 2, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 3, "surface_form": "言語", "pos": "名詞", "pronunciation": "ゲンゴ"}, {"word_position": 5, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 6, "surface_form": "境界", "pos": "名詞", "pronunciation": "キョーカイ"}, {"word_position": 8, "surface_form": "は", "pos": "助詞", "pronunciation": "ワ"} ] */import { getTokenizer } from './getTokenizer' const tokenizer = await getTokenizer() const tokens = tokenizer.tokenize('私の言語の境界は') /* [ {"word_position": 1, "surface_form": "私", "pos": "名詞", "pronunciation": "ワタシ"}, {"word_position": 2, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 3, "surface_form": "言語", "pos": "名詞", "pronunciation": "ゲンゴ"}, {"word_position": 5, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 6, "surface_form": "境界", "pos": "名詞", "pronunciation": "キョーカイ"}, {"word_position": 8, "surface_form": "は", "pos": "助詞", "pronunciation": "ワ"} ] */ 123456789101112typescript// No need for `@ts-ignore`, contains index.d.ts by default. import kuromoji from '@sglkc/kuromoji' type Tokenizer = { tokenize: (text: string) => kuromoji.IpadicFeatures[] } class Deferred { promise: Promise<Tokenizer> resolve!: (value: Tokenizer) => void reject!: (reason: Error) => void constructor() { this.promise = new Promise<Tokenizer>((resolve, reject) => { this.resolve = resolve this.reject = reject }) } } const deferred = new Deferred() let isLoading = false export const getTokenizer = () => { if (isLoading) { return deferred.promise } isLoading = true const builder = kuromoji.builder({ dicPath: './assets/dicts' }) builder.build((err: undefined | Error, tokenizer: Tokenizer) => { if (err) { deferred.reject(err) } else { deferred.resolve(tokenizer) } }) return deferred.promise }// No need for `@ts-ignore`, contains index.d.ts by default. import kuromoji from '@sglkc/kuromoji' type Tokenizer = { tokenize: (text: string) => kuromoji.IpadicFeatures[] } class Deferred { promise: Promise<Tokenizer> resolve!: (value: Tokenizer) => void reject!: (reason: Error) => void constructor() { this.promise = new Promise<Tokenizer>((resolve, reject) => { this.resolve = resolve this.reject = reject }) } } const deferred = new Deferred() let isLoading = false export const getTokenizer = () => { if (isLoading) { return deferred.promise } isLoading = true const builder = kuromoji.builder({ dicPath: './assets/dicts' }) builder.build((err: undefined | Error, tokenizer: Tokenizer) => { if (err) { deferred.reject(err) } else { deferred.resolve(tokenizer) } }) return deferred.promise } 123456789101112131415161718192021222324252627282930313233343536373839 WanaKana &ZeroWidthSpace For processing Japanese text, there is a very nice library WanaKana that handles [romoji, hiragana, katakana] interconversions, as well as determining which of [kanji, romoji, hiragana, katakana] a Unicode character is. Note that this is not as simple as you might think, and I recommend using WanaKana directly to bypass the complexity behind this, and only use the regex if the results don't meet your needs. Getting kanji pronunciation &ZeroWidthSpace I accomplished something similar by extracting the kanji pronunciations from the Japanese text in the following form. typescript// It's not just kanji, such as "市ヶ谷" (イチガヤ), "我々" (ワレワレ). export type KanjiToken = { original: string reading: string start: number // Indexes start from 0 end: number }// It's not just kanji, such as "市ヶ谷" (イチガヤ), "我々" (ワレワレ). export type KanjiToken = { original: string reading: string start: number // Indexes start from 0 end: number } 1234567Since it takes less than 150 lines of code, there is no need to publish it to NPM and the full code can be read at Github.

AI生成摘要 @sglkc/kuromoji is a fork of kuromoji.js that resolves its limitations, including lack of direct browser compatibility and Service Worker support. The fork substitutes zlib.js with fflate, eliminates reliance on the path module, and transitions from XMLHttpRequest to the Fetch API. The author recommends using WanaKana for [romoji, hiragana, katakana] interconversions and determining which of [kanji, romoji, hiragana, katakana] a Unicode character is. The author also provides code for extracting kanji pronunciations from Japanese text.

相关推荐 去reddit讨论

程序师 -

为什么我不使用 Next.js?

Next.js是 Remix 的一个非常流行的替代品,本文作者想诚实地表达个人对 Next.js 的看法和使用体验,并非有意抨击 Next.js。

AI生成摘要 本文认为Next.js过于复杂,Remix更注重标准API和稳定性,能提高软件可维护性和长期合作。Remix重写了Next.js的电商演示,用更少的代码带来更好的用户体验。作者认为Remix比Next.js更成功,但读者可自行判断。

相关推荐 去reddit讨论

热榜 Top10
...
Dify.AI
...
观测云
...
eolink
...
ShowMeBug
...
LigaAI
...
白鲸技术栈
...
天勤数据
推荐或自荐