我全都要

搞快点

发表于 2024-12-17 分类于

html2canvas

html2canvas

基本使用

npm install html2canvas
import html2canvas from 'html2canvas'
// 语法
// html2canvas(element, options)

html2canvas(document.body).then(function(canvas) {
  // document.body.appendChild(canvas)
  let dataURL = canvas.toDataURL('image/png') // dataURL 为 base64 图片
  // var img = new Image()
  // img.src = dataURL
  // document.body.appendChild(img)
})

常用配置使用示例

var options = {
  dpi: 192,
  scale: 2, // 放大
  // logging: true, //日志开关，便于查看html2canvas的内部执行流程
  useCORS: true // 开启跨域配置, (跨域图片，转换的时候会将跨域图片识别为空白,因此需要开启此选项)
}
html2canvas(document.querySelector('#app'), options).then(canvas => {
  document.body.appendChild(canvas)
})

html2canvas 生成图片模糊问题

  1. html2canvas 第二个参数配置 scale 和 dpi, 参考
  2. 如果要生成的 dom 中有背景图片，将背景图片换成 div 包裹 img 标签形式，不要通过 css 设置成 background

dom-to-image

dom-to-image

基本使用

npm install dom-to-image
/* in ES 6 */
import domtoimage from 'dom-to-image'
/* in ES 5 */
var domtoimage = require('dom-to-image')
var node = document.getElementById('my-node')

domtoimage
  .toPng(node)
  .then(function(dataUrl) {
    var img = new Image()
    img.src = dataUrl
    document.body.appendChild(img)
  })
  .catch(function(error) {
    console.error('oops, something went wrong!', error)
  })

将 base64 转换成 file 对象用于上传到服务器

b64ToFile(dataurl)  {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
  }
  let file =  new File([u8arr], 'filename.png', {type:mime})
}

发表于 2024-12-15 分类于

当我们使用 npm 包时，需要修改部分源码做自定义功能，但是直接修改 node_modules 里面的文件，重新安装包后做的修改就没有了。一般常用办法有两个：

  1. 将代码下载到本地，修改后手动引入
  2. fork 别人的代码到自己仓库，修改后，从自己仓库安装

但是这样做比较麻烦，而且更新不方便。我们可以使用 patch-package 来管理修改

以 hexo-theme-next 为例

  1. 修改 node_modules 里面的代码

  2. 安装 patch-package：npm i patch-package --save-dev

  3. 执行命令：npx patch-package hexo-theme-next

第一次使用 patch-package 会在项目根目录生成 patches 文件夹，里面有修改过的文件 diff 记录

当这个包被重新安装后，可以使用如下方式让修改生效

方式一：执行命令：git apply --ignore-whitespace patches/hexo-theme-next+8.0.1.patch

方式二：在 package.json，新增命令 postinstall:

"scripts": {
+  "postinstall": "patch-package"
}

执行：npm run postinstall

该命令也会在每次 npm install 时自动执行

发表于 2024-12-14 分类于

dux 主题默认使用 Google Code Prettify 实现代码高亮

下载

在 highlight 官网下载 js 和 css 文件

可以使用官网提供的 CDN 链接，也可以根据需要定制自己需要的语言

选择自己喜欢的主题，在这里进行下载

将 highlight.main.js 文件放到主题的 /js/libs/ 文件夹中

编辑主题文件

编辑 /js/loader.js 文件，将 highlight.min.js 引入

tbquire.config({
  baseUrl: jsui.uri + '/js',
  urlArgs: 'ver=' + jsui.ver,
  paths: {
    'swiper'        : 'libs/swiper.min',
    'jquery.cookie' : 'libs/jquery.cookie.min',
    'jsrender'      : 'libs/jsrender.min',
    'router'        : 'libs/router.min',
    'lazyload'      : 'libs/lazyload.min',
    'prettyprint'   : 'libs/prettyprint',
+   'highlight'     : 'libs/highlight.min',
    'ias'           : 'libs/ias.min',
    'main'          : 'main',
    'comment'       : 'comment',
    'user'          : 'user'
  }
})

编辑 /js/main.js 注释掉 prettyprint 部分

/*
 * prettyprint
 * ====================================================
*/

-$('pre').each(function(){
-    if( !$(this).attr('style') ) $(this).addClass('prettyprint')
-})

-if( $('.prettyprint').length ){
-    tbquire(['prettyprint'], function(prettyprint) {
-        prettyPrint()
-    })
-}

+/*
+ * highlight
+ * ====================================================
+*/
+
+$('pre code').forEach((block) => {
+  tbquire(['highlight'], function() {
+    hljs.highlightBlock(block)
+})

此时 highlight 脚本已经生效，接下来就是应用 highlight 样式

应用 highlight 样式

你可以选择将下载好的 css 文件打开，将样式拷贝到 /libs/css/main.css 文件中

也可以在 wordpress后台-外观-自定义-添加额外css 中为主题定义样式

发表于 2024-12-09

github+JSDelivr

  1. 创建一个仓库来存储需要存放的静态资源

  2. 使用 JSDelivr 加速加载 Github 资源

形式为 https://cdn.jsdelivr.net/gh/{Github用户名}/{Github仓库名}@{版本名}/{仓库下资源路径}

其中版本名可以是当前仓库的 Release 或分支名

例如 github 链接为

https://github.com/wqdygkd/my-script/blob/main/test.txt

则使用 JSDelivr 加速链接为

https://cdn.jsdelivr.net/gh/wqdygkd/my-script@img/test.txt
  1. 使用 picgo 进行图片上传

picgo 一款图片上传的工具，目前支持 SM.MS 图床，七牛图床，腾讯云 COS，阿里云 OSS，Imgur，又拍云，GitHub 等图床
github 地址：https://github.com/Molunerfinn/PicGo
配置手册：https://picgo.github.io/PicGo-Doc/zh/guide/
插件：https://github.com/PicGo/Awesome-PicGo

配置 github 图床

仓库名为第一步创建的仓库，分支名随意，我的为 main
token 获取地址: https://github.com/settings/tokens，点击 Generate new token , 复选框为你这个 token 的权限，勾选 repo 即可
存储路径为仓库目录，可以随意
自定义域名根据需要设置，这里我们设置为 jsdelivr 加速域名，形式为 https://cdn.jsdelivr.net/gh/{Github用户名}/{Github仓库名}@{版本名}

使用 npm+JSDelivr

需要将当前仓库发布为 npm 包

去 npm 官网注册个账号去，然后

npm login
npm publish

如果你的包名为 @your-name/your-package 时需要 --access public 参数，原因是当包名以 @your-name 开头时，npm publish 会默认发布为私有包，但是 npm 的私有包需要付费

请注意，如果你之前用过淘宝镜像，那么请先手动切回官方源 npm config set registry https://registry.npmjs.org

发布成功之后，可以通过以下方式访问文件

https://cdn.jsdelivr.net/npm/(yourpackagename)@(version)/(file)

其他一些镜像

unpkg https://www.unpkg.com
知乎出品 https://unpkg.zhimg.com/
百度 https://code.bdstatic.com/npm/
饿了么 https://shadow.elemecdn.com/npm/

当文件有更新时，需要更新发布

# 删除指定的版本
npm unpublish 包名@版本号
# 重新发布
npm publish

配置 github action 自动发布

name: npm Package

on:
  push:
    branches:
      - main

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.2
        with:
          node-version: '12.x'

      - run: npm unpublish @wqdygkd/my-script@1.0.0

      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

发表于 2024-11-06 分类于

在 scss 中使用 :export 暴露变量

$color: #009A61;
//暴露css
:export {
  color: $color;
}

在 script 中引入变量

import variables from '@/assets/styles/variables.scss'

在 computed 中缓存暴露变量

computed: {
  variables() {
    return variables
  }
}

发表于 2024-11-01 分类于

若行首为 (、[、/、+、-，会与上一行代码相接，此时需要在行首添加分号
++、-- 在上下两行都不加分号的情况下，与下一行代码相接
return 语句在执行时会在末尾加分号

发表于 2024-11-01

WSL / MSYS2 / Cygwin / PowerShell7

Fluent Terminal / Windows Terminal

WSL 配置 zsh

wsl 下 git clone 报错：GnuTLS recv error (-110): The TLS connection was non-properly terminated.

安装 zsh

apt install -y zsh

安装 oh-my-zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# 如果无法安装，使用下面这种方式
sh -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ohmyzsh/ohmyzsh@master/tools/install.sh)"

配置插件

插件列表 https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins

zsh-syntax-highlighting
zsh-autosuggestions
zsh-proxy

# 安装 zsh-syntax-highlighting 插件
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

# 安装 zsh-autosuggestions 插件
git clone https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

git clone https://github.com/sukkaw/zsh-proxy.git ~/.oh-my-zsh/custom/plugins/zsh-proxy

# 安装 zsh-proxy 插件
git clone https://github.com/sukkaw/zsh-proxy.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-proxy

修改～/.zshrc，在 plugins 中添加 zsh-syntax-highlighting

# 编辑 ~/.zshrc
vim ~/.zshrc

# 在 plugins 后括号里添加安装的插件名字
plugins=(git zsh-syntax-highlighting zsh-autosuggestions)

# 刷新下配置
source ~/.zshrc

zsh-proxy

主题

主题列表

推荐两款主题

pure 主题
agnoster

PowerShell 7+ 配置 oh-my-posh & posh-git

https://zhuanlan.zhihu.com/p/137595941
https://zhuanlan.zhihu.com/p/137251716

安装 Fira Code 字体

Fira Code

发表于 2024-10-28 分类于

主要区分 +0 和 -0、NaN 和 NaN 在不同情况下的相等性区别

== ===

console.log(+0 === -0) // true
console.log(NaN == NaN) // false NaN 不与任何值相等，包括自身
console.log(undefined == null) // true
console.log(undefined === null) // false
console.log(NaN === NaN) // false
console.log(Number.NaN === NaN) // false

Object.is () 方法判断两个值是否是相同的值。比较时不会做类型转换，这与 == === 运算符的判定方式都不一样

Object.is(+0, -0) // false
Object.is(0, -0) // false
Object.is(0, +0) // true
Object.is(-0, -0) // true

Object.is(undefined, undefined) // true
Object.is(null, null) // true
Object.is(Number.NaN, Number.NaN) // true
Object.is(Number.NaN, NaN) // true
Object.is(NaN, NaN) // true
Object.is(NaN, 0 / 0) // true

在 Set， Map 内部，两个 NaN 是相等，+0 和 -0 也是相等的

let a = [NaN, NaN, undefined, undefined, +0, -0, {}, {}]
let b = new Set(a) // {NaN, undefined, 0, {}, {}}

总结：

  • 比较运算符中 +0 和 -0 是相等的、NaN 和 NaN 是不等的
  • Object.is () 方法中 +0 和 -0 是不相等的、NaN 和 NaN 是相等的
  • 在 Set， Map 内部， +0 和 -0 是相等的、NaN 和 NaN 也是相等的

发表于 2024-10-28 分类于

MDN 上关于 setTimeout 介绍

语法

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...])
// delay 可选 默认 0
// param1, ..., paramN 可选 ，附加参数，一旦定时器到期，他会作为参数传递给 function
// 返回值timeoutID是一个正整数，表示定时器的编号

应用

for (var i = 1; i <= 5; i++) {
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    i * 1000,
    i
  )
}
// 会立即返回一个 timeid
// 1
// 2
// 3
// 4
// 5

发表于 2024-10-25 分类于 
wget https://raw.github.com/sivel/speedtest-cli/master/speedtest.py
# 添加权限
chmod a+rx speedtest.py
# 简单的使用方法
python speedtest.py
# 生成一张图片，并分享给其他人
python speedtest.py --share
# 在默认情况下，SpeedTest是选择离测试机最近的一个节点进行测试的，如果你想要自定义测试到某个地区的上传/下载速率，那首先列出目前可用的SpeedTest服务器：
python speedtest.py --list
# 此时会列出所有的服务器（按照距离远近进行排列）
# 如果想一点一点的列出服务器，请输入：
python speedtest.py --list|more
# 如果你想列出指定地区的测试节点，可以使用
python speedtest.py --list | grep China
python speedtest.py --server 22991
# 如果是要生成分享的图片，那就加上 share
python speedtest.py --server 11599 --share