在线的图片颗粒化效果实现

最新推荐文章于 2023-07-12 09:40:36 发布
最新推荐文章于 2023-07-12 09:40:36 发布
阅读量698 收藏 1
点赞数
分类专栏： 前端 文章标签： html5 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wh8383672/article/details/120123023
版权

图片颗粒化也可以称作图片粒子化或者图片像素化。其原理即通过一定的规则来提取图片中的像素点，从而得到了所需图像或者文字内容的具体坐标，然后按照规则将它们形象地用一个个的粒子进行表示，从而使图片呈现出抽象化的观赏效果。 一般用于制作社交头像和颗粒文字，颗粒化之后的图片，具有很强的艺术效果。 （哈哈这是从我的网站复制粘贴的一套说辞）。

最近在自己的网站butterPig上又实现了一个小功能，也就是图片的颗粒化，也可以叫做图片粒子化等等，随意叫就行啦。总之就是把图片和文字之类的，转换成很多小颗粒组成，还挺好看的。先上链接吧：butterpig在线图片颗粒化效果生成

下面是几张效果图：

 

 

我感觉特别是对于卡通人物简笔画这类图片的效果很好，因为卡通图片转换成颗粒化之后，轮廓线条被颗粒描绘得很清晰。不过因为我写的是一种通用算法，因为是“通用”，所以对于大尺寸的图片，转换后的颗粒显得有点点小，不过放大了看也还可以。总之这个图片颗粒化的功能就是这样啦~~以后有空再改进改进呗！

butterpig在线图片颗粒化效果生成

欢迎大家体验一下~~

 

 

butterpig
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
butterpig.github.io：我的网站：www.butterpig.top
02-23
butterpig.github.io：我的网站：www.butterpig.top
反应堆中材料的辐照损伤简介
Allenkx的博客
08-31 200
简单来说，高能粒子对材料的辐照产生一系列缺陷的过程称为辐照损伤，这些缺陷对材料组织和性能的影响称为辐照效应。对辐照效应的研究涉及多个领域，其中最紧密相关的，也是最主要的应用，就是核电事业的发展，尤其是核聚变发电站的建设。被称为“人造太阳”的ITER计划是当今世界引人注目的国际项目，它将利用氢核聚变反应产生的巨大能量为全世界提供“无限”的电力。除了核聚变反应堆本身结构设计的难题之外，制约项目进展的最重要因素还是材料的问题。为了制造符合要求的材料，数十年来，各国学者和工程技术人员对材料的辐照损伤进行了大量研究，
摄影初学者挑选相机的常见问题[转]
maxma的博客
06-16 499
数码相机一次次降价，越来越多的人加入摄影的行列，照相器材还是一个比较专业的领域，并非简单的参数比一下高低就可以知道好坏，很多朋友往往了解了好久还没弄清孰优孰劣，在购机前踌躇半天拿不定主意，我收集了被问的最多的一些问题，在这里集中解答一下，希望对新人有帮助。 一、高端相机拍出来的照片肯定比低端相机好吗？ 二、没有后期过的照片才是真实的照片，才是真水平吗？ 三、像素越高画质...
摄影原理
weixin_33858485的博客
09-25 612
数码单反摄影入门 1数码单反摄影入门第一课 器材准备篇（一） 2第二课 器材准备篇（二） 4第三课 光圈 6第四课 快门 8第五课 曝光 10第六课 景深 13第七课 对焦 16第八课 感光度 18第九课 曝光补偿 21第十课 点测光 26第十一课 外接闪光灯 30第十二课 基本构图 34第十三课 直方图(histogram) 40第十四课 制造浅景深的方法 44forum.funfr.com2数...
干货收藏|检查员谈QC检查5大重点，附案例！
m0_75273470的博客
07-12 185
QC检查的五大重点
用In.js颗粒化管理、加载你的Javascript模块
weixin_30834783的博客
10-31 121
近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。 国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.j...
利用 JS 进行图片处理并生成对应粒子图
weixin_33737134的博客
01-31 1490
平时需要实现几个的动效来改善无聊的中后台业务带来的负面情绪。 概述：利用 JS 以及 Three.js 对下图进行处理 来生成对应的粒子图，实例代码。 主要分为以下几个步骤 1. 获取对应图像信息 首先读取图片，可以利用 document.images 获取页面中 img 的信息。 再将 img 绘制到 canvas 画布，利用 getImageData 获取图像的像素信息，具体如下 ge...
如何实现图片转为粒子效果
qq_33003143的博客
07-09 487
记录disintegrate插件的使用。
函数颗粒化 参数截取并传递
Kangl的博客
12-14 982
/*----函数颗粒化就是函数参数截取，并合并参数-----*/ // 在这个函数中进行add函数所需参数的截取，用到的函数slice,call,apply function curry(fn){ //截取第一个参数 var firstAgu = Array.prototype.slice.call(arguments,1);
使用h5中canvas画圆角矩形，生成透明圆角图片
ButterPig
03-02 1116
最近在个人网站butterpig实现了图片一键转换圆角功能，该功能的实现主要用到了html5中的canvas绘图技术。 首先，实现效果如下： 为了实现该功能，首先我们要生成一个透明底色的空内容的canvas，然后获取到canvas的context对象，通过对象的arc()和lineTo()方法来画出一个圆角的矩形，部分代码如下： ctx.beginPath(); ctx.arc(width-radius, height-radius, radius, 0, Math.PI/2); ctx.lin
面颗粒效果视频素材
11-22
面颗粒效果视频素材FilmLooks - Film Grain Super 8 Collection
用canvas实现图片滤镜效果附演示
12-14
颗粒的大小通过变换矩阵实现，可以任意调节，有兴趣研究的朋友可以尝试更多的效果，代码没有经过优化，只是一个粗糙的Demo，大家可以自行改进。 1.获取图像数据 复制代码代码如下: img.src = ’...
灯光颗粒倒计时效果特效代码
03-20
灯光颗粒倒计时效果是一款17php网站的jquery超酷倒计时特效，效果很酷，兼容性很超好。
实时在线监测的设计与实现
01-19
在理想的状况下，浊度可以通过理论计算获得，但在实际工程中，液体中颗粒的大小、形状、表面构造、表面性质等因素都对浊度值有很大影响。所以在工程中为了得到准确的浊度参数，需要进行实际的测量。 　为解决此问题...
怎样在线将图片转换成icon图标
ButterPig
10-20 3925
很久之前开发过一个图片转换ico的功能，用的人还不少，但是感觉功能配置太简易，用起来不那么得心应手，而且界面显得有点low，所以有制作了一个在线图片转ico图标pro加强版，功能更加强大，界面交互能力增强了不少。首先上地址大家体验一下： 在线图片转换ICO图标专业版,图片裁剪转ICO图标工具https://www.butterpig.top/icopro/ 现在这个加强版的界面可以说人性化得多，预览效果也更强了。并且还能实时的对图片进行缩放裁剪，并且也能实时预览。而且现在可以连续的拖动图片添加到上传
怎样将jpg、png制作成windows桌面ico图标文件
热门推荐
ButterPig
12-08 1万+
之前在前端设计实现了一个生成ico图标的功能，然而后来经过用户的反馈才发现，之前生成的ico图标的编码格式，其实只能在网站等地方使用，如果在windows桌面上使用，就会提示找不到ico图标文件，错误提示如下所示。 这个错误确实是百思不得其解，我以为只要图片的后缀是ico的，windows系统就能够认可，然而事实是，windows的桌面ico对它内部的编码格式是有很严格要求的。也就是说，windows桌面图标使用的ico文件，不是从png或者jpg直接演化而来的。 因此从网上找到了一个思路，也就是.
前端实现ICON图标生成器
ButterPig
12-16 1488
如上图所示，是在网站上使用纯前端代码实现的一个图片转换ico图标的在线工具，所谓纯前端也就是说他没有把用户上传的图片传输到后台服务器进行处理，然后再发送回前端。而是全部直接在前端对用户上传的图片进行裁剪、缩放、格式转换等等，最终产生符合要求的ico图标文件，并让用户进行下载。 在线icon图标生成器https://www.butterpig.top/icopro/那么左边的裁剪框是使用了开源的vue-cropper组件制作的，应该是是相当方便了，不过里面也不是完全没坑，还是有一点点bug的。vue-...
颗粒化处理图片，科技感十足（当下最流行的图片处理方式之一）
前端工程师--则丸
04-18 4393
我们经常在很多企业网站上看到这样的 图片 部分网站使用过于鲜艳的图片会对用户造成不适感，非常需要这样的图片来做首页轮播图， 那么，接下来，我给大家完整的演示这样的图片是怎么处理的。 第一步：在ps中创建一张4x4像素的项目 第二步：弄出一个透明图层 第三步：使用铅笔在该图层画四个1px的黑点 第四步
[codes] 函数颗粒化
Mayness的博客
04-22 1107
我们想要创建一个函数，在连续调用时将数字加在一起。 add(1)(2); // returns 3 我们还希望能够继续为函数添加数字。 add(1)(2)(3); // 6 add(1)(2)(3)(4); // 10 add(1)(2)(3)(4)(5); // 15 等等。 单个调用应该返回传入的数字。 add(1); // 1 我们应该能够存储返回的值并重用它们。 var add...
matlab图片识别颗粒粒径
最新发布
12-16
可以使用MATLAB中的图像处理工具箱来进行颗粒粒径的识别。具体步骤如下： 1.读取图像并进行预处理，例如去噪、二值化等操作。 2.使用形态学处理方法，例如膨胀、腐蚀、开运算、闭运算等操作，对图像进行处理，以便更好地分离颗粒。 3.使用区域生长算法或连通区域分析算法，对颗粒进行分割。 4.对每个颗粒进行形态学特征提取，例如面积、周长、等效直径等。 5.根据颗粒的形态学特征，使用机器学习算法，例如支持向量机（SVM）、人工神经网络（ANN）等，进行颗粒粒径的预测。 以下是一个MATLAB代码示例，用于计算颗粒的等效直径： ```matlab % 读取图像 img = imread('particle.jpg'); % 预处理 img = rgb2gray(img); img = im2double(img); img = imadjust(img); % 二值化 level = graythresh(img); bw = imbinarize(img, level); % 形态学处理 se = strel('disk', 5); bw = imopen(bw, se); bw = imclose(bw, se); % 连通区域分析 cc = bwconncomp(bw); stats = regionprops(cc, 'Area', 'Perimeter'); % 计算等效直径 diameters = sqrt(4 * [stats.Area] / pi); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值