html2canvas 图片跨域问题的解决方案及其原理|前端浏览器|JavaScript-HTML2Canvas-跨域1. 前言html2canvas 是一个用于将 DOM 结构转为 canvas 对象的一个库,利用这个库就可以实现对页面的某一部分进行截图这样的功能。
但是由于其工作方式是将 DOM 结构进行解析后渲染在一个离屏 canvas 上,因此会受到一些限制。最常见的就是跨域资源无法被正常渲染,其根本原因是 ...
面试中常见的排序算法总结|面试|面试题1. 冒泡排序
实现解法一(推荐去看解法二):
从第一个元素开始向后进行比较,在一轮比较的过程中,通过持续交换元素位置,将更大的元素推向后方。sortedIndex 表示已经排序好的元素,不参与内部的第二次循环。
1234567891011function babelSort(arr) { ...
带你看懂思源字体的各个版本都有什么区别|前端技术调研1. 前言思源字体是 Adobe 提供的一套开源字体,包含了 思源黑体 source-han-snas,思源宋体 source-han-serif,思源等宽 source-han-mono。其开源协议允许商业用途,同时允许对其进行修改,因此非常适合使用。
我们以思源黑体为例,当我们打开其 Relea ...
数据报告海报生成图片、PDF方案的技术调研|前端技术调研|可视化-PDF-HTML2Canvas-jsPDF1. 需求梳理现存在一个需求,要求用户可以通过控制左侧的表单选项,在右侧实时展示为用户生成的数据海报,在用户调整完毕后,可以生成共享链接、图片、PDF 三种可分享的媒体形式,整体效果如下图:
2. 海报的实时生成与预览2.1 架构设计整体页面的组件拆分并不复杂,可以简单分为如下几个组件:
Gen ...
TypeScript 类型体操通关记录|前端Javascript|Typescript1. 简单PickSource
Pick 是 TypeScript 中的一个内置工具类型,可以从某个类型中提取出来几个特定的属性 Key 来创建一个新的类型:
123456789101112interface Todo { title: string; description: str ...
手动实现 JavaScript 类的继承|前端Javascript|面试题-JavaScript-面向对象原型链继承这个实现方式是将子类的 prototype 直接指向一个实例化好的父类,这样当实例化后的子类查找属性或方法时,就能通过这个实例化好的父类拿到父类构造函数(在 prototype 上的)的属性或方法。
实现:
12345678910111213141516171819202122232425 ...
关于 Stylus 的常用技巧|前端CSS|CSS-stylusStylus Playground
1. 选择器Parent 选择器 & 字符可以用于父级选择器:
12345textareainput color #A7A7A7 &:hover color #000
编译为:
12345678textarea,input { ...
Node 服务内存溢出排查方案|后端Node|node-内存溢出对于本地可复现的进行调试使用 ab 指令可以在本地进行压测,如:
1ab -n 2000 -c 100 http://localhost:8090/home
然后通过 --inspect 指令链接 chrome 调试器进行调试:
1node --inspect --heapsnapshot-sig ...
Webpack 操练场 ③:使用 Webpack 构建 Vue 开发环境|前端前端工程化|webpack使用 Webpack 构建 Vue 开发环境对应代码:https://github.com/EsunR/webpack-playground/tree/main/templates/vue
本章节示例的 Vue 环境为 Vue3,基于 TypeScript 构建
调整 Eslint 规则如果我们 ...
Webpack 操练场 ②:使用 Webpack 构建 TypeScript 开发环境|前端前端工程化|webpack使用 Webpack 构建 TypeScript 开发环境对应代码:https://github.com/EsunR/webpack-playground/tree/main/templates/html-ts
准备 TypeScript 环境首先安装 TypeScript:
1pnpm insta ...