{"id":22014136,"url":"https://github.com/laqudee/vue-pixel","last_synced_at":"2026-04-17T03:03:22.784Z","repository":{"id":146793069,"uuid":"387819881","full_name":"laqudee/vue-pixel","owner":"laqudee","description":"Vue2.x + SLIC + dat.gui 实现的pixel图像转换器【copy】","archived":false,"fork":false,"pushed_at":"2021-07-20T14:39:05.000Z","size":201,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T08:30:05.013Z","etag":null,"topics":["pixel","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laqudee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-20T14:34:24.000Z","updated_at":"2023-11-13T04:09:51.000Z","dependencies_parsed_at":"2023-04-30T19:16:58.155Z","dependency_job_id":null,"html_url":"https://github.com/laqudee/vue-pixel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/laqudee/vue-pixel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fvue-pixel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fvue-pixel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fvue-pixel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fvue-pixel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laqudee","download_url":"https://codeload.github.com/laqudee/vue-pixel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fvue-pixel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31913078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pixel","vue2"],"created_at":"2024-11-30T03:26:26.226Z","updated_at":"2026-04-17T03:03:22.769Z","avatar_url":"https://github.com/laqudee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-pixel\n\n### 项目是Vue 2.6.x版本化的[实现SLIC算法生成像素画](https://jelly.jd.com/article/60c88cad22bc900171d19fbd)\n\n- 参考自[作者的Github项目地址](https://github.com/xs7/Pixelate)\n\n### 简述\n- 当我看到这篇技术博客时，第一时间想的是先把项目在本地跑起来。这一步很顺利！\n- 接着，我梳理了一下SLIC算法的步骤（查看SLIC算法的实现步骤）\n- 然后，我梳理了源代码的实现逻辑，作者借助dat.gui动态的展示了不同参数值对生成像素风图片的影响。\n  - 源码使用webpack构建打包，没有使用vue或react等框架，应该没有必要。\n  - 主要分为rgb转lab算法、SLIC算法实现部分和canvas绘制部分及dat.gui动态联动四个部分。\n  - 源码还实现了导入图片和导出图片功能，非常nice。\n  - rgb2lab、SLIC算法还没有看懂... （正在看!!!）\n  - 源码的逻辑流程已经走通；作者的编码风格也值得学习。\n\n- 我本来打算使用vite构建一个vue3的项目，但是不是很顺利。使用vite构建的vue3项目似乎遇到了某些生命周期上的问题，导致一直卡在计算阶段。\n- 最后还是使用vue-cli构建了一个vue2的项目，是顺利的。不知道是不是因为vue-cli是基于webpack封装的原因。\n\n\n### SLIC算法概要\n- 2003年提出和发展起来的图像分割技术，是指具有相似纹理、颜色、亮度等特征的相邻像素构成的有一定视觉意义的不规则像素块。\n\n- SLIC主要优点：\n  - 1.生成的超像素如同细胞一般紧凑，领域特征比较容易表达\n  - 2.可以分割彩色图，也可以分割灰度图\n  - 3.需要设置的参数非常少，默认情况下只需要设置一个预分割的超像素的数量\n  - 4.SLIC运行速度、生成超像素的紧凑度、轮廓保存方面都比较理想。\n\n- Lab颜色空间\n  - Lab色彩模型是由亮度L和有关色彩的a，b三个要素组成。\n  - L：亮度，0黑-100白\n  - a：从洋红色到绿色，-绿 -\u003e +品红\n  - b：从黄色到蓝色，-蓝 -\u003e +黄色\n\n- Lab的优点，不赘述了。\n\n- SLIC具体实现的步骤：\n  - 1.初始化种子点（聚类中心）：假设图片总像素点为N，预分割为K个相同尺寸的超像素，那么每个超像素的大小为N/K，则相邻种子点的距离（步长）近似于S = sqrt(N/K)\n  - 2.在种子点的n*n领域内重新选择种子点（一般取n=3）.\n    - 具体做法：计算该领域内所有像素点的梯度值，将种子点移到该领域内梯度最小的地方。这样做的目的是为了避免种子点落在梯度较大的轮廓边界上，以免影响后续聚类效果。\n  - 3.在每个种子点周围的领域内为每个像素点分配类标签（即属于哪个聚类中心）。和标准的k-means在整张途中搜索不同，SLIC的搜索范围限制为`2S*2S`，可以加速算法收敛，如下图。在此注意一点：期望的超像素尺寸为`S*S`，但是搜索的范围是`2S*2S`。\n  - 4.距离度量。包括颜色距离和空间距离。对于每个搜索到的像素点，分别计算它和该种子点的距离。\n    - 计算方法：\n    - ![计算方法](https://upload-images.jianshu.io/upload_images/4808162-0744d9a599eb65bf.png?imageMogr2/auto-orient/strip|imageView2/2/w/367/format/webp)\n    - dc代表颜色距离\n    - ds代表空间距离\n    - Ns代表类内最大空间距离，Ns=S=sqrt(N/k)，适用于每个聚类。\n    - Nc代表最大颜色距离，随着图片不同而不同，也随距离不同而不同，所以取一个固定数m（取值范围[1, 40]，一般取10）代替\n    - D'代表最终的距离度量，\n      - 由于每个像素点都会被多个种子点搜索到，所以每个像素点都会有一个与周围种子点的距离，取最小值对应的种子点作为该像素点的聚类中心。\n  - 5.迭代优化。理论上上述步骤不断迭代直到误差收敛（可以理解为每个像素点聚类中心不再发生变化为止），实践发现10次迭代绝大部分图片都可以得到较理想效果，所以一般迭代次数取10.\n  - 6.增强连通性。经过上述迭代优化可能出现以下瑕疵：\n    - 出现多连通情况\n    - 超像素尺寸过小\n    - 单个超像素被切割成多个不连续超像素等。\n    - 解决思路：\n      - 新建一张标记表，表内元素均为-1，按照“Z”型走向（从左到右，从上到下顺序）将不连续的超像素、尺寸过小超像素重新分配给邻近的超像素，遍历过的像素点分配给相应的标签，直到所有点遍历完毕为止。 \n\n### 使用的库\n\n- dat.gui\n- vue-cli\n- vue 2.6.x\n\n### 问题与思考\n- 1.当我们需要大量重绘页面时，使用虚拟DOM技术是否还有优势？\n- 2.虚拟DOM技术的应用边界\n- 3.总结一些常用文件的下载、上传方法以及vue版和react版\n  - excel的上传与前端解析和下载\n  - 图片上传与解析与下载\n  - pdf上传与解析和下载\n  - 其他文件的上传与解析和下载\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaqudee%2Fvue-pixel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaqudee%2Fvue-pixel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaqudee%2Fvue-pixel/lists"}