js插件

收集 js 插件

提取图片主题色：

• 参考：https://www.jianshu.com/p/2d435817e872
• 项目查看：https://github.com/sunxiaochuan/simple-demo/tree/0703b82de7f398f130404d43a5f3cca031006b04
• 图片跨域问题：
  • https://segmentfault.com/a/1190000023471978
• 彻底解决跨域问题：获取到的图片是 base64 格式的。canvas 支持处理这个格式的图片。

html 转图片

• canvas 截屏生成海报图片并下载：https://juejin.cn/post/6844903795785203719

• html2canvas 中文文档：https://allenchinese.github.io/html2canvas-docs-zh-cn/ 注意文档里有 api 写错了。

• <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> 这是 promise 补丁

• 尽量使用最新版本，早的版本截图不清晰。

• 图片跨域的话，可以使用 base64 格式的图片。图片的路径最好使用绝对路径，不然可能会让 html2canvas 报 error loading image 的错误。

• 代码参考：

  • 
  • 主要注意点：我们在配置里要设置 scrollX:0, scrollY:0,否者很可能转化出来的图片没有内容。

强大的 jQuery 图片查看器插件 Viewer.js

• https://www.jq22.com/jquery-info6536
• https://github.com/fengyuanchen/viewerjs
• 使用参考：https://www.dowebok.com/demo/192/index3.html

拖拽排序

• https://www.jq22.com/demo/Sortable-master20161122/
• https://github.com/SortableJS/Sortable#cdn

网页制作辅助工具-jQuery 标尺参考线插件

• https://www.zhangxinxu.com/wordpress/2010/08/%e7%bd%91%e9%a1%b5%e5%88%b6%e4%bd%9c%e8%be%85%e5%8a%a9%e5%b7%a5%e5%85%b7-jquery%e6%a0%87%e5%b0%ba%e5%8f%82%e8%80%83%e7%ba%bf%e6%8f%92%e4%bb%b6/

h5 可旋转全屏播放插件

• https://github.com/yisar/eplayer

强大的时间插件

• https://www.jq22.com/demo/jquery-date-range-picker20160905/

js 动画滚动插件

• AOS (opens new window)

检测所有图片是否加载完成并触发事件

• https://www.npmjs.com/package/imagesloaded

gird 布局（瀑布流）组件

• https://www.npmjs.com/package/masonry-layout

懒加载——img、组件的懒加载

• https://www.npmjs.com/package/react-lazyload

react 拖拽库

• https://www.npmjs.com/package/react-dnd
  • 对应中文文档：
    • https://ant-learning.redhtc.com/modules/dnd
    • https://juejin.cn/post/6844903933463265293
  • 官网具体示例：
    • https://react-dnd.github.io/react-dnd/examples
    • https://github.com/react-dnd/react-dnd/tree/main/packages/examples

react 颜色选择器

• react-color (opens new window)
  • 使用注意点：传入颜色时格式以{r:xxx,g:xxx,b:xxx,a:xxx}的形式传入，防止组件本身有的 bug。

步骤提示插件：

• Intro.js (opens new window)

可移动面板布局

• react-split-pane-next (opens new window)
• 示例：https://tomkp.github.io/react-split-pane/?path=/story/basic--basic-nested

时间格式化

• day.js

参数格式化

• qs.js (opens new window)

AE 的 json 格式转为动画

• lottie-web 对应前端动画插件。lottie 还有 ios、android、flutter 等组件可用。
  • 但是 lottie-web 的动画在播放循环动画时会内存泄漏。可以尝试使用 react-lottie-player 包解决这个问题。
    • lottie-web 内存泄漏的解决办法是 调用 Lottie.destroy() 销毁整个 Lottie，在需要的时候再运行动画。