面对网页性能要求越来越高的今天，项目性能优化已经成了项目开发中必不可少的一个环节。尤其是现在越来越火🔥的在线教育、在线编辑、直播、游戏等类型的项目中Canvas和WebGL的运用越来越多。

废话开篇：想象一个场景，就是如何根据一张图片大概提取出它的主色调呢？获取主色调后，可能会用来设置某些背景颜色，这里，利用 JS 简单获取本地图片主色调 一、实现效果 鲜花 大海 森林 二、实现 1、实

最近做的一个需求，场景之一是绘制一个雷达图，找了一圈，似乎 AntV 下的 F2 很适合拿来主义： 但是接着又考虑了一下，我当前所做的项目并不是可视化项目，今后大概率也不会有这种可视化图表的需求，只是

场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法： 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520…

一个图片裁剪组件的应用场景其实比较多，相应的第三方插件也不少，但有时候会需要一些特定的功能，比如想有个特定样式的裁剪框，想批量裁剪，甚至想直接裁出定制化的尺寸等等，这时就只能手写一个裁剪组件了。 上传图片时，用onChange事件来获取该file对象，里面会包含文件的name，…

模糊在 canvas 中应该算是个经典问题了，相信大家也曾经看过很多相关文章，但总是记不住，为此我画了几张高清图来加深理解。

本文是基于canvas去实现图片裁剪工具。因为canvas代码还是比较长的，尽量写思路，完整代码已放在github上。 这个是写canvas必定接触的问题，网上关于这个的答案也到处都是，就不详细介绍了。 因为canvas不是矢量图，在Retina屏下，浏览器用多个像素点去渲染一…

基于canvas实现的多功能画板，目前已完成第一版，功能包括画笔、橡皮擦、撤回、清除画板、保存、图层、拖拽...

最近项目上要实现一个类似像素风格的画板，可以像素小格子可以擦除，框选变色，可以擦出各种图形，这样一个小项目看似简单，包含的东西还真不少。 这样做看似完美，然而有一个巨大毙命，每画一个像素都回绘制到上下文中，每一次都在改变canvas的状态，这样做会导致渲染性能太差，因为像素点很…