https://github.com/laqudee/vue-pixel

Vue2.x + SLIC + dat.gui 实现的pixel图像转换器【copy】
https://github.com/laqudee/vue-pixel

pixel vue2

Last synced: 4 months ago
JSON representation

Vue2.x + SLIC + dat.gui 实现的pixel图像转换器【copy】

• Host: GitHub
• URL: https://github.com/laqudee/vue-pixel
• Owner: laqudee
• Created: 2021-07-20T14:34:24.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-07-20T14:39:05.000Z (about 5 years ago)
• Last Synced: 2025-03-23T08:30:05.013Z (over 1 year ago)
• Topics: pixel, vue2
• Language: JavaScript
• Homepage:
• Size: 196 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# vue-pixel

### 项目是Vue 2.6.x版本化的[实现SLIC算法生成像素画](https://jelly.jd.com/article/60c88cad22bc900171d19fbd)

- 参考自[作者的Github项目地址](https://github.com/xs7/Pixelate)

### 简述

- 当我看到这篇技术博客时，第一时间想的是先把项目在本地跑起来。这一步很顺利！

- 接着，我梳理了一下SLIC算法的步骤（查看SLIC算法的实现步骤）

- 然后，我梳理了源代码的实现逻辑，作者借助dat.gui动态的展示了不同参数值对生成像素风图片的影响。

  - 源码使用webpack构建打包，没有使用vue或react等框架，应该没有必要。

  - 主要分为rgb转lab算法、SLIC算法实现部分和canvas绘制部分及dat.gui动态联动四个部分。

  - 源码还实现了导入图片和导出图片功能，非常nice。

  - rgb2lab、SLIC算法还没有看懂... （正在看!!!）

  - 源码的逻辑流程已经走通；作者的编码风格也值得学习。

- 我本来打算使用vite构建一个vue3的项目，但是不是很顺利。使用vite构建的vue3项目似乎遇到了某些生命周期上的问题，导致一直卡在计算阶段。

- 最后还是使用vue-cli构建了一个vue2的项目，是顺利的。不知道是不是因为vue-cli是基于webpack封装的原因。

### SLIC算法概要

- 2003年提出和发展起来的图像分割技术，是指具有相似纹理、颜色、亮度等特征的相邻像素构成的有一定视觉意义的不规则像素块。

- SLIC主要优点：

  - 1.生成的超像素如同细胞一般紧凑，领域特征比较容易表达

  - 2.可以分割彩色图，也可以分割灰度图

  - 3.需要设置的参数非常少，默认情况下只需要设置一个预分割的超像素的数量

  - 4.SLIC运行速度、生成超像素的紧凑度、轮廓保存方面都比较理想。

- Lab颜色空间

  - Lab色彩模型是由亮度L和有关色彩的a，b三个要素组成。

  - L：亮度，0黑-100白

  - a：从洋红色到绿色，-绿 -> +品红

  - b：从黄色到蓝色，-蓝 -> +黄色

- Lab的优点，不赘述了。

- SLIC具体实现的步骤：

  - 1.初始化种子点（聚类中心）：假设图片总像素点为N，预分割为K个相同尺寸的超像素，那么每个超像素的大小为N/K，则相邻种子点的距离（步长）近似于S = sqrt(N/K)

  - 2.在种子点的n*n领域内重新选择种子点（一般取n=3）.

    - 具体做法：计算该领域内所有像素点的梯度值，将种子点移到该领域内梯度最小的地方。这样做的目的是为了避免种子点落在梯度较大的轮廓边界上，以免影响后续聚类效果。

  - 3.在每个种子点周围的领域内为每个像素点分配类标签（即属于哪个聚类中心）。和标准的k-means在整张途中搜索不同，SLIC的搜索范围限制为`2S*2S`，可以加速算法收敛，如下图。在此注意一点：期望的超像素尺寸为`S*S`，但是搜索的范围是`2S*2S`。

  - 4.距离度量。包括颜色距离和空间距离。对于每个搜索到的像素点，分别计算它和该种子点的距离。

    - 计算方法：

    - ![计算方法](https://upload-images.jianshu.io/upload_images/4808162-0744d9a599eb65bf.png?imageMogr2/auto-orient/strip|imageView2/2/w/367/format/webp)

    - dc代表颜色距离

    - ds代表空间距离

    - Ns代表类内最大空间距离，Ns=S=sqrt(N/k)，适用于每个聚类。

    - Nc代表最大颜色距离，随着图片不同而不同，也随距离不同而不同，所以取一个固定数m（取值范围[1, 40]，一般取10）代替

    - D'代表最终的距离度量，

      - 由于每个像素点都会被多个种子点搜索到，所以每个像素点都会有一个与周围种子点的距离，取最小值对应的种子点作为该像素点的聚类中心。

  - 5.迭代优化。理论上上述步骤不断迭代直到误差收敛（可以理解为每个像素点聚类中心不再发生变化为止），实践发现10次迭代绝大部分图片都可以得到较理想效果，所以一般迭代次数取10.

  - 6.增强连通性。经过上述迭代优化可能出现以下瑕疵：

    - 出现多连通情况

    - 超像素尺寸过小

    - 单个超像素被切割成多个不连续超像素等。

    - 解决思路：

      - 新建一张标记表，表内元素均为-1，按照“Z”型走向（从左到右，从上到下顺序）将不连续的超像素、尺寸过小超像素重新分配给邻近的超像素，遍历过的像素点分配给相应的标签，直到所有点遍历完毕为止。 

### 使用的库

- dat.gui

- vue-cli

- vue 2.6.x

### 问题与思考

- 1.当我们需要大量重绘页面时，使用虚拟DOM技术是否还有优势？

- 2.虚拟DOM技术的应用边界

- 3.总结一些常用文件的下载、上传方法以及vue版和react版

  - excel的上传与前端解析和下载

  - 图片上传与解析与下载

  - pdf上传与解析和下载

  - 其他文件的上传与解析和下载