图片像素化
像素化一张图片
1.为什么我会想要一种像素风格的图片
因为我前段时间想要DIY一个便携的显示器，直接一个面板+驱动的方案看上去不但造型不行，而且不易携带。于是我就在网上搜索，我发现了可自定义化程度最高的就是面板+驱动+微积木方案了，但是自定义的像素风格图片去哪找呢，于是我就想要一个这样的效果。
2.如何实现
这边我采用的是在浏览器这个平台进行操作，一个原因是使用其他语言我需要去学习对应的库，第二个就是在浏览器这个平台上我能够更快地得到反馈。
1.关于屏幕上的像素点
通过分辨率的设定，我们可以在屏幕上划分出不同的行、列可显示的像素数，比如同样的300 * 300
像素的图片在，2560 * 1440 和 1920 * 1080的分辨率下默认的显示大小是不同，这种时候屏幕一格的像素大小就产生了差异。
2.曾经与现在
现在的屏幕往往在最低的分辨率下，屏幕划分好的一个像素点也比以前的屏幕要小了不知道多少倍，目前我们可以假设：一个曾经的像素点 = 一个现在的像素点 * 9 * 9。
3.屏幕展示像素数量多的好处
显而易见，像素数就是一个区域色彩展示的层度，更多的像素数可以体现出更加细节的处理。因为像素是方格的，越小的像素点可以是的方格与方格之间过渡更加的平滑。整体的细节处理就更加优秀。
4.关于我们使用操作系统放大图片
关于这一点，我的理解是：操作系统放大图片的处理其实是对图片中每个实际像素的逻辑扩大，也就是图片源文件其实是不变的，但是我们再放大时其实是在使用临时的图片文件，然后我们对源文件的每个像素进行采样并进行新的映射，比如原来的 1个像素映射成 2*2个像素区的逻辑像素。
3.具体实现
看了上面的操作，实际上我们就可以有初步的方案了，也就是对图片进行缩小的采样与扩大的映射。
1.使用浏览器与操作系统的能力进行操作。（js版，学习逻辑直接跳过）
- 将图片缩小并画到画布上。
- 将画布上的图片画到临时图片DOM上。
- 将临时的图片DOM画到与图片原来尺寸相同甚至更大的画布上。
在上述的操作中图片的采样以及映射均由浏览器为我们实现。
具体代码：scale为采样间隔或者说缩放比例，影响采样频率。
2.使用自己实现的逻辑方案。
1.每隔多少行多少列(gap)进行一次采样
2.对采样后的像素进行映射,映射大小为 1像素 = gap * gap 像素
因为图片的资源占用量比较大。