以上就是图片前端压缩并上传demo的完整演示。 要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法。 各参数具体含义可以参见“Canvas API中文文档-drawImage”，这里不展开。 把大图片画在一张小画布上，压缩…

当我们需要用更直观有效的形式来展现各类大数据信息时，热力图无疑是一种很好的方式。作为一种密度图，热力图一般使用具备显著颜色差异的方式来呈现数据效果，热力图中亮色一般代表事件发生频率较高或事物分布密度较大，暗色则反之。 值得一提的是，热力图最终效果常常优于离散点的直接显示，可以在…

=.= 结合自身 一点微小的优化解读

就是RGB三种颜色分别取255的差值。 rgb三种颜色取三种颜色的最值的平均值。 高斯模糊的原理就是根据正态分布使得每个像素点周围的像素点的权重不一致，将各个权重（各个权重值和为1）与对应的色值相乘，所得结果求和为中心像素点新的色值。我们需要了解的高斯模糊的公式：

最近在学习canvas，然后照葫芦画瓢简单实现了几个小demo，跟大家一块学习一下。 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 是Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据。 color/alpha 以数组形式…

前段时间做某系统审核后台，出现了审核人员截图把内容外泄露的情况，虽然截图内容不是特别敏感，但是安全问题还是不能忽视。于是便在系统页面上面加上了水印，对于审核人员截图等敏感操作有一定的提示作用。 Canvas兼容性 这里我们用canvas来生成base64图片，通过CanIUse…

基于 webpack 的持久化缓存方案

Canvas 的绘制功能跟 DOM 是耦合的，而 OffscreenCanvas 解耦了DOM和Canvas API，可以把canvas代码放在worker里执行，可以释放主线程上的资源，可以避免主线程繁忙的时候导致动画丢帧

这次项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型做个汇总。 有些图片（例如下面这个jpg动图）太大，进行了一定程度的压缩，有点模糊（＾_＾）。 改进版：大小和亮暗用gap控制，近大远小，近亮远暗。 这篇文章画的是angle一个纬度，只要再增加另外一个纬度r…